Migration from v1 completed
Migration from v1 completed
This commit is contained in:
parent
04f0ccc13c
commit
3341c5df68
215
src/App.vue
215
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-card flat class="player-interface w-100" :class="{ 'solid-bg': smAndDown }">
|
||||
<v-list style="background: rgba(0,0,0,0)" color="rgba(0, 0, 0, 0)">
|
||||
<v-list-item height="32" min-height="32" class="pb-0 pt-8">
|
||||
<v-slider
|
||||
v-model="progress"
|
||||
color="blue"
|
||||
min="0"
|
||||
max="100"
|
||||
dense
|
||||
hide-details
|
||||
:disabled="isOff"
|
||||
class="time-slider w-100 px-2 py-0 m-0"
|
||||
>
|
||||
<template v-slot:append>{{ currentTime ? currentTime : "00:00"}}/{{duration ? duration : "00:00"}}</template>
|
||||
</v-slider>
|
||||
</v-list-item>
|
||||
<v-list-item class="py-0">
|
||||
<v-list-item-content v-if="smAndUp">
|
||||
<v-list-item-title>{{ $store.getters.book.author }}</v-list-item-title>
|
||||
<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>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-list-item-action class="mx-2">
|
||||
<v-btn
|
||||
flat
|
||||
icon="mdi-skip-backward"
|
||||
@click="prevChapter"
|
||||
>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
|
||||
<v-list-item-action>
|
||||
<v-btn
|
||||
flat
|
||||
icon
|
||||
@click="toggleStatus"
|
||||
>
|
||||
<v-icon>mdi-{{ isPlaying ? "pause" : "play" }}</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
|
||||
<v-list-item-action class="mx-2">
|
||||
<v-btn
|
||||
flat
|
||||
icon="mdi-skip-forward"
|
||||
@click="nextChapter"
|
||||
></v-btn>
|
||||
</v-list-item-action>
|
||||
|
||||
<v-card
|
||||
flat
|
||||
width="200"
|
||||
height="35"
|
||||
class="pr-6"
|
||||
>
|
||||
<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-card>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
<v-footer app height="95" style="bottom: 0" class="pa-0 ma-0 d-flex flex-wrap">
|
||||
<v-row class="w-100 pa-0 ma-0" style="flex-wrap: nowrap;">
|
||||
<v-col cols="12" class="py-0 my-0">
|
||||
<v-slider
|
||||
v-model="progress"
|
||||
color="blue"
|
||||
min="0"
|
||||
max="100"
|
||||
dense
|
||||
hide-details
|
||||
:disabled="isOff"
|
||||
class="time-slider w-100 px-2 py-0 m-0"
|
||||
>
|
||||
<template v-slot:append>{{ currentTime ? currentTime : "00:00"}}/{{duration ? duration : "00:00"}}</template>
|
||||
</v-slider>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="w-100 pa-0 ma-0" style="flex-wrap: nowrap;">
|
||||
<v-col
|
||||
cols="1"
|
||||
style="min-width: 0px; max-width: 100%"
|
||||
class="flex-grow-1 flex-shrink-0; background-color: red;"
|
||||
v-if="smAndUp"
|
||||
>
|
||||
<v-card flat color="rgba(0, 0, 0, 0)">
|
||||
<v-list-item two-line>
|
||||
<v-list-item-header>
|
||||
<v-list-item-title>{{ $store.getters.book.author }}</v-list-item-title>
|
||||
<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>
|
||||
</v-list-item-header>
|
||||
</v-list-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="6"
|
||||
sm="4"
|
||||
md="2"
|
||||
class="flex-grow-1 flex-shrink-0 d-flex justify-center"
|
||||
style="min-width: 220px;"
|
||||
>
|
||||
<v-btn
|
||||
flat
|
||||
icon="mdi-skip-backward"
|
||||
class="ml-1"
|
||||
@click="prevChapter"
|
||||
>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
flat
|
||||
icon
|
||||
class="ml-1"
|
||||
@click="toggleStatus"
|
||||
>
|
||||
<v-icon>mdi-{{ isPlaying ? "pause" : "play" }}</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
flat
|
||||
icon="mdi-skip-forward"
|
||||
class="ml-1"
|
||||
@click="nextChapter"
|
||||
></v-btn>
|
||||
<v-btn
|
||||
flat
|
||||
icon="mdi-bookmark-outline"
|
||||
class="ml-1"
|
||||
@click="setBookmark(false)"
|
||||
v-if="!$store.getters.autoBookmark"
|
||||
></v-btn>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="6"
|
||||
sm="4"
|
||||
md="3"
|
||||
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>
|
||||
|
||||
@ -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") }} «{{ $store.getters.book.cycle }}»</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>
|
||||
|
||||
@ -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-model="darkTheme"
|
||||
color="blue"
|
||||
:label="$t('darkTheme')"
|
||||
></v-switch>
|
||||
<div class="mb-7 text-caption">{{ $t("playbackRate") }}</div>
|
||||
<v-slider
|
||||
v-model="playbackRate"
|
||||
color="blue"
|
||||
label="color"
|
||||
min="0.5"
|
||||
max="2"
|
||||
step="0.5"
|
||||
show-ticks="always"
|
||||
thumb-label="always"
|
||||
tick-size="4"
|
||||
></v-slider>
|
||||
<v-window v-model="activeTab">
|
||||
<v-window-item value="settings">
|
||||
<v-switch
|
||||
v-model="darkTheme"
|
||||
color="blue"
|
||||
:label="$t('darkTheme')"
|
||||
></v-switch>
|
||||
<v-switch
|
||||
v-model="autoBookmark"
|
||||
color="blue"
|
||||
:label="$t('autoBookmarks')"
|
||||
></v-switch>
|
||||
<div class="mb-7 text-caption">{{ $t("playbackRate") }}</div>
|
||||
<v-slider
|
||||
v-model="playbackRate"
|
||||
color="blue"
|
||||
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>© Александр Чебыкин, 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>© 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); }
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
const messages = {
|
||||
appName: "Аудиотека",
|
||||
about: "О программе",
|
||||
authors: "Авторы",
|
||||
autoBookmarks: "Автозакладки",
|
||||
book: "Книга",
|
||||
bookmarkSaved: "Закладка сохранена",
|
||||
books: "Книги",
|
||||
@ -8,6 +10,7 @@ const messages = {
|
||||
darkTheme: "Тёмная тема",
|
||||
information: "Информация",
|
||||
playbackRate: "Скорость воспроизведения",
|
||||
reader: "Читает",
|
||||
settings: "Настройки"
|
||||
}
|
||||
|
||||
|
||||
@ -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; },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user