Merge pull request #43 from cuijinyu/master

[Update]:修复了歌词不能正确播放的问题

src/renderer/components/common/musicList/musicList.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="music-list" :style="{height:height}">
+    <div class="music-list" :style="{height:height + 'px'}">
         <music-list-item isheader />
         <div class="music-list-items"
-             :style="{height:height}">
+             :style="{height:height - 40 + 'px'}">
             <music-list-item v-for="(item, index) in musicList" 
                 class="music-list__item"
                 :item="item" 

src/renderer/components/common/musicListItem/musicListItem.vue

@@ -49,17 +49,17 @@
       </li>
       <li class="t-song">
         <span>
-          {{item.music_name}}
+          {{item.music_name | noData}}
         </span>
       </li>
       <li>
         <span>
-          {{item.artists}}
+          {{item.artists | noData}}
         </span>
       </li>
       <li>
         <span>
-          {{item.album}}
+          {{item.album | noData}}
         </span>
       </li>
       <li>
@@ -69,7 +69,7 @@
       </li>
       <li>
         <span>
-          {{item.duration}} / {{item.playamount}}
+          {{item.duration | noData}} / {{item.playamount | noData}}
         </span>
       </li>
     </template>
@@ -105,7 +105,7 @@ export default {
     }
   },
   filters:{
-    platform: function(value) {
+    platform (value) {
       const platforms = {
           'Neteasymusic':'网易云音乐',
           'Xiamimusic':'虾米音乐',
@@ -116,6 +116,13 @@ export default {
           "Migumusic":"咪咕音乐"
       };
       return platforms[value];
+    },
+    noData (value) {
+      if (!value) {
+        return "暂无数据"
+      } else {
+        return value;
+      }
     }
   },
   methods:{

src/renderer/components/common/sideBar/children/children/nowPlaying.vue

@@ -48,23 +48,51 @@
             ...mapGetters({
                 currentTime:'getCurrentTime',
                 lyric:'getPlayingMusicLiric',
-                playState:'getPlayState'
+                playState:'getPlayState',
+                playingMusic:'getPlayingMusic'
             })
         },
+        beforeDestroy(){
+            console.log('destory');
+            if (this.currentLyric) {
+                clearInterval(this.currentLyric.timer);
+            }
+        },
+        beforeMount() {
+            let lyric = this.lyric;
+            this.currentLyric = new Lyric(lyric, this.handleLyric);
+        },
         mounted() {
+            console.log(this.currentLyric);
             this.getLyric();
+            console.log(this.currentLyric);
         },
         watch:{
             playState:function (value) {
-                console.log('changed')
+                if (this.currentLyric) {
+                    if (value) {
+                        console.log(`设置时间为 -----> ${parseInt(this.currentTime)}`)
+                        this.currentLyric.play(parseInt(this.currentTime) * 1000);
+                    } else {
+                        this.currentLyric.stop();
+                        clearInterval(this.currentLyric.timer);
+                    }
+                } else 
+                    this.getLyric();
+            },
+            playingMusic:function(value) {
+                console.log("playingmusic changed");
+                if (this.currentLyric){
+                    clearInterval(this.currentLyric.timer);
+                }
                 this.getLyric();
             }
         },
         data() {
             return {
-                currentLyric: null,
                 currentLineNum: 0,
-                playingLyric:""
+                playingLyric:"",
+                currentLyric:null,
             }
         },
         components: {
@@ -90,11 +118,12 @@
                 let lyric = this.lyric;
                 try{
                     this.currentLyric = new Lyric(lyric, this.handleLyric);
+                    this.currentLyric.play(parseInt(this.currentTime) * 1000);
                     if (this.playState) {
-                        this.currentLyric.play();
+                        this.currentLyric.play(parseInt(this.currentTime) * 1000);
                     }   
                 } catch (e) {
-                    this.currentLyric = null;
+                    console.log(e);
                     this.currentLineNum = 0;
                     this.playingLyric = '';
                 }

src/renderer/components/common/sideBar/children/leftPlayer.vue

@@ -58,7 +58,7 @@
                              ref="slide"
                              @change="changeMusic"
                              >
-                    <el-carousel-item v-for="item in musicList" :key="item.music_id">
+                    <el-carousel-item v-for="item in musicList">
                         <img :src="item.image_url" style="width:100%;height: 100%;"/>
                     </el-carousel-item>
                 </el-carousel>
@@ -284,7 +284,7 @@
             },
 
             getAutoplay () {
-                return this.$refs.autoplay;
+                return this.$refs.audio.autoplay;
             },
 
             getPlayingMusic () {
@@ -315,7 +315,7 @@
                 获取当前播放时间，在和歌词进行联动的时候需要
              */
             getCurrentTime () {
-                return this.$refs.currentTime;
+                return this.$refs.audio.currentTime;
             },
 
             /**

src/renderer/pages/album/album.vue

@@ -10,7 +10,7 @@
                      ></Card>
             </div>
             <div class="albumMusicList">
-                <music-list height="400px"
+                <music-list height="400"
                             :musicList="musicList">   
                 </music-list>
             </div>

src/renderer/pages/search/search.vue

@@ -5,7 +5,7 @@
             <div v-if="!innerMusicList.length" class="no-data">
                 暂无数据
             </div>
-            <music-list height="580px" :musicList="innerMusicList" v-else/>
+            <music-list height="580" :musicList="innerMusicList" v-else/>
 
         </div>
     </transition>

src/renderer/store/modules/player.js

@@ -14,6 +14,7 @@ let state = {
     playState:false,
     tempSongWaitingList:[], //  为了避免加载冲突问题
     tempSongList:[], //  要延迟加载的音乐，为了减轻服务器压力
+    currentLyric:"",  //  currentLyric,用来存放歌词播放对象
   };
 
   let mutations = {
@@ -24,8 +25,6 @@ let state = {
       state.progress = progress;
     },
     SET_PLAYINGMUSIC(state, music) {
-      console.log(`SET_MUSIC TO ----->`);
-      console.log(music);
       state.playingMusic = music;
     },
     SET_PLAYINGMUSICINDEX(state, index) {
@@ -42,6 +41,18 @@ let state = {
     },
     SET_TEMPSONGWAITINGLIST(state, tempSongWaitingList) {
       state.tempSongWaitingList = tempSongWaitingList;
+    },
+    SET_CURRENT_LYRIC(state, currentLyric) {
+      state.currentLyric = currentLyric;
+    },
+    SET_CURRENT_LYRIC_LRC(state, lrc) {
+      state.currentLyric.lrc = lrc;
+    },
+    SET_CURRENT_LYRIC_LINES(state, lines) {
+      state.currentLyric.lines = lines;
+    },
+    SET_CURRENT_LYRIC_TIME(state, time) {
+      state.currentLyric.seek(time);
     }
   };
 
@@ -69,6 +80,9 @@ let state = {
     },
     getPlayingMusicLiric: () => {
       return state.playingMusic.lyric;
+    },
+    getCurrentLyric: () => {
+      return state.currentLyric;
     }
   };
 
@@ -109,6 +123,25 @@ let state = {
       }
       commit('SET_MUSICLIST', state.tempSongList);
       commit('SET_PLAYINGMUSICINDEX', playIndex);
+    },
+    setNewLyric ({state, commit}) {
+      // setTimeout(() => {
+      //   console.log(parseInt(state.currentTime));
+      //   if (state.playState) {
+      //     console.log('change time');
+      //     state.currentLyric.play(parseInt(state.currentTime));
+      //   } else {
+      //     state.currentLyric.stop();
+      //   }
+        commit('SET_CURRENT_LYRIC_TIME', parseInt(state.currentTime));
+      // }, 1000);
+      // setInterval(() => {
+      //   commit('SET_CURRENT_LYRIC_TIME', parseInt(state.currentTime));
+      // }, 10000);
+      commit('SET_CURRENT_LYRIC_LRC', parseInt(state.playingMusic.lyric));
+      commit('SET_CURRENT_LYRIC_LINES', []);
+      state.currentLyric._initLines();
+      state.currentLyric.seek(parseInt(state.currentTime));
     }
   };