From cc5ab9ebd44942c665327927c712fc43fb958d50 Mon Sep 17 00:00:00 2001
From: Aicirou <2643053021@qq.com>
Date: Sun, 5 Jul 2020 23:57:22 +0800
Subject: [PATCH] :sparkles:Add Audio Player (APlayer) #77
---
package-lock.json | 25 ++++++++++
package.json | 1 +
public/setting.js | 3 ++
src/assets/style/theme/acrou/index.scss | 10 ++++
src/store/modules/acrou/modules/aplayer.js | 55 ++++++++++++++++++++++
src/views/Layout.vue | 3 ++
src/views/common/APlayer.vue | 46 ++++++++++++++++++
src/views/page/GoList.vue | 22 ++++++++-
8 files changed, 164 insertions(+), 1 deletion(-)
create mode 100644 src/store/modules/acrou/modules/aplayer.js
create mode 100644 src/views/common/APlayer.vue
diff --git a/package-lock.json b/package-lock.json
index 0643954..b0686a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1992,6 +1992,16 @@
}
}
},
+ "aplayer": {
+ "version": "1.10.1",
+ "resolved": "https://registry.npm.taobao.org/aplayer/download/aplayer-1.10.1.tgz",
+ "integrity": "sha1-MYKJIGEHRSzDno9VL6bMbLRZqQw=",
+ "requires": {
+ "balloon-css": "^0.5.0",
+ "promise-polyfill": "7.1.0",
+ "smoothscroll": "0.4.0"
+ }
+ },
"aproba": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/aproba/download/aproba-1.2.0.tgz",
@@ -2334,6 +2344,11 @@
"resolved": "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
},
+ "balloon-css": {
+ "version": "0.5.2",
+ "resolved": "https://registry.npm.taobao.org/balloon-css/download/balloon-css-0.5.2.tgz",
+ "integrity": "sha1-niFjVloTbJ1Kog6EAHcs47c40/8="
+ },
"base": {
"version": "0.11.2",
"resolved": "http://registry.npm.taobao.org/base/download/base-0.11.2.tgz",
@@ -9903,6 +9918,11 @@
"integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
"dev": true
},
+ "promise-polyfill": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npm.taobao.org/promise-polyfill/download/promise-polyfill-7.1.0.tgz",
+ "integrity": "sha1-TXSUhbRFd8FBN1kcbzbl1+LdM3g="
+ },
"proxy-addr": {
"version": "2.0.6",
"resolved": "https://registry.npm.taobao.org/proxy-addr/download/proxy-addr-2.0.6.tgz?cache=0&sync_timestamp=1582556112011&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fproxy-addr%2Fdownload%2Fproxy-addr-2.0.6.tgz",
@@ -11025,6 +11045,11 @@
}
}
},
+ "smoothscroll": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npm.taobao.org/smoothscroll/download/smoothscroll-0.4.0.tgz",
+ "integrity": "sha1-QOUHtGRhQIuht4fQCB4eiDxBJKU="
+ },
"snapdragon": {
"version": "0.8.2",
"resolved": "http://registry.npm.taobao.org/snapdragon/download/snapdragon-0.8.2.tgz",
diff --git a/package.json b/package.json
index 2b3bddd..158a405 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
},
"dependencies": {
+ "aplayer": "^1.10.1",
"axios": "^0.19.2",
"bulma": "^0.8.2",
"bulma-divider": "^0.2.0",
diff --git a/public/setting.js b/public/setting.js
index cbc8032..91ef5e3 100644
--- a/public/setting.js
+++ b/public/setting.js
@@ -32,6 +32,9 @@ var themeOptions = {
api: "",
autoplay: true,
},
+ audio: {
+ autoplay: false,
+ },
};
window.gdconfig = JSON.parse(
JSON.stringify({ version: authConfig.version, themeOptions: themeOptions })
diff --git a/src/assets/style/theme/acrou/index.scss b/src/assets/style/theme/acrou/index.scss
index 61fc82b..3707b70 100644
--- a/src/assets/style/theme/acrou/index.scss
+++ b/src/assets/style/theme/acrou/index.scss
@@ -202,3 +202,13 @@ body {
padding-bottom: 0;
padding-top: 0;
}
+
+// APlayer
+.aplayer.aplayer-fixed.aplayer-narrow {
+ .aplayer-body {
+ left: -66px !important;
+ }
+ .aplayer-body:hover {
+ left: 0px !important;
+ }
+}
diff --git a/src/store/modules/acrou/modules/aplayer.js b/src/store/modules/acrou/modules/aplayer.js
new file mode 100644
index 0000000..10c8ff8
--- /dev/null
+++ b/src/store/modules/acrou/modules/aplayer.js
@@ -0,0 +1,55 @@
+export default {
+ namespaced: true,
+ state: {
+ player: null,
+ audios: [],
+ },
+ actions: {
+ set({ state }, player) {
+ state.player = player;
+ },
+ add({ state, dispatch }, { audio, play }) {
+ return new Promise((resolve) => {
+ for (var i = 0; i < state.audios.length; i++) {
+ var s = state.audios[i];
+ if (s.id === audio.id) {
+ state.audios.splice(i, 1);
+ state.player.list.remove(i);
+ i--;
+ }
+ }
+ state.player.list.add(audio);
+ state.audios.push(audio);
+ if (play) {
+ var index = state.audios.length;
+ state.player.list.switch(index - 1);
+ state.player.play();
+ }
+ dispatch(
+ "acrou/db/set",
+ {
+ path: "audio.list",
+ value: state.audios,
+ },
+ { root: true }
+ );
+ resolve();
+ });
+ },
+ load({ state, dispatch }) {
+ // eslint-disable-next-line no-async-promise-executor
+ return new Promise(async (resolve) => {
+ var audio = await dispatch(
+ "acrou/db/get",
+ {
+ path: "audio.list",
+ defaultValue: [],
+ },
+ { root: true }
+ );
+ state.audios = audio;
+ resolve();
+ });
+ },
+ },
+};
diff --git a/src/views/Layout.vue b/src/views/Layout.vue
index d329288..4704aa2 100644
--- a/src/views/Layout.vue
+++ b/src/views/Layout.vue
@@ -9,12 +9,14 @@
+
diff --git a/src/views/page/GoList.vue b/src/views/page/GoList.vue
index ec333fc..e4ab061 100644
--- a/src/views/page/GoList.vue
+++ b/src/views/page/GoList.vue
@@ -75,7 +75,7 @@ import {
checkView,
checkExtends,
} from "@utils/AcrouUtil";
-import { mapState } from "vuex";
+import { mapState, mapActions } from "vuex";
import BreadCrumb from "../common/BreadCrumb";
import ListView from "./components/list";
import GridView from "./components/grid";
@@ -110,6 +110,11 @@ export default {
"video/x-flv": "icon-video",
"application/x-mpegURL": "icon-video",
"audio/mpegurl": "icon-video",
+ "audio/mp3": "icon-audio",
+ "audio/flac": "icon-audio",
+ "audio/x-m4a": "icon-audio",
+ "audio/wav": "icon-audio",
+ "audio/ogg": "icon-audio",
"text/plain": "icon-txt",
"text/markdown": "icon-markdown",
"text/x-ssa": "icon-ass",
@@ -155,6 +160,7 @@ export default {
this.render();
},
methods: {
+ ...mapActions("acrou/aplayer", ["add"]),
infiniteHandler($state) {
// 首次进入页面不执行滚动事件
if (!this.page.page_token) {
@@ -273,6 +279,20 @@ export default {
});
return;
}
+ if (file.mimeType.startsWith("audio/") && target === "view") {
+ if (window.aplayer) {
+ this.add({
+ audio: {
+ id: file.id,
+ name: file.name,
+ artist: "none",
+ url: file.path,
+ },
+ play: true,
+ });
+ }
+ return;
+ }
let cmd = this.$route.params.cmd;
if (cmd && cmd === "search") {
this.goSearchResult(file, target);