From 49f462cdf546e6890f7987365cb02e12c6007b5e Mon Sep 17 00:00:00 2001
From: wangjian <wangjian@test.com>
Date: Fri, 29 Nov 2024 14:28:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor(music):=20=E4=BC=98=E5=8C=96=E9=9F=B3?=
 =?UTF-8?q?=E4=B9=90=E6=92=AD=E6=94=BE=E9=80=BB=E8=BE=91=E5=92=8C=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-改进 setNextPlaySong 方法，处理空播放列表的情况
-优化重复歌曲移除逻辑，确保插入位置正确
- 调整音乐数据重置方式，使用对象展开运算符
-增加播放器加载状态检查，避免未准备好时操作
-改进歌曲播放逻辑，处理添加到播放列表后立即播放的情况- 优化播放索引切换，考虑当前播放状态
-调整播放列表移除歌曲逻辑，优化用户体验
- 将初始 playIndex 设置为 -1，表示未播放状态
---
 src/stores/data.ts   | 18 +++++++++++++-----
 src/stores/music.ts  |  2 +-
 src/stores/status.ts |  2 +-
 src/utils/player.ts  | 20 +++++++++++++++-----
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/stores/data.ts b/src/stores/data.ts
index d207cac3..56c67f80 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -160,15 +160,23 @@ export const useDataStore = defineStore({
     },
     // 新增下一首播放歌曲
     async setNextPlaySong(song: SongType, index: number): Promise<number> {
-      // 移除重复的歌曲（如果存在）
-      const playList = this.playList.filter((item) => item.id !== song.id);
+      // 若为空,则直接添加
+      if (this.playList.length === 0) {
+        this.playList = [song];
+        await musicDB.setItem("playList", cloneDeep(this.playList));
+        return 0;
+      }
+
       // 在当前播放位置之后插入歌曲
-      const indexAdd = index + 1;
-      playList.splice(indexAdd, 0, song);
+      const indexAdd = index + 1
+      this.playList.splice(indexAdd, 0, song)
+      // 移除重复的歌曲（如果存在）
+      const playList = this.playList.filter((item,idx) => idx === indexAdd || item.id !== song.id);
       // 更新本地存储
       this.playList = playList;
       await musicDB.setItem("playList", cloneDeep(playList));
-      return indexAdd;
+      // 返回刚刚插入的歌曲索引
+      return playList.findIndex(item => item.id === song.id);
     },
     // 更改播放历史
     async setHistory(song: SongType) {
diff --git a/src/stores/music.ts b/src/stores/music.ts
index 4a162746..5db2cc02 100644
--- a/src/stores/music.ts
+++ b/src/stores/music.ts
@@ -86,7 +86,7 @@ export const useMusicStore = defineStore({
   actions: {
     // 恢复默认音乐数据
     resetMusicData() {
-      this.playSong = defaultMusicData;
+      this.playSong = {...defaultMusicData};
       this.songLyric = {
         lrcData: [],
         yrcData: [],
diff --git a/src/stores/status.ts b/src/stores/status.ts
index 2e5b5c7e..3336567c 100644
--- a/src/stores/status.ts
+++ b/src/stores/status.ts
@@ -74,7 +74,7 @@ export const useStatusStore = defineStore({
     // 音乐频谱数据
     spectrumsData: [],
     // 当前播放索引
-    playIndex: 0,
+    playIndex: -1,
     // 歌词播放索引
     lyricIndex: -1,
     // 默认倍速
diff --git a/src/utils/player.ts b/src/utils/player.ts
index 9b15f41f..a0ad1925 100644
--- a/src/utils/player.ts
+++ b/src/utils/player.ts
@@ -588,6 +588,12 @@ class Player {
    */
   async pause(changeStatus: boolean = true) {
     const statusStore = useStatusStore();
+
+    // 播放器未加载完成
+    if (this.player.state() !== "loaded"){
+      return
+    }
+
     // 淡出
     await new Promise<void>((resolve) => {
       this.player.fade(statusStore.playVolume, 0, this.getFadeTime());
@@ -873,15 +879,16 @@ class Player {
     // 尝试添加
     const songIndex = await dataStore.setNextPlaySong(song, statusStore.playIndex);
     // 播放歌曲
-    if (!songIndex) return;
-    if (play) this.togglePlayIndex(songIndex);
+    if (songIndex < 0) return;
+    if (play) this.togglePlayIndex(songIndex,true);
     else window.$message.success("已添加至下一首播放");
   }
   /**
    * 切换播放索引
    * @param index 播放索引
+   * @param play 是否立即播放
    */
-  async togglePlayIndex(index: number) {
+  async togglePlayIndex(index: number,play:boolean = false) {
     const dataStore = useDataStore();
     const statusStore = useStatusStore();
     // 获取数据
@@ -889,7 +896,7 @@ class Player {
     // 若超出播放列表
     if (index >= playList.length) return;
     // 相同
-    if (statusStore.playIndex === index) {
+    if (!play && statusStore.playIndex === index) {
       this.play();
       return;
     }
@@ -915,6 +922,8 @@ class Player {
       this.cleanPlayList();
       return;
     }
+    // 是否为当前播放歌曲
+    const isCurrentPlay = statusStore.playIndex === index;
     // 深拷贝，防止影响原数据
     const newPlaylist = cloneDeep(playList);
     // 若将移除最后一首
@@ -929,7 +938,7 @@ class Player {
     newPlaylist.splice(index, 1);
     dataStore.setPlayList(newPlaylist);
     // 若为当前播放
-    if (statusStore.playIndex === index) {
+    if (isCurrentPlay) {
       this.initPlayer(statusStore.playStatus);
     }
   }
@@ -949,6 +958,7 @@ class Player {
       showFullPlayer: false,
       playHeartbeatMode: false,
       personalFmMode: false,
+      playIndex: -1,
     });
     musicStore.resetMusicData();
     dataStore.setPlayList([]);