优化歌单、排行榜一键播放按钮的播放机制

publish/changeLog.md

@@ -12,6 +12,7 @@
 - 优化列表性能，软件整体性能
 - 调整Mac平台下的图标大小
 - 同步功能添加对列表顺序调整的控制，确保手动调整位置后的列表与不同的电脑同步时，列表位置不会被还原
+- 优化歌单详情、排行榜名右键的播放按钮的播放机制，现在不用等待整个列表（多页时）加载完成才能播放了
 
 ### 修复
 

src/renderer/core/share/list.js

@@ -49,6 +49,7 @@ export const loveList = reactive({
 export const tempList = reactive({
   id: 'temp',
   name: '临时列表',
+  meta: {},
 })
 
 export const userLists = window.userLists = reactive([])
@@ -88,13 +89,16 @@ export const updateList = ({
   list,
   source,
   sourceListId,
+  meta,
   locationUpdateTime,
 }) => {
   let targetList
   switch (id) {
     case defaultList.id:
     case loveList.id:
+      break
     case tempList.id:
+      tempList.meta = meta || {}
       break
     default:
       targetList = userLists.find(l => l.id == id)

src/renderer/core/useApp/useHandleEnvParams.js

@@ -39,14 +39,17 @@ const useInitEnvParamPlay = () => {
   const playSongListDetail = async(source, link, playIndex) => {
     if (link == null) return
     let list
+    let id
     try {
-      list = await getListDetailAll({ source, id: decodeURIComponent(link) })
+      id = decodeURIComponent(link)
+      list = await getListDetailAll({ source, id })
     } catch (err) {
       console.log(err)
     }
     setTempList({
       list,
       index: getListPlayIndex(list, playIndex),
+      id: `${source}__${id}`,
     })
   }
 

src/renderer/store/modules/player.js

@@ -388,14 +388,18 @@ const mutations = {
     if (tempPlayList.length) this.commit('player/clearTempPlayeList')
     playMusic()
   },
-  setTempList(state, { list, index }) {
+  setTempList(state, { list, id, index }) {
-    updateList({ id: tempList.id, list })
+    updateList({ id: tempList.id, meta: { id }, list })
     this.commit('player/setList', {
       listId: tempList.id,
       index,
     })
     window.eventHub.emit(eventListNames.listChange, [tempList.id])
   },
+  updateTempList(state, { id, list }) {
+    updateList({ id: tempList.id, meta: { id }, list })
+    window.eventHub.emit(eventListNames.listChange, [tempList.id])
+  },
   // setPlayIndex(state, index) {
   //   state.playIndex = index
   // },

src/renderer/views/Leaderboard.vue

@@ -36,6 +36,7 @@
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
 import { nextTick } from '@renderer/utils/vueTools'
+import { tempList } from '@renderer/core/share/list'
 export default {
   name: 'Leaderboard',
   data() {
@@ -134,7 +135,7 @@ export default {
     ...mapMutations(['setLeaderboard']),
     ...mapActions('leaderboard', ['getBoardsList', 'getList', 'getListAll']),
     ...mapMutations('list', ['createUserList']),
-    ...mapMutations('player', ['setTempList']),
+    ...mapMutations('player', ['setTempList', 'updateTempList']),
     handleGetList(page) {
       const loadId = `${this.source}${this.tabId}${page}`
       this.loadError = false
@@ -187,27 +188,65 @@ export default {
 
       if (action) {
         const board = this.boardList[index]
-        const list = await this.getListAll(board.id)
+        const id = `board__${this.source}__${board.id}`
-        if (!list.length) return
         switch (action && action.action) {
           case 'play':
-            this.setTempList({
+            this.playSongListDetail({
-              list,
+              boardId: board.id,
-              index: 0,
+              list: [...this.list],
+              id,
             })
             break
           case 'collect':
-            this.createUserList({
+            this.addSongListDetail({
-              name: board.name,
+              boardId: board.id,
-              id: `board__${this.source}__${board.id}`,
+              boardName: board.name,
-              list,
               source: this.source,
-              sourceListId: `board__${board.id}`,
+              id,
             })
             break
         }
       }
     },
+    async addSongListDetail({ boardId, boardName, source, id }) {
+      // console.log(this.listDetail.info)
+      // if (!this.listDetail.info.name) return
+      const list = await this.getListAll(boardId)
+      this.createUserList({
+        name: boardName,
+        id,
+        list,
+        source,
+        sourceListId: `board__${boardId}`,
+      })
+    },
+    async playSongListDetail({ boardId, id, list }) {
+      let isPlayingList = false
+      if (list?.length) {
+        this.setTempList({
+          list,
+          index: 0,
+          id,
+        })
+        isPlayingList = true
+      }
+      const fullList = await this.getListAll(boardId)
+      if (!fullList.length) return
+      if (isPlayingList) {
+        if (tempList.meta.id == id) {
+          this.updateTempList({
+            list: fullList,
+            id,
+          })
+        }
+      } else {
+        this.setTempList({
+          list: fullList,
+          index: 0,
+          id,
+        })
+      }
+    },
   },
 }
 </script>

src/renderer/views/songList/SongList.vue

@@ -58,6 +58,7 @@ div(:class="$style.container")
 import { mapGetters, mapMutations, mapActions } from 'vuex'
 import { scrollTo } from '@renderer/utils'
 import TagList from './components/TagList'
+import { tempList } from '@renderer/core/share/list'
 export default {
   name: 'SongList',
   components: {
@@ -181,6 +182,7 @@ export default {
     ...mapMutations('list', ['listAdd', 'listAddMultiple', 'createUserList']),
     ...mapMutations('player', {
       setTempList: 'setTempList',
+      updateTempList: 'updateTempList',
       setTempPlayList: 'setTempPlayList',
     }),
     listenEvent() {
@@ -295,12 +297,32 @@ export default {
     },
     async playSongListDetail() {
       if (!this.listDetail.info.name) return
+      const id = `${this.listDetail.source}__${this.listDetail.id}`
+      let isPlayingList = false
+      if (this.listDetail.list?.length) {
+        this.setTempList({
+          list: [...this.listDetail.list],
+          index: 0,
+          id,
+        })
+        isPlayingList = true
+      }
       const list = await this.fetchList()
       if (!list.length) return
-      this.setTempList({
+      if (isPlayingList) {
-        list,
+        if (tempList.meta.id == id) {
-        index: 0,
+          this.updateTempList({
-      })
+            list,
+            id,
+          })
+        }
+      } else {
+        this.setTempList({
+          list,
+          index: 0,
+          id,
+        })
+      }
     },
   },
 }