Migration from v1 completed

Migration from v1 completed

src/App.vue

@@ -53,83 +53,110 @@
                         <component :is="Component"/>
                     </transition>
                 </router-view>
+                <v-alert
+                    prominent
+                    closable
+                    close-label="Close Alert"
+                    :type="alertType"
+                    v-if="alertMessage.trim() !== ''"
+                    class="bottom-alert mx-2"
+                >
+                    {{ alertMessage }}
+                </v-alert>
             </v-container>
         </v-main>
 
-        <v-footer app height="80" class="pa-0 ma-0">
+        <v-footer app height="95" style="bottom: 0" class="pa-0 ma-0 d-flex flex-wrap">
-            <v-card flat class="player-interface w-100" :class="{ 'solid-bg': smAndDown }">
+            <v-row class="w-100 pa-0 ma-0" style="flex-wrap: nowrap;">
-                <v-list style="background: rgba(0,0,0,0)" color="rgba(0, 0, 0, 0)">
+                <v-col cols="12" class="py-0 my-0">
-                    <v-list-item height="32" min-height="32" class="pb-0 pt-8">
+                    <v-slider
-                        <v-slider
+                        v-model="progress"
-                            v-model="progress"
+                        color="blue"
-                            color="blue"
+                        min="0"
-                            min="0"
+                        max="100"
-                            max="100"
+                        dense
-                            dense
+                        hide-details
-                            hide-details
+                        :disabled="isOff"
-                            :disabled="isOff"
+                        class="time-slider w-100 px-2 py-0 m-0"
-                            class="time-slider w-100 px-2 py-0 m-0"
+                    >
-                        >
+                        <template v-slot:append>{{ currentTime ? currentTime : "00:00"}}/{{duration ? duration : "00:00"}}</template>
-                            <template v-slot:append>{{ currentTime ? currentTime : "00:00"}}/{{duration ? duration : "00:00"}}</template>
+                    </v-slider>
-                        </v-slider>
+                </v-col>
-                    </v-list-item>
+            </v-row>
-                    <v-list-item class="py-0">
+            <v-row no-gutters class="w-100 pa-0 ma-0" style="flex-wrap: nowrap;">
-                        <v-list-item-content v-if="smAndUp">
+                <v-col
-                            <v-list-item-title>{{ $store.getters.book.author }}</v-list-item-title>
+                    cols="1"
-                            <v-list-item-subtitle>{{ $store.getters.book.title }}<span v-if="$store.getters.chapters.length > 0 && currentChapter !== null && $store.getters.chapters[currentChapter].title !== ''"> - {{ $store.getters.chapters[currentChapter].title }}</span></v-list-item-subtitle>
+                    style="min-width: 0px; max-width: 100%"
-                        </v-list-item-content>
+                    class="flex-grow-1 flex-shrink-0; background-color: red;"
-
+                    v-if="smAndUp"
-                        <v-spacer></v-spacer>
+                >
-
+                    <v-card flat color="rgba(0, 0, 0, 0)">
-                        <v-list-item-action class="mx-2">
+                        <v-list-item two-line>
-                            <v-btn
+                            <v-list-item-header>
-                                flat
+                                <v-list-item-title>{{ $store.getters.book.author }}</v-list-item-title>
-                                icon="mdi-skip-backward"
+                                <v-list-item-subtitle style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{ $store.getters.book.title }}<span v-if="$store.getters.chapters.length > 0 && currentChapter !== null && $store.getters.chapters[currentChapter].title !== ''"> - {{ $store.getters.chapters[currentChapter].title }}</span></v-list-item-subtitle>
-                                @click="prevChapter"
+                            </v-list-item-header>
-                            >
+                        </v-list-item>
-                            </v-btn>
+                    </v-card>
-                        </v-list-item-action>
+                </v-col>
-
+                <v-col
-                        <v-list-item-action>
+                    cols="6"
-                            <v-btn
+                    sm="4"
-                                flat
+                    md="2"
-                                icon
+                    class="flex-grow-1 flex-shrink-0 d-flex justify-center"
-                                @click="toggleStatus"
+                    style="min-width: 220px;"
-                            >
+                >
-                                <v-icon>mdi-{{ isPlaying ? "pause" : "play" }}</v-icon>
+                    <v-btn
-                            </v-btn>
+                        flat
-                        </v-list-item-action>
+                        icon="mdi-skip-backward"
-
+                        class="ml-1"
-                        <v-list-item-action class="mx-2">
+                        @click="prevChapter"
-                            <v-btn
+                    >
-                                flat
+                    </v-btn>
-                                icon="mdi-skip-forward"
+                    <v-btn
-                                @click="nextChapter"
+                        flat
-                            ></v-btn>
+                        icon
-                        </v-list-item-action>
+                        class="ml-1"
-
+                        @click="toggleStatus"
-                        <v-card
+                    >
-                            flat
+                        <v-icon>mdi-{{ isPlaying ? "pause" : "play" }}</v-icon>
-                            width="200"
+                    </v-btn>
-                            height="35"
+                    <v-btn
-                            class="pr-6"
+                        flat
-                        >
+                        icon="mdi-skip-forward"
-                            <v-slider
+                        class="ml-1"
-                                class="w-100"
+                        @click="nextChapter"
-                                :class="{ 'mr-3': mdAndUp, 'ml-3': mdAndDown }"
+                    ></v-btn>
-                                :min="0"
+                    <v-btn
-                                :max="10"
+                        flat
-                                thumb-label
+                        icon="mdi-bookmark-outline"
-                                hide-details
+                        class="ml-1"
-                                color="blue"
+                        @click="setBookmark(false)"
-                                v-model="volume"
+                        v-if="!$store.getters.autoBookmark"
-                                prepend-icon="mdi-volume-low"
+                    ></v-btn>
-                                append-icon="mdi-volume-high"
+                </v-col>
-                            ></v-slider>
+                <v-col
-                        </v-card>
+                    cols="6"
-                    </v-list-item>
+                    sm="4"
-                </v-list>
+                    md="3"
-            </v-card>
+                    lg="2"
+                    class="flex-grow-1 flex-shrink-0 pt-2 pr-6"
+                    style="min-width: 100px;"
+                >
+                    <v-slider
+                        class="w-100"
+                        :class="{ 'mr-3': mdAndUp, 'ml-3': mdAndDown }"
+                        :min="0"
+                        :max="10"
+                        thumb-label
+                        hide-details
+                        color="blue"
+                        v-model="volume"
+                        prepend-icon="mdi-volume-low"
+                        append-icon="mdi-volume-high"
+                    ></v-slider>
+                </v-col>
+            </v-row>
         </v-footer>
         <!--
         <v-fab-transition>
@@ -194,8 +221,10 @@
                 appData:         { name: "", net: "" },
                 backgroundImage: this.defaultBackground,
 
+                alertType:       "info",
+                alertMessage:    "",
+
                 authors:         [],
-                autoBookmark:    true,
 
                 audioElement:    null,
                 currentChapter:  null,
@@ -231,6 +260,12 @@
                 localStorage.playbackRate = val;
             },
 
+            alertMessage (val) {
+                if (val.trim() !== "") {
+                    setTimeout(() => { this.alertMessage = ""; }, 5000);
+                }
+            },
+
             playbackRate (val) {
                 if (this.audioElement !== null) {
                     this.audioElement.playbackRate = val;
@@ -267,8 +302,6 @@
 
                 set (val) {
                     if (this.audioElement !== null && val !== Math.round(this.currentProgress)) {
-                        //console.log(this.audioElement);
-                        //console.log(this.audioElement.duration);
                         this.currentProgress = val;
                         this.audioElement.currentTime = this.audioElement.duration * val / 100;
                     }
@@ -281,6 +314,9 @@
         },
 
         mounted () {
+            let autoBookmark = localStorage.autoBookmark ? JSON.parse(localStorage.autoBookmark) : false;
+            this.$store.commit("setAutoBookmark", autoBookmark);
+
             let darkTheme = localStorage.darkTheme ? JSON.parse(localStorage.darkTheme) : false;
             this.$store.commit("setDarkTheme", darkTheme);
 
@@ -391,13 +427,23 @@
             * @param {object} bookData Book data
             */
             loadBook (bookData) {
+                if (this.audioElement !== null && this.$store.getters.autoBookmark) {
+                    this.setBookmark();
+                }
+
                 let author = this.$store.getters.author;
 
                 this.$store.commit("setBook", {
                     author: author.name,
                     photo:  author.image,
+                    cycle:  bookData.cycle !== undefined && bookData.cycle !== "no_cycle" && bookData.cycle.trim() !== ""
+                        ? bookData.cycle
+                        : "",
                     title:  bookData.title,
                     cover:  bookData.image,
+                    reader: bookData.reader !== undefined && bookData.reader.trim() !== ""
+                        ? bookData.reader
+                        : "",
                     wiki:   ""
                 });
 
@@ -565,7 +611,7 @@
                     JSON.stringify(data)
                 );
 
-                if (!silent) { this.showMessage(this.$t("information"), this.$t("bookmarkSaved")); }
+                if (!silent) { this.alertMessage = this.$t("bookmarkSaved"); }
             },
 
             showMessage (title, text) {
@@ -587,7 +633,10 @@
                     this.play();
                 } else {
                     this.pause();
-                    this.setBookmark();
+
+                    if (this.$store.getters.autoBookmark) {
+                        this.setBookmark();
+                    }
                 }
             },
 
@@ -658,4 +707,12 @@
         .v-tabs
             .v-btn
                 height: inherit
+
+    .bottom-alert
+        position: absolute !important
+        bottom: 5px
+        left: 0
+        right: 0
+        z-index: 999
+        opacity: .9
 </style>

src/components/BookReader.vue

@@ -59,7 +59,17 @@
                         >
                         </v-img>
                     </v-col>
+                    <v-col
+                        cols="12"
+                        class="d-flex justify-center mt-2"
+                        v-if="$store.getters.book.cycle !== undefined && $store.getters.book.cycle.trim() !== ''"
+                    >{{ $t("cycle") }} &laquo;{{ $store.getters.book.cycle }}&raquo;</v-col>
                     <v-col cols="12" class="d-flex justify-center mt-2" v-if="$store.getters.book.title.trim() !== ''">{{ $store.getters.book.title }}</v-col>
+                    <v-col
+                        cols="12"
+                        class="d-flex justify-center mt-2"
+                        v-if="$store.getters.book.reader !== undefined &&$store.getters.book.reader.trim() !== ''"
+                    >{{ $t("reader") }} {{ $store.getters.book.reader }}</v-col>
                     <v-col cols="12" class="d-flex justify-center mt-4" v-if="$store.getters.book.wiki.trim() !== ''">
                         <v-expansion-panels>
                             <v-expansion-panel>
@@ -92,7 +102,7 @@
                 :lg="illustrated ? 2 : 5"
                 class="flex-grow-1 flex-shrink-0 pa-2"
             >
-                <v-list class="transparent-bg">
+                <v-list class="transparent-bg" :class="{ 'limit-max-width': xs }">
                     <v-list-item
                         v-for="(item, index) in $store.getters.chapters"
                         :key="index"
@@ -158,4 +168,8 @@
 
     .v-list-item.no-selection-pl
         padding-left: 73px
+
+    .v-list.limit-max-width
+        .v-list-item
+            max-width: calc(100vw - 50px)
 </style>

src/components/SettingsDialog.vue

@@ -7,24 +7,55 @@
         >
             <v-card style="width: 350px">
                 <v-card-title class="headline">{{ $t("settings") }}</v-card-title>
+                <v-tabs
+                    v-model="activeTab"
+                    centered
+                >
+                    <v-tab ripple value="settings">{{ $t("settings") }}</v-tab>
+                    <v-tab ripple value="about">{{ $t("about") }}</v-tab>
+                </v-tabs>
                 <v-card-text>
-                    <v-switch
+                    <v-window v-model="activeTab">
-                        v-model="darkTheme"
+                        <v-window-item value="settings">
-                        color="blue"
+                            <v-switch
-                        :label="$t('darkTheme')"
+                                v-model="darkTheme"
-                    ></v-switch>
+                                color="blue"
-                    <div class="mb-7 text-caption">{{ $t("playbackRate") }}</div>
+                                :label="$t('darkTheme')"
-                    <v-slider
+                            ></v-switch>
-                        v-model="playbackRate"
+                            <v-switch
-                        color="blue"
+                                v-model="autoBookmark"
-                        label="color"
+                                color="blue"
-                        min="0.5"
+                                :label="$t('autoBookmarks')"
-                        max="2"
+                            ></v-switch>
-                        step="0.5"
+                            <div class="mb-7 text-caption">{{ $t("playbackRate") }}</div>
-                        show-ticks="always"
+                            <v-slider
-                        thumb-label="always"
+                                v-model="playbackRate"
-                        tick-size="4"
+                                color="blue"
-                    ></v-slider>
+                                label="color"
+                                min="0.5"
+                                max="2"
+                                step="0.5"
+                                show-ticks="always"
+                                thumb-label="always"
+                                tick-size="4"
+                            ></v-slider>
+                        </v-window-item>
+
+                        <v-window-item value="about">
+                            <template v-if="locale == 'ru'">
+                                <p><center>Аудиотека</center></p>
+                                <p><center>&copy; Александр Чебыкин, 2019-2022</center></p>
+                                <p><center>Опубликовано под лицензией <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a></center></p>
+                                <p><center>Git: <a href="https://www.cainet.info/git/cai/AudioLib" target="_blank">https://home.cainet.info/git/cai/AudioLib</a></center></p>
+                            </template>
+                            <template v-else>
+                                <p><center>Audiobooks library</center></p>
+                                <p><center>&copy; Alexander I Chebykin, 2019-2022</center></p>
+                                <p><center>Published under <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a></center></p>
+                                <p><center>Git: <a href="https://www.cainet.info/git/cai/AudioLib" target="_blank">https://www.cainet.info/git/cai/AudioLib</a></center></p>
+                            </template>
+                        </v-window-item>
+                    </v-window>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
@@ -40,19 +71,31 @@
         data () {
             return {
                 dialog:       false,
+                activeTab:    0,
+                autoBookmark: false,
                 darkTheme:    false,
-                playbackRate: 1
+                locale:       "en",
+                playbackRate: 1,
             }
         },
 
         watch: {
             dialog (val) {
                 if (val) {
+                    this.autoBookmark = this.$store.getters.autoBookmark;
                     this.darkTheme    = this.$store.getters.darkTheme;
                     this.playbackRate = this.$store.getters.playbackRate;
+
+                    let userLocale = navigator.language || navigator.userLanguage;
+                    userLocale = userLocale.indexOf("-") > 0
+                        ? userLocale.substring(0, userLocale.indexOf("-")).toLowerCase()
+                        : userLocale.toLowerCase();
+
+                    this.locale = userLocale;
                 }
             },
 
+            autoBookmark (val) { this.$store.commit("setAutoBookmark", val); },
             darkTheme (val)    { this.$store.commit("setDarkTheme", val); },
             playbackRate (val) { this.$store.commit("setPlaybackRate", val); }
         }

src/plugins/locales/en.js

@@ -1,6 +1,8 @@
 const messages = {
     appName: "AudioLib",
+    about: "About",
     authors: "Authors",
+    autoBookmarks: "Auto bookmarks",
     book: "Books",
     bookmarkSaved: "Bookmark saved",
     books: "Book",
@@ -8,6 +10,7 @@ const messages = {
     darkTheme: "DarkTheme",
     information: "Information",
     playbackRate: "Playback rate",
+    reader: "Reader",
     settings: "Settings"
 }
 

src/plugins/locales/ru.js

@@ -1,6 +1,8 @@
 const messages = {
     appName: "Аудиотека",
+    about: "О программе",
     authors: "Авторы",
+    autoBookmarks: "Автозакладки",
     book: "Книга",
     bookmarkSaved: "Закладка сохранена",
     books: "Книги",
@@ -8,6 +10,7 @@ const messages = {
     darkTheme: "Тёмная тема",
     information: "Информация",
     playbackRate: "Скорость воспроизведения",
+    reader: "Читает",
     settings: "Настройки"
 }
 

src/store.js

@@ -10,6 +10,7 @@ const store = createStore({
                 wiki:  ""
             },
             authors: [],
+            autoBookmark: false,
             book: {
                 author: "",
                 photo:  "",
@@ -28,6 +29,7 @@ const store = createStore({
     getters: {
         author:       state => { return state.author; },
         authors:      state => { return state.authors; },
+        autoBookmark: state => { return state.autoBookmark; },
         book:         state => { return state.book; },
         books:        state => { return state.books; },
         chapters:     state => { return state.chapters },
@@ -39,6 +41,7 @@ const store = createStore({
     mutations: {
         setAuthor (state, payload)       { state.author       = payload; },
         setAuthors (state, payload)      { state.authors      = payload; },
+        setAutoBookmark (state, payload) { state.autoBookmark = payload; },
         setBook (state, payload)         { state.book         = payload; },
         setBooks (state, payload)        { state.books        = payload; },
         setChapters (state, payload)     { state.chapters     = payload; },