优化随机播放重新混洗交互

Author: sunny1028

build-config/tests/play-mode-random.test.mjs

@@ -0,0 +1,34 @@
+import assert from 'node:assert/strict'
+
+import { resolvePlayModeSelection } from '../../src/renderer/core/player/playMode.mjs'
+
+const run = (name, fn) => {
+  try {
+    fn()
+    console.log(`PASS ${name}`)
+  } catch (err) {
+    console.error(`FAIL ${name}`)
+    throw err
+  }
+}
+
+run('switching to random requests random queue reset', () => {
+  assert.deepEqual(resolvePlayModeSelection('listLoop', 'random'), {
+    nextMode: 'random',
+    shouldResetRandomQueue: true,
+  })
+})
+
+run('clicking random again keeps mode and requests random queue reset', () => {
+  assert.deepEqual(resolvePlayModeSelection('random', 'random'), {
+    nextMode: 'random',
+    shouldResetRandomQueue: true,
+  })
+})
+
+run('non-random repeated click does nothing special', () => {
+  assert.deepEqual(resolvePlayModeSelection('listLoop', 'listLoop'), {
+    nextMode: 'listLoop',
+    shouldResetRandomQueue: false,
+  })
+})

src/renderer/components/common/TogglePlayModeBtn.vue

@@ -74,7 +74,7 @@
 </template>
 
 <script setup>
-import { ref } from '@common/utils/vueTools'
+import { nextTick, ref } from '@common/utils/vueTools'
 // import useNextTogglePlay from '@renderer/utils/compositions/useNextTogglePlay'
 // import useToggleDesktopLyric from '@renderer/utils/compositions/useToggleDesktopLyric'
 // import { musicInfo, playMusicInfo } from '@renderer/store/player/state'
@@ -90,7 +90,9 @@ const {
 
 const toggleMode = (mode) => {
   btn_ref.value.hide()
-  toggleNextPlayMode(mode)
+  void nextTick(() => {
+    toggleNextPlayMode(mode)
+  })
 }
 
 </script>

src/renderer/core/player/action.ts

@@ -282,6 +282,15 @@ export const resetRandomNextMusicInfo = () => {
   }
 }
 
+export const resetRandomPlayQueue = () => {
+  resetRandomNextMusicInfo()
+  clearPlayedList()
+
+  if (!playMusicInfo.musicInfo || playMusicInfo.isTempPlay) return
+
+  addPlayedList({ ...(playMusicInfo as LX.Player.PlayMusicInfo) })
+}
+
 export const getNextPlayMusicInfo = async(): Promise<LX.Player.PlayMusicInfo | null> => {
   if (tempPlayList.length) { // 如果稍后播放列表存在歌曲则直接播放改列表的歌曲
     const playMusicInfo = tempPlayList[0]

src/renderer/core/player/playMode.mjs

@@ -0,0 +1,6 @@
+export const resolvePlayModeSelection = (currentMode, selectedMode) => {
+  return {
+    nextMode: selectedMode,
+    shouldResetRandomQueue: selectedMode === 'random',
+  }
+}

src/renderer/utils/compositions/useNextTogglePlay.ts

@@ -3,6 +3,8 @@ import {
   computed,
 } from '@common/utils/vueTools'
 import { useI18n } from '@renderer/plugins/i18n'
+import { resetRandomPlayQueue } from '@renderer/core/player'
+import { resolvePlayModeSelection } from '@renderer/core/player/playMode.mjs'
 
 // const playNextModes = [
 //   'listLoop',
@@ -25,10 +27,9 @@ export default () => {
   })
 
   const toggleNextPlayMode = (mode: LX.AppSetting['player.togglePlayMethod']) => {
-    if (mode == appSetting['player.togglePlayMethod']) return
-    // let index = playNextModes.indexOf(appSetting['player.togglePlayMethod'])
-    // if (++index >= playNextModes.length) index = 0
-    setTogglePlayMode(mode)
+    const { nextMode, shouldResetRandomQueue } = resolvePlayModeSelection(appSetting['player.togglePlayMethod'], mode)
+    if (nextMode != appSetting['player.togglePlayMethod']) setTogglePlayMode(nextMode)
+    if (shouldResetRandomQueue) resetRandomPlayQueue()
   }
 
   return {