f:完成简版歌词

sunzongzheng · Nov 6, 2017 · de44a50 · de44a50
1 parent 5346849
commit de44a50
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 22 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,6 +21,7 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 0,
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'indent': 0
   }
 }
diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
     "element-ui": "^2.0.0",
     "fs": "0.0.1-security",
     "install": "^0.10.1",
+    "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "music-api": "git+https://github.com/sunzongzheng/musicAPI.git",

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -20,8 +20,17 @@
       },
       // 获取歌曲回调
       getSong (event, arg) {
+        let lyric = arg.lyric || []
+        lyric = lyric.map(item => {
+          let arr = item[0].match(/^(\d+):(\d+).(\d+)$/)
+          if (arr) {
+            item[0] = parseInt(arr[1]) * 60 * 1000 + parseInt(arr[2]) * 1000 + parseInt(arr[3].padEnd(3, '0'))
+          }
+          return item
+        })
         this.$store.commit('api/updatePlay', {
           url: arg.url,
+          lyric,
           pause: false
         })
       },

diff --git a/src/renderer/assets/iconfont.js b/src/renderer/assets/iconfont.js
diff --git a/src/renderer/store/modules/api.js b/src/renderer/store/modules/api.js
@@ -9,8 +9,10 @@ export default {
     },
     play: {
       url: null,
+      lyric: [],
       pause: true,
       volume: 100,
+      time: 0,
       info: null
     }
   },

diff --git a/src/renderer/view/home/components/lyrics/index.vue b/src/renderer/view/home/components/lyrics/index.vue
@@ -1,15 +1,25 @@
 <template>
-    <div :class="{[s.app]:true,[s.active]:show}" @click="close">
+    <div :class="{[s.app]:true,[s.active]:show}">
         <div :class="s.wrap"></div>
-        <div :class="s.main" :style="style">
-
-        </div>
+        <div :class="s.cover" :style="style"></div>
+        <ul :class="s.main" ref="main" @wheel="scrollBarWheel">
+            <li v-for="(item,index) in play.lyric" :class="{[s.item]:true,[s.active]:activeIndex === index}">
+                {{item[1]}}
+            </li>
+        </ul>
     </div>
 </template>
 <script>
   import { mapState } from 'vuex'
+  //  import $ from 'jquery'
 
   export default {
+    data () {
+      return {
+        userScrolling: false,
+        timer: null
+      }
+    },
     computed: {
       ...mapState('lyrics', ['show']),
       ...mapState('api', ['play']),
@@ -21,13 +31,64 @@
         } else {
           return {}
         }
+      },
+      activeIndex () {
+        const cur = this.play.time
+        const lyric = this.play.lyric
+        let answer = 0
+        lyric.every((item, index) => {
+          if (index < lyric.length - 1) { // 非最后一行
+            if (cur >= lyric[index][0] && cur < lyric[index + 1][0]) {
+              if (lyric[index][1].length) {
+                answer = index
+              } else {
+                if (index === 0) {
+                  answer = index
+                } else {
+                  answer = index - 1
+                }
+              }
+              return false
+            }
+          } else if (cur >= lyric[index][0]) { // 最后一行 & 播放进度大于最后一行的时间
+            answer = index
+            return false
+          }
+          return true
+        })
+        // 跳转
+        const main = this.$refs.main
+        if (main && main.children[answer]) {
+//          $(main).animate({
+//            scrollTop: main.children[answer].offsetTop - main.offsetHeight / 2
+//          }, 500)
+          if (!this.userScrolling) {
+            main.scrollTop = main.children[answer].offsetTop - main.offsetHeight / 2
+          }
+        }
+
+        return answer
+      }
+    },
+    watch: {
+      'play.info' () {
+        this.$refs.main.scrollTop = 0
       }
     },
     methods: {
       close () {
         this.$store.commit('lyrics/update', {
           show: false
         })
+      },
+      scrollBarWheel () {
+        this.userScrolling = true
+        if (this.timer) {
+          window.clearTimeout(this.timer)
+        }
+        this.timer = window.setTimeout(() => {
+          this.userScrolling = false
+        }, 2000)
       }
     }
   }
@@ -47,6 +108,7 @@
             bottom: 0;
         }
         .wrap,
+        .cover,
         .main {
             position: absolute;
             left: 0;
@@ -56,14 +118,31 @@
         }
         .wrap {
             z-index: 4;
-            background-color: white;
+            background-color: black;
         }
-        .main {
+        .cover {
             z-index: 5;
             background-repeat: no-repeat;
             background-position: center;
             background-size: cover;
             filter: blur(35px);
+            opacity: .3;
+        }
+        .main {
+            z-index: 6;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.9);
+            overflow: auto;
+            height: calc(100% - 60px);
+            .item {
+                padding: 8px 0;
+                &.active {
+                    color: #26B36C;
+                }
+            }
+            &::-webkit-scrollbar {
+                display: none;
+            }
         }
     }
 </style>
diff --git a/src/renderer/view/home/components/player/components/current_playlist/index.vue b/src/renderer/view/home/components/player/components/current_playlist/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="{[s.app]:true,[s.active]:show}">
+    <div :class="{[s.app]:true,[s.active]:show,[s.lyricShow]:lyricShow}">
         <div :class="{[s.item]:true,[s.active]:play.info.id===item.id}" v-for="item in playlist" @click="doPlay(item)">
             <div :class="s.album_wrap">
                 <img :class="s.album" :src="item.album.coverSmall"/>
@@ -23,7 +23,10 @@
     },
     computed: {
       ...mapState('c_playlist', ['playlist']),
-      ...mapState('api', ['play'])
+      ...mapState('api', ['play']),
+      ...mapState('lyrics', {
+        lyricShow: 'show'
+      })
     },
     methods: {
       ...mapActions('api', {
@@ -45,6 +48,9 @@
         box-shadow: -3px 0 14px #ececec;
         overflow-y: auto;
         overflow-x: hidden;
+        &.lyricShow {
+            box-shadow: none;
+        }
         &.active {
             right: 0;
             transition: all .5s;

diff --git a/src/renderer/view/home/components/player/components/playControl/index.js b/src/renderer/view/home/components/player/components/playControl/index.js
@@ -8,7 +8,8 @@ export default {
   },
   computed: {
     ...mapState('api', ['play']),
-    ...mapState('c_playlist', ['cycle'])
+    ...mapState('c_playlist', ['cycle']),
+    ...mapState('lyrics', ['show'])
   },
   watch: {
     volume (val) {
@@ -25,4 +26,4 @@ export default {
       }
     }
   }
-}
+}
diff --git a/src/renderer/view/home/components/player/components/playControl/index.vue b/src/renderer/view/home/components/player/components/playControl/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="s.control">
+    <div :class="{[s.control]:true,[s.lyric]:show}">
         <!-- 播放控制 !-->
         <div :class="s.playControl">
             <!-- 上一曲 !-->
@@ -28,8 +28,11 @@
         padding: 0 10px;
         justify-content: space-around;
         background-color: #EBEAEB;
-        opacity: .6;
         user-select: none;
+        &.lyric {
+            background: transparent;
+            color: white;
+        }
         & > span {
             display: none;
         }

diff --git a/src/renderer/view/home/components/player/components/playInfo/index.js b/src/renderer/view/home/components/player/components/playInfo/index.js
@@ -26,18 +26,21 @@ export default {
       this.$nextTick(() => {
         const audio = this.$refs.audio
         if (val) {
-          this.$refs.audio.pause()
+          audio.pause()
         } else {
           audio.play()
           this.timer = window.setInterval(() => {
             this.duration = {
               cur: audio.currentTime,
               total: audio.duration
             }
-            if (this.$refs.audio.ended) {
+            if (audio.ended) {
               this.$store.dispatch('c_playlist/next')
             }
-          }, 1000)
+            this.$store.commit('api/updatePlay', {
+              time: Math.floor(audio.currentTime * 1000)
+            })
+          }, 500)
         }
       })
     },
@@ -82,9 +85,9 @@ export default {
       }
     },
     toggleLyrics () {
-      // this.$store.commit('lyrics/update', {
-      //   show: !this.show
-      // })
+      this.$store.commit('lyrics/update', {
+        show: !this.show
+      })
     }
   }
 }
diff --git a/src/renderer/view/home/components/player/components/playInfo/index.vue b/src/renderer/view/home/components/player/components/playInfo/index.vue
@@ -1,7 +1,12 @@
 <template>
-    <div :class="s.info">
+    <div :class="{[s.info]:true,[s.lyric]:show}">
         <!-- 专辑头像 !-->
-        <img :src="play.info | defaultAlbum" :class="s.album" @click="toggleLyrics"/>
+        <div :class="{[s.album]:true,[s.playing]:play.info}">
+            <img :src="play.info | defaultAlbum"/>
+            <div :class="s.cover" @click="toggleLyrics">
+                <Icon type="shuangjiantou"></Icon>
+            </div>
+        </div>
         <!-- 歌曲信息 !-->
         <div :class="s.inner">
             <div :class="s.song">
@@ -44,8 +49,46 @@
         border-top: 1px solid #EBEBEB;
         padding: 0 12px;
         user-select: none;
+        &.lyric {
+            background: transparent;
+            border: none;
+            .inner,
+            .inner > .song > .name,
+            .icon {
+                color: white;
+            }
+            .cover {
+                transform: rotate(180deg);
+            }
+        }
         .album {
             width: 35px;
+            position: relative;
+            img {
+                width: 35px;
+            }
+            .cover {
+                display: none;
+            }
+            &.playing {
+                &:hover {
+                    .cover {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        width: 100%;
+                        height: 35px;
+                        background-color: #4e4e4e;
+                        opacity: .5;
+                        color: white;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 16px;
+                        cursor: pointer;
+                    }
+                }
+            }
         }
         .inner {
             display: flex;