✨Add Audio Player (APlayer) #77

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",

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",

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 })

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;
+  }
+}

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();
+      });
+    },
+  },
+};

src/views/Layout.vue

@@ -9,12 +9,14 @@
         <Footer></Footer>
       </div>
     </section>
+    <APlayer />
   </div>
 </template>
 
 <script>
 import Head from "./common/Head";
 import Footer from "./common/Footer";
+import APlayer from "./common/APlayer";
 export default {
   data: function () {
     return {};
@@ -22,6 +24,7 @@ export default {
   components: {
     Head,
     Footer: Footer,
+    APlayer
   },
   methods: {},
 };

src/views/common/APlayer.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="aplayer" v-show="show"></div>
+</template>
+<script>
+import { mapState, mapActions } from "vuex";
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.load();
+    Promise.all([
+      import("aplayer/dist/APlayer.min.css"),
+      import("aplayer"),
+    ]).then((values) => {
+      var APlayer = values[1].default;
+      this.set(new APlayer(this.options));
+    });
+  },
+  computed: {
+    ...mapState("acrou/aplayer", ["player", "audios"]),
+    container() {
+      return document.getElementById("aplayer");
+    },
+    options() {
+      var options = window.themeOptions.audio;
+      return {
+        autoplay: false,
+        loop: "all",
+        order: "list",
+        preload: "auto",
+        ...options,
+        container: this.container,
+        fixed: true,
+        audio: this.audios || [],
+      };
+    },
+    show() {
+      return this.audios && this.audios.length > 0;
+    },
+  },
+  methods: {
+    ...mapActions("acrou/aplayer", ["load", "set"]),
+  },
+};
+</script>

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);