cai/AudioLib
1
1
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Back to top button added

Browse Source
This commit is contained in:
Alexander I. Chebykin 2019-06-29 20:22:16 +03:00
parent fe13c19a3b
commit c0b6e35430
9 changed files with 148 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@ -11,7 +11,8 @@
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>Извините, данное приложение не работает без JavaScript.</strong> <strong>Извините, данное приложение не работает без JavaScript.</strong><br>
<strong>You need JavaScript to run this application.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->

126
src/App.vue
View File

@ -155,18 +155,33 @@
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</v-card> </v-card>
<v-fab-transition>
<v-btn
class="to-top-button"
v-show="scrolled"
color="blue"
@click="scrollToTop"
dark
fixed
bottom
right
fab
>
<v-icon>keyboard_arrow_up</v-icon>
</v-btn>
</v-fab-transition>
<MessageDialog ref="MessageDialog" /> <MessageDialog ref="MessageDialog" />
</v-app> </v-app>
</template> </template>
<script> <script>
import Authors from './components/Authors' import Authors from "./components/Authors"
import Books from './components/Books' import Books from "./components/Books"
import Book from './components/Book' import Book from "./components/Book"
import MessageDialog from './components/MessageDialog' import MessageDialog from "./components/MessageDialog"
export default { export default {
name: 'App', name: "App",
components: { components: {
Authors, Authors,
@ -179,56 +194,51 @@
return { return {
appNet: "CAINet", appNet: "CAINet",
appName: "Аудиотека", appName: "Аудиотека",
activeTab: null, activeTab: null,
autoBookmark: false, autoBookmark: false,
darkTheme: false, darkTheme: false,
isLoading: false, isLoading: false,
isMounted: false, isMounted: false,
locale: { flag: 'ru', language: 'ru', title: 'Русский' }, locale: { flag: "ru", language: "ru", title: "Русский" },
locales: [ locales: [
{ flag: 'us', language: 'en', title: 'English' }, { flag: "us", language: "en", title: "English" },
{ flag: 'ru', language: 'ru', title: 'Русский' } { flag: "ru", language: "ru", title: "Русский" }
], ],
scrolled: false,
volume: 5//, volume: 5//,
//locale: [] //locale: []
} }
}, },
created () {
window.addEventListener("scroll", this.onScroll);
},
mounted () { mounted () {
this.isMounted = true; this.isMounted = true;
this.darkTheme = localStorage.darkTheme ? JSON.parse(localStorage.darkTheme) : false; this.darkTheme = localStorage.darkTheme
this.autoBookmark = localStorage.autoBookmark ? JSON.parse(localStorage.autoBookmark) : false; ? JSON.parse(localStorage.darkTheme)
this.volume = localStorage.volume ? JSON.parse(localStorage.volume) : 5; : false;
this.autoBookmark = localStorage.autoBookmark
? JSON.parse(localStorage.autoBookmark)
: false;
this.volume = localStorage.volume
? JSON.parse(localStorage.volume)
: 5;
this.isLoading = true; this.isLoading = true;
let userLocale = navigator.language || navigator.userLanguage; //let userLocale = navigator.language || navigator.userLanguage;
/*
this.axios.get("locales/locales.json")
.then(response => {
let localeLoaded = false;
response.data.forEach(element => {
if (element.code == userLocale.toLowerCase()) {
this.loadLocale(element.file);
localeLoaded = true;
}
});
if (!localeLoaded) { this.loadLocale("en"); }
})
.catch(error => {
console.log(error);
this.showMessage("Error", error);
});
*/
this.axios.get("config.json") this.axios.get("config.json")
.then(response => { .then(response => {
this.appNet = response.data.AppNet; this.appNet = response.data.AppNet;
this.appName = response.data.AppName; this.appName = response.data.AppName;
}) })
.catch(error => { .catch(error => {
console.log(error);
this.showMessage(this.$t("error"), error); this.showMessage(this.$t("error"), error);
console.error(error);
}); });
this.axios.get("lib/authors.json") this.axios.get("lib/authors.json")
@ -237,50 +247,52 @@
this.isLoading = false; this.isLoading = false;
}) })
.catch(error => { .catch(error => {
console.log(error);
this.showMessage(this.$t("error"), error); this.showMessage(this.$t("error"), error);
console.error(error);
}); });
}, },
destroyed () {
window.removeEventListener("scroll", this.onScroll);
},
computed: { computed: {
authorName () { authorName () {
return !this.isMounted ? "" : this.$refs.Book.authorName; return this.isMounted ? this.$refs.Book.authorName : "";
}, },
bookOpened () { bookOpened () {
return !this.isMounted ? false : this.$refs.Book.items.length > 0; return this.isMounted ? this.$refs.Book.items.length > 0 : false;
}, },
bookTitle () { bookTitle () {
return !this.isMounted ? "" : this.$refs.Book.bookTitle; return this.isMounted ? this.$refs.Book.bookTitle : "";
}, },
currentChapter () { currentChapter () {
let curChapter = !this.isMounted let curChapter = this.isMounted ? this.$refs.Book.items[this.$refs.Book.currentChapter] : "";
? ""
: this.$refs.Book.items[this.$refs.Book.currentChapter];
return curChapter ? curChapter.title : ""; return curChapter ? curChapter.title : "";
}, },
currentTime () { currentTime () {
return !this.isMounted ? "00:00" : this.$refs.Book.currentTime; return this.isMounted ? this.$refs.Book.currentTime : "00:00";
}, },
duration () { duration () {
return !this.isMounted ? "00:00" : this.$refs.Book.duration; return this.isMounted ? this.$refs.Book.duration : "00:00";
}, },
isOff () { isOff () {
return !this.isMounted ? true : this.$refs.Book.isOff; return this.isMounted ? this.$refs.Book.isOff : true;
}, },
isPlaying () { isPlaying () {
return !this.isMounted ? false : this.$refs.Book.isPlaying; return this.isMounted ? this.$refs.Book.isPlaying : false;
}, },
progress: { progress: {
get () { get () {
return !this.isMounted ? "" : this.$refs.Book.progress; return this.isMounted ? this.$refs.Book.progress : "";
}, },
set (newVal) { set (newVal) {
@ -307,20 +319,13 @@
return hash.toString(CryptoJS.enc.Hex); return hash.toString(CryptoJS.enc.Hex);
}, },
/* nextChapter () {
loadLocale (langFile) { this.$refs.Book.nextChapter();
this.axios.get("locales/" + langFile)
.then(response => {
this.locale = response.data;
})
.catch(error => {
console.log(error);
this.showMessage("Error", error);
});
}, },
*/
nextChapter () { this.$refs.Book.nextChapter(); }, onScroll () {
this.scrolled = window.scrollY > 0;
},
openBook (val) { openBook (val) {
this.$refs.Book.authorName = this.$refs.Books.authorName; this.$refs.Book.authorName = this.$refs.Books.authorName;
@ -348,8 +353,8 @@
}) })
.catch(error => { .catch(error => {
this.isLoading = false; this.isLoading = false;
console.log(error);
this.showMessage(this.$t("error"), error); this.showMessage(this.$t("error"), error);
console.error(error);
}); });
this.activeTab = 2; this.activeTab = 2;
@ -368,8 +373,8 @@
}) })
.catch(error => { .catch(error => {
this.isLoading = false; this.isLoading = false;
console.log(error);
this.showMessage(this.$t("error"), error); this.showMessage(this.$t("error"), error);
console.error(error);
}); });
}, },
@ -392,6 +397,14 @@
if (!silent) { this.showMessage(this.$t("information"), this.$t("bookmarkRemoved")); } if (!silent) { this.showMessage(this.$t("information"), this.$t("bookmarkRemoved")); }
}, },
scrollToTop () {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
},
setBookmark (silent = true) { setBookmark (silent = true) {
if (this.$refs.Book.items.length == 0) { return; } if (this.$refs.Book.items.length == 0) { return; }
@ -466,4 +479,5 @@
width: 100%; width: 100%;
margin: 0 0 -25px 0; margin: 0 0 -25px 0;
} }
.to-top-button { margin-bottom: 80px; }
</style> </style>

6
src/components/Authors.vue
View File

@ -48,9 +48,11 @@
<script> <script>
export default { export default {
data: () => ({ data () {
return {
items: [] items: []
}), }
},
methods: { methods: {
authorClick (val) { this.$emit("author_selected", val); } authorClick (val) { this.$emit("author_selected", val); }

9
src/components/Book.vue
View File

@ -60,7 +60,8 @@
<script> <script>
export default { export default {
data: () => ({ data () {
return {
audioElement: null, audioElement: null,
authorName: "", authorName: "",
authorImg: "", authorImg: "",
@ -73,7 +74,8 @@
progress: 0, progress: 0,
status: 0, //this.statuses.stopped, status: 0, //this.statuses.stopped,
volume: 5 volume: 5
}), }
},
computed: { computed: {
isOff () { isOff () {
@ -94,7 +96,8 @@
}, },
watch: { watch: {
volume (val) { this.updateVolume(); } //volume (val) { this.updateVolume(); }
volume () { this.updateVolume(); }
}, },
methods: { methods: {

6
src/components/Books.vue
View File

@ -67,11 +67,13 @@
<script> <script>
export default { export default {
data: () => ({ data () {
return {
authorName: "", authorName: "",
authorImg: "", authorImg: "",
items: [] items: []
}), }
},
methods: { methods: {
bookClick (val) { bookClick (val) {

24
src/main.js
View File

@ -7,14 +7,14 @@
* @version 0.9 * @version 0.9
*/ */
import '@mdi/font/css/materialdesignicons.css' import "@mdi/font/css/materialdesignicons.css"
import Vue from 'vue' import Vue from "vue"
import Axios from 'axios' import Axios from "axios"
import VueAxios from 'vue-axios' import VueAxios from "vue-axios"
import './plugins/vuetify' import "./plugins/vuetify"
import i18n from '@/plugins/i18n'; import i18n from "@/plugins/i18n";
import App from './App.vue' import App from "./App.vue"
import './registerServiceWorker' import "./registerServiceWorker"
Vue.config.productionTip = false Vue.config.productionTip = false
@ -24,12 +24,12 @@ Vue.use(VueAxios, Axios)
* Audioplayer statuses * Audioplayer statuses
*/ */
Vue.prototype.statuses = { Vue.prototype.statuses = {
'stopped': 0, "stopped": 0,
'paused': 1, "paused": 1,
'playing': 2 "playing": 2
}; };
new Vue({ new Vue({
i18n, i18n,
render: h => h(App), render: h => h(App),
}).$mount('#app') }).$mount("#app")

4
src/plugins/i18n.js
View File

@ -1,5 +1,5 @@
import Vue from 'vue' import Vue from "vue"
import VueI18n from 'vue-i18n' import VueI18n from "vue-i18n"
Vue.use(VueI18n) Vue.use(VueI18n)

8
src/plugins/vuetify.js
View File

@ -1,7 +1,7 @@
import Vue from 'vue' import Vue from "vue"
import Vuetify from 'vuetify/lib' import Vuetify from "vuetify/lib"
import 'vuetify/src/stylus/app.styl' import "vuetify/src/stylus/app.styl"
Vue.use(Vuetify, { Vue.use(Vuetify, {
iconfont: 'md', iconfont: "md",
}) })

20
src/registerServiceWorker.js
View File

@ -1,32 +1,32 @@
/* eslint-disable no-console */ /* eslint-disable no-console */
import { register } from 'register-service-worker' import { register } from "register-service-worker"
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === "production") {
register(`${process.env.BASE_URL}service-worker.js`, { register(`${process.env.BASE_URL}service-worker.js`, {
ready () { ready () {
console.log( console.log(
'App is being served from cache by a service worker.\n' + "App is being served from cache by a service worker.\n" +
'For more details, visit https://goo.gl/AFskqB' "For more details, visit https://goo.gl/AFskqB"
) )
}, },
registered () { registered () {
console.log('Service worker has been registered.') console.log("Service worker has been registered.")
}, },
cached () { cached () {
console.log('Content has been cached for offline use.') console.log("Content has been cached for offline use.")
}, },
updatefound () { updatefound () {
console.log('New content is downloading.') console.log("New content is downloading.")
}, },
updated () { updated () {
console.log('New content is available; please refresh.') console.log("New content is available; please refresh.")
}, },
offline () { offline () {
console.log('No internet connection found. App is running in offline mode.') console.log("No internet connection found. App is running in offline mode.")
}, },
error (error) { error (error) {
console.error('Error during service worker registration:', error) console.error("Error during service worker registration:", error)
} }
}) })
} }