From 56282cd545fecf47cc899c41d33298c6418f969f Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 24 Apr 2021 17:54:10 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9Bfix(audio):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E9=9F=B3=E4=B9=90=E6=92=AD=E6=94=BE=E6=97=B6=E4=B8=8D=E8=83=BD?=
 =?UTF-8?q?=E6=8B=96=E5=8A=A8=E8=BF=9B=E5=BA=A6=E6=9D=A1=E5=92=8C=E9=9F=B3?=
 =?UTF-8?q?=E9=87=8F=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |  1 +
 public/index.html                       | 10 ++--
 src/components/preview/AudioPreview.vue | 66 +++++++++++++------------
 src/main.js                             |  9 ++--
 4 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/package.json b/package.json
index d43a6d9..27d2aae 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
+    "@moefe/vue-aplayer": "^2.0.0-beta.5",
     "ant-design-vue": "^1.6.5",
     "clipboard": "^2.0.6",
     "cropperjs": "^1.5.6",
diff --git a/public/index.html b/public/index.html
index 5bc5a10..158c25e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,20 +18,20 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
     <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.js"></script>
     <!--element-ui.js-->
-    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
-    <script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
+    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
     <!--pl-table.js-->
     <link rel="stylesheet" href="https://unpkg.com/pl-table@2.7.5/themes/index.css">
     <script src="https://unpkg.com/pl-table@2.7.5/lib/index.js"></script>
     <!--viewer css-->
     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.7.1/viewer.min.css">
-    <!--vue-aplayer-->
-    <script src="//cdn.jsdelivr.net/npm/vue-aplayer"></script>
+    <!--vue-aplayer-theme-->
+    <script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
+
   </head>
   <body>
     <noscript>
diff --git a/src/components/preview/AudioPreview.vue b/src/components/preview/AudioPreview.vue
index fa82758..3b16ddc 100644
--- a/src/components/preview/AudioPreview.vue
+++ b/src/components/preview/AudioPreview.vue
@@ -1,19 +1,19 @@
 <template>
   <div ref="audioPreview" v-if="show">
   <div class="audio-player"
-    v-aplayerDrag="{ x: transformX, y: transformY }"
+       v-aplayerDrag="{ x: transformX, y: transformY }"
     @mouseenter="closeBarShow = true" @mouseleave="closeBarShow = false" @touchmove="closeBarShow = true" @touchend="touchend">
-    <aplayer
+    <a-player
       ref="audioPlayer"
       autoplay
       listFolded
       loop.sync="all"
       order.sync="list"
       :mini.sync="mini"
-      :music.sync="music"
-      :list="list"
-      :lrc-type="0">
-    </aplayer>
+      :audio="list"
+      :lrc-type="0"
+    >
+    </a-player>
   <div v-show="closeBarShow" class="close-bar" @click="close">
     <svg-icon class="audio-player-close" icon-class="close"/>
   </div>
@@ -36,19 +36,12 @@ export default {
     data() {
       return {
         pc: this.$pc,
-        transformX: !this.$pc ? 20: (document.body.clientWidth-500)/2,
-        transformY: 0,
+        transformX: !this.$pc ? document.body.clientWidth - 100: (document.body.clientWidth-500)/2,
+        transformY: !this.$pc ? document.body.clientHeight/2 - 100 : 0,
         show: false,
         closeBarShow: false,
-        music: {
-          id: '',
-          src: '', // 音频文件的 URL
-          title: '', // 歌曲名称
-          artist: '', // 演唱者
-          pic: '', // 封面图片 URL
-          lrc: '', // LRC 歌词或者歌词文件的 URL
-          theme: '', // 歌曲的主题色，会覆盖播放器的主题色
-        },
+        // api ==>  https://aplayer.netlify.app/docs/guide/options.html#volume
+        audios: [],
         list: [],
         mini: !this.$pc,
         audioPlayerDoc: undefined
@@ -65,31 +58,40 @@ export default {
     },
     mounted() {
       Bus.$on('onAddAudio',(newFile, audioCoverUrl) => {
-        this.show = true
+        if (!this.show) {
+          this.show = true
+        }
         let url = fileConfig.previewUrl(this.$store.state.user.name, newFile, this.$store.getters.token)
         if(!this.$store.state.user.token){
           url = fileConfig.publicPreviewUrl(newFile.id, window.shareId);
         }
         let music = newFile.music
         let fileName = newFile.name.substring(0,newFile.name.length - newFile.suffix.length-1)
-        this.music = {
+        let musicOperation = {
           id: newFile.id,
-          src: url,
-          title: music.songName ? music.songName : fileName,
+          url: url,
+          name: music.songName ? music.songName : fileName,
           artist: music.songName ? music.singer : fileName,
-          pic: music.songName ? audioCoverUrl+newFile.id :'',
-          lrc: '',
-          theme: 'pic'
+          cover: music.songName ? audioCoverUrl+newFile.id :'',
+          type: newFile.contentType
         }
-        let musicIndex = this.list.findIndex(item => item.id === newFile.id)
+        let musicIndex = this.audios.findIndex(item => item.id === newFile.id)
         if(musicIndex < 0){
-          this.list.push(this.music)
-          this.$nextTick(()=>{
-            this.$refs.audioPlayer.play()
-          })
+          if(this.audios.length === 1){
+            let loop = document.querySelector('.aplayer-icon.aplayer-icon-loop');
+            loop.style.display = 'inline'
+            let order = document.querySelector('.aplayer-icon.aplayer-icon-order');
+            order.style.display = 'inline'
+          }
+          this.audios.push(musicOperation)
+          setTimeout(() => {
+            this.list = this.audios
+            setTimeout(() => {
+              this.$refs.audioPlayer.switch(this.audios.length - 1)
+            }, 0)
+          }, 0)
         } else {
-          let listMusic = this.audioPlayerDoc.querySelectorAll('.aplayer-list ol li')[musicIndex]
-          listMusic.click()
+          this.$refs.audioPlayer.switch(musicIndex)
         }
       })
     },
@@ -98,7 +100,7 @@ export default {
         this.show = false
         this.audioPlayerDoc = undefined
         this.$refs.audioPlayer.pause()
-        this.list.splice(0, this.list.length)
+        this.audios.splice(0, this.audios.length)
       },
       touchend() {
         const that = this
diff --git a/src/main.js b/src/main.js
index 6a79e43..bc57103 100644
--- a/src/main.js
+++ b/src/main.js
@@ -37,10 +37,11 @@ Vue.use(EVueContextmenu)
 
 Vue.use(vant.ImagePreview)
 
-Vue.component('Aplayer', VueAPlayer)
-VueAPlayer.disableVersionBadge = true
-
-Vue.config.productionTip = false
+import APlayer from '@moefe/vue-aplayer';
+Vue.use(APlayer, {
+  defaultCover: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60',
+  productionTip: false, // 是否在控制台输出版本信息
+});
 
 new Vue({
   el: '#app',