修复player随机播放的bug

src/components/Player.vue

@@ -176,7 +176,7 @@ export default {
     ...mapMutations([
       "updateShuffleStatus",
       "updatePlayerList",
-      "shuffleTheList",
+      "turnOnShuffleMode",
       "updatePlayerState",
       "updateRepeatStatus",
       "updateLikedSongs",
@@ -214,8 +214,7 @@ export default {
         this.updateShuffleStatus(false);
         this.updatePlayerList(this.player.notShuffledList);
       } else {
-        this.updateShuffleStatus(true);
+        this.turnOnShuffleMode();
-        this.shuffleTheList();
       }
     },
     repeat() {

src/store/actions.js

@@ -37,11 +37,22 @@ export default {
     });
   },
   playFirstTrackOnList({ state, dispatch }) {
-    dispatch("switchTrack", state.player.list[0]);
+    dispatch(
+      "switchTrack",
+      state.player.list.find((t) => t.sort === 0)
+    );
   },
-  playTrackOnListByID(context, trackID) {
+  playTrackOnListByID({ state, commit, dispatch }, trackID) {
-    let track = context.state.player.list.find((t) => t.id === trackID);
+    let track = state.player.list.find((t) => t.id === trackID);
-    context.dispatch("switchTrack", track);
+    dispatch("switchTrack", track);
+    if (state.player.shuffle) {
+      // 当随机模式开启时，双击列表的一首歌进行播放，此时要把这首歌的sort调到第一(0)，这样用户就能随机播放完整的歌单
+      let otherTrack = state.player.list.find((t) => t.sort === 0);
+      commit("switchSortBetweenTwoTracks", {
+        trackID1: track.id,
+        trackID2: otherTrack.id,
+      });
+    }
   },
   nextTrack({ state, dispatch }, realNext = false) {
     let nextTrack = state.player.list.find(

src/store/mutations.js

@@ -1,5 +1,6 @@
 import { Howl } from "howler";
 import state from "./state";
+import { shuffleAList } from "@/utils/common";
 
 export default {
   updatePlayerState(state, { key, value }) {
@@ -50,35 +51,28 @@ export default {
     track.sort = state.player.currentTrack.sort + 1;
     state.player.list.push(track);
   },
-  shuffleTheList(state) {
+  turnOnShuffleMode(state) {
-    let getOneRandomly = (arr) => arr[Math.floor(Math.random() * arr.length)];
     state.player.notShuffledList = JSON.parse(
       JSON.stringify(state.player.list)
     );
+    state.player.shuffle = true;
 
-    let sorts = Array.from(new Array(state.player.list.length).keys());
+    let newSorts = shuffleAList(
-    sorts = sorts.filter((no) => no != 0);
+      state.player.list.filter((t) => t.sort > state.player.currentTrack.sort)
-    let shuffledList = state.player.list.map((track) => {
-      if (track.id === state.player.currentTrack.id) {
-        // 确保正在播放的歌的sort是第一个
-        track.sort = 0;
-        return track;
-      }
-      let sortNo = getOneRandomly(sorts);
-      sorts = sorts.filter((no) => no != sortNo);
-      track.sort = sortNo;
-      return track;
-    });
-
-    state.player.list = shuffledList;
-
-    // 更新当前播放歌曲的sort
-    let currentTrack = state.player.list.find(
-      (t) => t.id === state.player.currentTrack.id
     );
-    state.player.currentTrack.sort = currentTrack.sort;
 
-    state.player.shuffle = true;
+    state.player.list = state.player.list.map((track) => {
+      if (newSorts[track.id] !== undefined) track.sort = newSorts[track.id];
+      return track;
+    });
+  },
+  shuffleTheListBeforePlay(state) {
+    let newSorts = shuffleAList(state.player.list);
+    state.player.list = state.player.list.map((track) => {
+      track.sort = newSorts[track.id];
+      return track;
+    });
+    console.table(state.player.list);
   },
   updateUser(state, user) {
     state.settings.user = user;
@@ -89,4 +83,14 @@ export default {
   updateLikedSongs(state, trackIDs) {
     state.liked.songs = trackIDs;
   },
+  switchSortBetweenTwoTracks(state, { trackID1, trackID2 }) {
+    let t1 = state.player.list.find((t) => t.id === trackID1);
+    let t2 = state.player.list.find((t) => t.id === trackID2);
+    let sorts = [t1.sort, t2.sort];
+    state.player.list = state.player.list.map((t) => {
+      if (t.id === t1.id) t.sort = sorts[1];
+      if (t.id === t2.id) t.sort = sorts[0];
+      return t;
+    });
+  },
 };

src/utils/common.js

@@ -38,3 +38,16 @@ export function randomNum(minNum, maxNum) {
       return 0;
   }
 }
+
+export function shuffleAList(list) {
+  let sortsList = list.map((t) => t.sort);
+  for (let i = 1; i < sortsList.length; i++) {
+    const random = Math.floor(Math.random() * (i + 1));
+    [sortsList[i], sortsList[random]] = [sortsList[random], sortsList[i]];
+  }
+  let newSorts = {};
+  list.map((track) => {
+    newSorts[track.id] = sortsList.pop();
+  });
+  return newSorts;
+}

src/utils/play.js

@@ -8,6 +8,7 @@ export function playAList(list, id, type, trackID = "first") {
     return { sort: index, id };
   });
   store.commit("updatePlayerList", filteredList);
+  if (store.state.player.shuffle) store.commit("shuffleTheListBeforePlay");
 
   if (trackID === "first") store.dispatch("playFirstTrackOnList");
   else store.dispatch("playTrackOnListByID", trackID);