在歌单详情界面新增播放当前歌单按钮、收藏歌单按钮

publish/changeLog.md

@@ -1,3 +1,6 @@
+### 新增
+
+- 在歌单详情界面新增播放当前歌单按钮、收藏歌单按钮
 
 ### 修复
 

src/renderer/components/core/Player.vue

@@ -706,7 +706,7 @@ export default {
       this.setProgressWidth()
     },
     handleToMusicLocation() {
-      if (this.listId == 'download') return
+      if (!this.listId || this.listId == 'download') return
       if (this.playIndex == -1) return
       this.$router.push({
         path: 'list',

src/renderer/components/material/listAddModal.vue

@@ -91,7 +91,7 @@ export default {
       this.newListName = event.target.value = ''
       this.isEditing = false
       if (!name) return
-      this.createUserList(name)
+      this.createUserList({ name })
     },
   },
 }

src/renderer/components/material/listAddMultipleModal.vue

@@ -92,7 +92,7 @@ export default {
       this.newListName = event.target.value = ''
       this.isEditing = false
       if (!name) return
-      this.createUserList(name)
+      this.createUserList({ name })
     },
   },
 }

src/renderer/lang/en-us/view/song_list.json

@@ -6,5 +6,7 @@
   "input_text": "Enter songlist link or songlist ID",
   "tip_1": "Cross-source playlists are not supported, please confirm whether the playlist to be opened corresponds to the current playlist source",
   "tip_2": "If you encounter a link to a playlist that cannot be opened, welcome feedback",
-  "tip_3": "Kugou source does not support opening with playlist ID, but supports Kugou code opening"
+  "tip_3": "Kugou source does not support opening with playlist ID, but supports Kugou code opening",
+  "play_all": "Play",
+  "add_all": "Collect"
 }

src/renderer/lang/zh-cn/view/song_list.json

@@ -6,5 +6,7 @@
   "input_text": "输入歌单链接或歌单ID",
   "tip_1": "不支持跨源打开歌单，请确认要打开的歌单与当前歌单源是否对应",
   "tip_2": "若遇到无法打开的歌单链接，欢迎反馈",
-  "tip_3": "酷狗源不支持用歌单ID打开，但支持酷狗码打开"
+  "tip_3": "酷狗源不支持用歌单ID打开，但支持酷狗码打开",
+  "play_all": "播放",
+  "add_all": "收藏"
 }

src/renderer/lang/zh-tw/view/song_list.json

@@ -6,5 +6,7 @@
   "input_text": "輸入歌單鏈接或歌單ID",
   "tip_1": "不支持跨源打開歌單，請確認要打開的歌單與當前歌單源是否對應",
   "tip_2": "若遇到無法打開的歌單鏈接，歡迎反饋",
-  "tip_3": "酷狗源不支持用歌單ID打開，但支持酷狗碼打開"
+  "tip_3": "酷狗源不支持用歌單ID打開，但支持酷狗碼打開",
+  "play_all": "播放",
+  "add_all": "收藏"
 }

src/renderer/store/modules/list.js

@@ -28,6 +28,12 @@ const state = {
     list: [],
     location: 0,
   },
+  tempList: {
+    id: 'temp',
+    name: '临时列表',
+    list: [],
+    location: 0,
+  },
   userList: [],
 }
 
@@ -140,15 +146,19 @@ const mutations = {
     if (!targetList) return
     Object.assign(targetList.list[index], data)
   },
-  createUserList(state, name) {
-    let newList = {
-      name,
-      id: `userlist_${Date.now()}`,
-      list: [],
-      location: 0,
+  createUserList(state, { name, id = `userlist_${Date.now()}`, list = [] }) {
+    let newList = state.userList.find(item => item.id === id)
+    if (!newList) {
+      newList = {
+        name,
+        id,
+        list: [],
+        location: 0,
+      }
+      state.userList.push(newList)
+      allListUpdate(newList)
     }
-    state.userList.push(newList)
-    allListUpdate(newList)
+    this.commit('list/listAddMultiple', { id, list })
   },
   removeUserList(state, index) {
     let list = state.userList.splice(index, 1)[0]

src/renderer/store/modules/songList.js

@@ -79,37 +79,29 @@ const actions = {
       cache.has(key)
         ? Promise.resolve(cache.get(key))
         : music[source].songList.getListDetail(id, page)
-    ).then(result => commit('setListDetail', { result, key, page }))
+    ).then(result => commit('setListDetail', { result, key, source, id, page }))
   },
-/*   getListDetailAll({ state, rootState }, id) {
+  getListDetailAll({ state, rootState }, id) {
     let source = rootState.setting.songList.source
-    let key = `sdetail__${source}__${id}__all`
-    if (cache.has(key)) return Promise.resolve(cache.get(key))
-    music[source].songList.getListDetail(id, 1).then(result => {
-      let data = { list: result.list, id }
-      if (result.total <= result.limit) {
-        data = { list: result.list, id }
-        cache.set(key, data)
-        return data
-      }
+    const loadData = (id, page) => {
+      let key = `sdetail__${source}__${id}__${page}`
+      return cache.has(key) ? Promise.resolve(cache.get(key)) : music[source].songList.getListDetail(id, page).then(result => {
+        cache.set(key, result)
+        return result
+      })
+    }
+    return loadData(id, 1).then(result => {
+      if (result.total <= result.limit) return result.list
 
       let maxPage = Math.ceil(result.total / result.limit)
       const loadDetail = (loadPage = 1) => {
-        let task = []
-        let loadNum = 0
-        while (loadPage <= maxPage && loadNum < 3) {
-          task.push(music[source].songList.getListDetail(id, ++loadPage))
-          loadNum++
-        }
         return loadPage == maxPage
-          ? Promise.all(task)
-          : Promise.all(task).then(result => loadDetail(loadPage).then(result2 => [...result, ...result2]))
+          ? loadData(id, ++loadPage).then(result => result.list)
+          : loadData(id, ++loadPage).then(result1 => loadDetail(loadPage).then(result2 => [...result1.list, ...result2]))
       }
-      return loadDetail().then(result2 => {
-        console.log(result2)
-      })
+      return loadDetail().then(result2 => [...result.list, ...result2])
     })
-  }, */
+  },
 }
 
 // mitations
@@ -129,8 +121,10 @@ const mutations = {
     state.list.key = key
     cache.set(key, result)
   },
-  setListDetail(state, { result, key, page }) {
+  setListDetail(state, { result, key, source, id, page }) {
     state.listDetail.list = result.list
+    state.listDetail.id = id
+    state.listDetail.source = source
     state.listDetail.total = result.total
     state.listDetail.limit = result.limit
     state.listDetail.page = page
@@ -153,6 +147,8 @@ const mutations = {
   },
   clearListDetail(state) {
     state.listDetail = {
+      id: null,
+      source: null,
       list: [],
       desc: null,
       total: 0,

src/renderer/views/List.vue

@@ -643,7 +643,7 @@ export default {
         this.listsData.isShowNewList = false
       })
 
-      this.createUserList(name)
+      this.createUserList({ name })
     },
     handleShowNewList() {
       this.listsData.isShowNewList = true

src/renderer/views/SongList.vue

@@ -10,11 +10,9 @@
             h3(:title="listDetail.info.name || selectListInfo.name") {{listDetail.info.name || selectListInfo.name}}
             p(:title="listDetail.info.desc || selectListInfo.desc") {{listDetail.info.desc || selectListInfo.desc}}
           div(:class="$style.songListHeaderRight")
-            //- material-btn(:class="$style.closeDetailButton" :disabled="detailLoading" @click="addSongListDetail") 添加
-            //- |  
-            //- material-btn(:class="$style.closeDetailButton" :disabled="detailLoading" @click="playSongListDetail") 播放
-            //- |  
-            material-btn(:class="$style.closeDetailButton" @click="hideListDetail") {{$t('view.song_list.back')}}
+            material-btn(:class="$style.headerRightBtn" :disabled="detailLoading" @click="playSongListDetail") {{$t('view.song_list.play_all')}}
+            material-btn(:class="$style.headerRightBtn" :disabled="detailLoading" @click="addSongListDetail") {{$t('view.song_list.add_all')}}
+            material-btn(:class="$style.headerRightBtn" @click="hideListDetail") {{$t('view.song_list.back')}}
         material-song-list(v-model="selectedData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit"
          :total="listDetail.total" :noItem="isGetDetailFailed ? $t('view.song_list.loding_list_fail') : $t('view.song_list.loding_list')" :list="listDetail.list")
     transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
@@ -84,7 +82,7 @@ export default {
       listWidth: 645,
       isGetDetailFailed: false,
       isInitedTagListWidth: false,
-      // detailLoading: true,
+      detailLoading: false,
     }
   },
   computed: {
@@ -179,11 +177,13 @@ export default {
   },
   methods: {
     ...mapMutations(['setSongList']),
-    ...mapActions('songList', ['getTags', 'getList', 'getListDetail']),
+    ...mapActions('songList', ['getTags', 'getList', 'getListDetail', 'getListDetailAll']),
     ...mapMutations('songList', ['setVisibleListDetail', 'setSelectListInfo']),
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
-    ...mapMutations('list', ['listAdd', 'listAddMultiple']),
-    ...mapMutations('player', ['setList']),
+    ...mapMutations('list', ['listAdd', 'listAddMultiple', 'createUserList']),
+    ...mapMutations('player', {
+      setPlayList: 'setList',
+    }),
     listenEvent() {
       window.eventHub.$on('key_backspace_down', this.handle_key_backspace_down)
     },
@@ -273,7 +273,7 @@ export default {
         s => s.songmid === targetSong.songmid,
       )
       if (targetIndex > -1) {
-        this.setList({
+        this.setPlayList({
           list: this.defaultList,
           index: targetIndex,
         })
@@ -402,15 +402,28 @@ export default {
     assertApiSupport(source) {
       return assertApiSupport(source)
     },
-    /*     addSongListDetail() {
-      // this.detailLoading = true
-      // this.getListDetailAll(this.selectListInfo.id).then(() => {
-      //   this.detailLoading = false
-      // })
+    async fetchList() {
+      this.detailLoading = true
+      const list = await this.getListDetailAll(this.selectListInfo.id)
+      this.detailLoading = false
+      return list
+    },
+    async addSongListDetail() {
+      if (!this.listDetail.info.name) return
+      const list = await this.fetchList()
+      this.createUserList({ name: this.listDetail.info.name, id: `${this.listDetail.source}__${this.listDetail.id}`, list })
+    },
+    async playSongListDetail() {
+      if (!this.listDetail.info.name) return
+      const list = await this.fetchList()
+      this.setPlayList({
+        list: {
+          list,
+          id: null,
+        },
+        index: 0,
+      })
     },
-    playSongListDetail() {
-
-    }, */
   },
 }
 </script>
@@ -517,6 +530,17 @@ export default {
   align-items: center;
   padding-right: 15px;
 }
+.header-right-btn {
+  border-radius: 0;
+  &:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  &:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+}
 
 .song-list-detail-content {
   position: absolute;