新增定位当前播放歌曲

publish/changeLog.md

@@ -1,3 +1,4 @@
 #### 新增
 
 - 新增窗口大小设置，若觉得软件窗口小可以到设置页调大点
+- 新增定位当前播放歌曲，点击播放栏左侧的**歌曲图片**可在播放列表定位当前播放的歌曲（该功能对播放下载列表的歌曲无效）

src/renderer/components/core/Player.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 div(:class="$style.player")
-  div(:class="$style.left")
+  div(:class="$style.left" @click="handleToMusicLocation")
     img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError")
     svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 60 60' space='preserve')
       use(:xlink:href='`#${$style.iconPic}`')
@@ -492,6 +492,17 @@ export default {
     handleResize() {
       this.setProgessWidth()
     },
+    handleToMusicLocation() {
+      if (this.listId == 'download') return
+      if (this.playIndex == -1) return
+      this.$router.push({
+        path: 'list',
+        query: {
+          id: this.listId,
+          scrollIndex: this.playIndex,
+        },
+      })
+    },
   },
 }
 </script>
@@ -520,6 +531,14 @@ export default {
   transition-property: color;
   flex: none;
   padding: 2px;
+  opacity: 1;
+  transition: @transition-theme;
+  transition-property: opacity;
+  cursor: pointer;
+
+  &:hover {
+    opacity: .8;
+  }
 
   svg {
     fill: currentColor;

src/renderer/route/index.js

@@ -4,11 +4,12 @@ import Router from 'vue-router'
 import paths from './paths'
 
 
-function route(path, view, name, meta) {
+function route(path, view, name, meta, props) {
   return {
     name: name || view,
     path,
     meta,
+    props,
     component: (resovle) => import(
       `../views/${view}.vue`
     ).then(resovle),
@@ -19,7 +20,7 @@ Vue.use(Router)
 
 const router = new Router({
   mode: 'hash',
-  routes: paths.map(path => route(path.path, path.view, path.name, path.meta)).concat([
+  routes: paths.map(path => route(path.path, path.view, path.name, path.meta, path.props)).concat([
     { path: '*', redirect: '/search' },
   ]),
   linkActiveClass: 'active-link',

src/renderer/route/paths.js

@@ -26,6 +26,7 @@ export default [
     path: '/list',
     name: 'list',
     view: 'List',
+    // props: true,
   },
   {
     path: '/download',

src/renderer/views/List.vue

@@ -17,7 +17,7 @@
       div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
         table
           tbody
-            tr(v-for='(item, index) in list' :key='item.songmid'
+            tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
               @click="handleDoubleClick(index)" :class="[isPlayList && playIndex === index ? $style.active : '', (isAPITemp && item.source != 'kw') ? $style.disabled : '']")
               td.nobreak.center(style="width: 37px;" @click.stop)
                   material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
@@ -49,7 +49,7 @@
 
 <script>
 import { mapMutations, mapGetters, mapActions } from 'vuex'
-import { throttle, asyncSetArray } from '../utils'
+import { throttle, asyncSetArray, scrollTo } from '../utils'
 export default {
   name: 'List',
   data() {
@@ -69,6 +69,7 @@ export default {
       isShowListAdd: false,
       isShowListAddMultiple: false,
       delayTimeout: null,
+      isToggleList: true,
     }
   },
   computed: {
@@ -125,9 +126,18 @@ export default {
     list() {
       this.resetSelect()
     },
+    '$route.query.scrollIndex'(n) {
+      if (n == null || this.isToggleList) return
+      this.restoreScroll(true)
+      this.isToggleList = true
+    },
   },
   beforeRouteUpdate(to, from, next) {
-    if (to.query.id === undefined) return
+    if (to.query.id == null) return
+    else if (to.query.id == this.listId) {
+      if (to.query.scrollIndex != null) this.isToggleList = false
+      return next()
+    }
     this.delayShow = false
     this.$nextTick(() => {
       this.listId = to.query.id
@@ -195,14 +205,29 @@ export default {
         this.delayTimeout = null
       }
     },
-    restoreScroll() {
+    restoreScroll(isAnimation) {
       if (!this.list.length) return
+      if (this.$route.query.scrollIndex == null) {
         let location = this.setting.list.scroll.locations[this.listId]
         if (this.setting.list.scroll.enable && location) {
           this.$nextTick(() => {
             this.$refs.dom_scrollContent.scrollTo(0, location)
           })
         }
+        return
+      }
+
+      this.$nextTick(() => {
+        let location = this.getMusicLocation(this.$route.query.scrollIndex) - 200
+        if (location < 0) location = 0
+        isAnimation ? scrollTo(this.$refs.dom_scrollContent, location) : this.$refs.dom_scrollContent.scrollTo(0, location)
+        this.$router.replace({
+          path: 'list',
+          query: {
+            id: this.listId,
+          },
+        })
+      })
     },
     handleDoubleClick(index) {
       if (
@@ -292,6 +317,10 @@ export default {
           break
       }
     },
+    getMusicLocation(index) {
+      let dom = document.getElementById('mid_' + this.list[index].songmid)
+      return dom ? dom.offsetTop : 0
+    },
     // handleScroll(e) {
     //   console.log(e.target.scrollTop)
     // },

src/renderer/views/Setting.vue

@@ -46,8 +46,8 @@ div.scroll(:class="$style.setting")
       h3 是否显示歌曲源（仅对我的音乐分类有效）
       div
         material-checkbox(id="setting_list_showSource_enable" v-model="current_setting.list.isShowSource" label="是否显示")
-    dd(title='是否恢复播放列表滚动条位置')
-      h3 恢复列表滚动位置（仅对我的音乐分类有效）
+    dd(title='是否记住播放列表滚动条位置')
+      h3 记住列表滚动位置（仅对我的音乐分类有效）
       div
         material-checkbox(id="setting_list_scroll_enable" v-model="current_setting.list.scroll.enable" label="是否启用")
     //- dd(title='播放列表是否显示专辑栏')