更新 歌曲换源 机制

publish/changeLog.md

@@ -21,6 +21,10 @@
 - 优化「自定义源管理」对话框在小窗口下的布局（#2247, @3gf8jv4dv）
 - 优化软件文案编排（#2259, #2266, #2269, #2296, @3gf8jv4dv）
 
+### 变更
+
+- 我的列表-歌曲菜单中的 歌曲换源 功能从之前的类似软连接的形式改成替换歌曲的形式，也就是说，现在该功能相当于快速在线搜索歌曲，确认换源后将自动将原来的歌曲删除再将选择的歌曲插入被删除歌曲的位置。
+
 ### 其他
 
 - 更新项目文档（@3gf8jv4dv）

src/lang/en-us.json

@@ -195,6 +195,8 @@
   "music_sort__title_multiple": "Adjust the position of the selected {num} songs to: ",
   "music_time": "Length",
   "music_toggle_clean": "Cancel Change",
+  "music_toggle_confirm": "Confirm",
+  "music_toggle_duplicate_tip": "The same song already exists in the list, should I remove it and continue?",
   "my_list": "Your Library",
   "no_item": "Nothing's here...",
   "not_agree": "Decline",

src/lang/zh-cn.json

@@ -195,6 +195,8 @@
   "music_sort__title_multiple": "将已选的 {num} 首歌曲的位置调整到：",
   "music_time": "时长",
   "music_toggle_clean": "取消换源",
+  "music_toggle_confirm": "确认",
+  "music_toggle_duplicate_tip": "列表中已存在相同的歌曲，是否将其移除并继续？",
   "my_list": "我的列表",
   "no_item": "列表竟然是空的...",
   "not_agree": "不接受",

src/lang/zh-tw.json

@@ -195,6 +195,8 @@
   "music_sort__title_multiple": "將已選取的 {num} 首歌曲的位置調整到：",
   "music_time": "長度",
   "music_toggle_clean": "取消變更",
+  "music_toggle_confirm": "確認",
+  "music_toggle_duplicate_tip": "列表中已存在相同的歌曲，是否將其移除並繼續？",
   "my_list": "我的清單",
   "no_item": "清單竟然是空的...",
   "not_agree": "不接受",

src/renderer/core/player/action.ts

@@ -232,6 +232,23 @@ const handlePlay = () => {
   })
 }
 
+/**
+ * 播放列表内歌曲
+ * @param listId 列表id
+ * @param id 歌曲id
+ */
+export const playListById = (listId: string, id: string) => {
+  const prevListId = playInfo.playerListId
+  setPlayListId(listId)
+  // pause()
+  const musicInfo = getList(listId).find(m => m.id == id)
+  if (!musicInfo) return
+  setPlayMusicInfo(listId, musicInfo)
+  if (appSetting['player.isAutoCleanPlayedList'] || prevListId != listId) clearPlayedList()
+  clearTempPlayeList()
+  handlePlay()
+}
+
 /**
  * 播放列表内歌曲
  * @param listId 列表id

src/renderer/views/List/MusicList/components/MusicToggleModal.vue

@@ -18,7 +18,7 @@
               <button type="button" :class="$style.btn" @click="openDetail(item)">
                 <svg-icon name="share" />
               </button>
-              <button type="button" :class="$style.btn" @click="handleToggle(item)">
+              <button type="button" :class="$style.btn" @click="handlePlay(item)">
                 <svg v-once version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 287.386 287.386" space="preserve">
                   <use xlink:href="#icon-testPlay" />
                 </svg>
@@ -56,15 +56,19 @@
             </h2>
           </template>
         </div>
-        <base-btn :disabled="!toggleMusicInfo" :class="$style.btn" @click="handleClean">{{ $t('music_toggle_clean') }}</base-btn>
+        <base-btn :disabled="!toggleMusicInfo || musicInfo.id == toggleMusicInfo.id" :class="$style.btn" @click="handleConfirm">{{ $t('music_toggle_confirm') }}</base-btn>
       </div>
     </main>
   </material-modal>
 </template>
 
 <script>
+import { LIST_IDS } from '@common/constants'
 import { openUrl } from '@common/utils/electron'
+import { playNext } from '@renderer/core/player'
 import { getSourceI18nPrefix } from '@renderer/store'
+import { addTempPlayList } from '@renderer/store/player/action'
+import { playMusicInfo } from '@renderer/store/player/state'
 import { toNewMusicInfo, toOldMusicInfo } from '@renderer/utils'
 import musicSdk from '@renderer/utils/musicSdk'
 import { markRaw } from 'vue'
@@ -106,8 +110,8 @@ export default {
     show(n) {
       if (n) {
         this.isError = false
+        this.toggleMusicInfo = null
         const musicInfo = this.musicInfo
-        this.toggleMusicInfo = musicInfo.meta.toggleMusicInfo
         this.tabs = []
         this.lists = {}
         this.loading = true
@@ -143,17 +147,19 @@ export default {
     handleClose() {
       this.$emit('update:show', false)
     },
-    handleClean() {
-      this.handleToggle(null)
+    handleConfirm() {
+      this.$emit('toggle', this.toggleMusicInfo)
     },
     openDetail(minfo) {
       const url = musicSdk[minfo.source]?.getMusicDetailPageUrl(toOldMusicInfo(minfo))
       if (!url) return
       void openUrl(url)
     },
-    handleToggle(info) {
-      this.toggleMusicInfo = info
-      this.$emit('toggle', info)
+    handlePlay(musicInfo) {
+      this.toggleMusicInfo = musicInfo
+      const isPlaying = !!playMusicInfo.musicInfo
+      addTempPlayList([{ listId: LIST_IDS.PLAY_LATER, musicInfo, isTop: true }])
+      if (isPlaying) void playNext()
     },
   },
 }

src/renderer/views/List/MusicList/useMusicToggle.js

@@ -1,13 +1,16 @@
 // import { updateListMusicsPosition } from '@renderer/store/list/action'
 import { ref, nextTick } from '@common/utils/vueTools'
-import { updateListMusics } from '@renderer/store/list/listManage'
-import { playList } from '@renderer/core/player'
-import { getListMusicsFromCache } from '@renderer/store/list/action'
+import { removeListMusics } from '@renderer/store/list/listManage'
+import { playListById } from '@renderer/core/player'
+import { addListMusics, updateListMusicsPosition } from '@renderer/store/list/action'
 import { playMusicInfo } from '@renderer/store/player/state'
+import { dialog } from '@renderer/plugins/Dialog'
+import { useI18n } from '@renderer/plugins/i18n'
 
 export default (props, list) => {
   const isShowMusicToggleModal = ref(false)
   const musicInfo = ref(null)
+  const t = useI18n()
 
   const handleShowMusicToggleModal = (index) => {
     musicInfo.value = list.value[index]
@@ -16,30 +19,32 @@ export default (props, list) => {
     })
   }
 
-  const toggleSource = (toggleMusicInfo) => {
-    const id = musicInfo.value.id
-    const index = list.value.findIndex(m => m.id == id)
-    if (index < 0) {
+  const toggleSource = async(toggleMusicInfo) => {
+    const oldId = musicInfo.value.id
+    let oldIdx = list.value.findIndex(m => m.id == oldId)
+    if (oldIdx < 0) {
       isShowMusicToggleModal.value = false
+      await addListMusics(props.listId, [toggleMusicInfo])
       return
     }
-    musicInfo.value.meta.toggleMusicInfo = toggleMusicInfo
-    updateListMusics([
-      {
-        id: props.listId,
-        musicInfo: {
-          ...musicInfo.value,
-          meta: {
-            ...musicInfo.value.meta,
-            toggleMusicInfo,
-          },
-        },
-      },
-    ])
-    const rawInfo = getListMusicsFromCache(props.listId)[index]
-    rawInfo.meta.toggleMusicInfo = toggleMusicInfo
-    if (toggleMusicInfo || (playMusicInfo.listId == props.listId && playMusicInfo.musicInfo?.id == rawInfo.id)) {
-      playList(props.listId, index)
+    const id = toggleMusicInfo.id
+    const index = list.value.findIndex(m => m.id == id)
+    const removeIds = [oldId]
+    if (index > -1) {
+      if (!await dialog.confirm({
+        message: t('music_toggle_duplicate_tip'),
+        cancelButtonText: t('cancel_button_text'),
+        confirmButtonText: t('confirm_button_text'),
+      })) return
+      removeIds.push(id)
+    }
+    isShowMusicToggleModal.value = false
+    await removeListMusics({ listId: props.listId, ids: removeIds })
+    await addListMusics(props.listId, [toggleMusicInfo], 'bottom')
+    if (index != -1 && index < oldIdx) oldIdx--
+    await updateListMusicsPosition({ listId: props.listId, ids: [id], position: oldIdx })
+    if (playMusicInfo.listId == props.listId && playMusicInfo.musicInfo?.id == oldId) {
+      playListById(props.listId, toggleMusicInfo.id)
     }
   }