🐛 Fix the playback queue disorder caused by the playlist (#13)

Author: JavanShen

src/components/MusicList.tsx

@@ -1,7 +1,7 @@
 import { memo, useEffect, useRef, CSSProperties } from "react";
 import useStore, { FileInfo } from "@/store";
 import { Image, Skeleton } from "@heroui/react";
-import { secondsToMinutes, updatePlaylist } from "@/utils/player";
+import { secondsToMinutes, updatePlayQuque } from "@/utils/player";
 import { parseMusicMeta } from "@/utils/meta";
 import { FixedSizeList, areEqual } from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
@@ -148,7 +148,7 @@ const MusicList = ({ musicList }: { musicList: FileInfo[] }) => {
                     style={style}
                     onClick={() => {
                       setCurrentMusic(sign, index, name);
-                      updatePlaylist("select");
+                      updatePlayQuque("select");
                     }}
                     onContextMenu={(e) => {
                       curActMusicId.current = sign;

src/layout/Menu.tsx

@@ -16,6 +16,7 @@ import useStore from "@/store";
 import { jumpLogin } from "@/utils/request";
 import { useEffect, useState, useRef } from "react";
 import ContextMenu, { ContextMenuRef } from "@/components/ContextMenu";
+import { updatePlayQuque } from "@/utils/player";
 
 const CreatePlaylist = ({
   isOpen,
@@ -115,7 +116,10 @@ const Menu = () => {
               key={key}
               className={`flex items-center justify-start w-full px-4 bg-opacity-70 hover:bg-white cursor-pointer ${key === currentGroup ? "bg-white" : "bg-transparent"}`}
               style={{ height: 90 }}
-              onClick={() => setCurrentGroup(key)}
+              onClick={() => {
+                setCurrentGroup(key);
+                updatePlayQuque();
+              }}
               onContextMenu={(e) => {
                 e.preventDefault();
                 if (key === "All Music") return;

src/layout/Player.tsx

@@ -3,7 +3,7 @@ import useStore from "@/store";
 import usePlayAudio from "@/hooks/usePlayAudio";
 import MiniPlayer from "@/components/MiniPlayer";
 import { parseMusicMeta } from "@/utils/meta";
-import { updatePlaylist } from "@/utils/player";
+import { updatePlayQuque } from "@/utils/player";
 
 const Player = () => {
   const currentMusicId = useStore((state) => state.currentMusicId);
@@ -12,7 +12,7 @@ const Player = () => {
   const musicMetaMap = useStore.getState().musicMetaMap;
   const musicList = useStore((state) => state.getMusicList());
   const history = useStore((state) => state.history);
-  const playlist = useStore((state) => state.playlist);
+  const playQueue = useStore((state) => state.playQueue);
   const isShuffle = useStore((state) => state.isShuffle);
   const isRepeat = useStore((state) => state.isRepeat);
   const isLoop = useStore((state) => state.isLoop);
@@ -48,23 +48,23 @@ const Player = () => {
   }, [currentMusicId, currentFileName]);
 
   useEffect(() => {
-    updatePlaylist();
+    updatePlayQuque();
   }, [isShuffle, isLoop]);
 
   const next = (isEnded?: boolean) => {
     if (useStore.getState().isRepeat && isEnded) {
       return controls.reload();
     }
 
-    const playlist = useStore.getState().playlist;
+    const playQueue = useStore.getState().playQueue;
 
-    if (playlist.length === 0) return;
+    if (playQueue.length === 0) return;
 
-    const musicIndex = playlist[0];
+    const musicIndex = playQueue[0];
     const music = useStore.getState().getMusicList()[musicIndex];
 
     setCurrentMusic(music.sign, musicIndex, music.name);
-    updatePlaylist("next");
+    updatePlayQuque("next");
   };
 
   const prev = () => {
@@ -106,7 +106,7 @@ const Player = () => {
     artist,
     cover: coverUrl,
     prevDisabled: history.length === 0,
-    nextDisabled: playlist.length === 0,
+    nextDisabled: playQueue.length === 0,
     next,
     prev,
     isLoop,

src/store/index.ts

@@ -31,9 +31,9 @@ type BeagleState = {
 
   musicMetaMap: Map<string, Metadata | null>;
   getMusicList: () => FileInfo[];
-  playlist: number[];
+  playQueue: number[];
   history: number[];
-  setPlaylist: (playlist: number[]) => void;
+  setPlayQueue: (playQueue: number[]) => void;
   setHistory: (history: number[]) => void;
   addMusicMeta: (id: string, meta: Metadata | null) => void;
 
@@ -80,13 +80,13 @@ const useStore = create<BeagleState>()(
         });
       },
 
-      // 音乐&元数据&播放列表
+      // 音乐&元数据&播放队列
       musicMetaMap: new Map(),
-      playlist: [],
+      playQueue: [],
       history: [],
       setHistory: (history) => set({ history }),
-      setPlaylist: (playlist) => {
-        set({ playlist });
+      setPlayQueue: (playQueue) => {
+        set({ playQueue });
       },
       addMusicMeta: (id, meta) =>
         set((state) => ({

src/utils/array.ts

@@ -17,13 +17,28 @@ export const generateRandomArray = (
   max: number,
   exclude: number[] = [],
 ) => {
-  if (length > max + 1 - exclude.length) return [];
-  const arr = Array.from({ length: max + 1 }, (_, i) => i).filter(
-    (i) => !exclude.includes(i),
-  );
-  for (let i = 0; i < length; i++) {
-    const j = i + Math.floor(Math.random() * (max + 1 - exclude.length - i));
-    [arr[i], arr[j]] = [arr[j], arr[i]];
+  const actualLen = max + 1 - exclude.length;
+  const splitNum = Math.ceil(length / actualLen);
+  let ans: number[] = [];
+
+  for (let count = 1; count <= splitNum; count++) {
+    const len =
+      length > actualLen
+        ? count * actualLen <= length
+          ? actualLen
+          : length - actualLen
+        : length;
+
+    const arr = Array.from({ length: max + 1 }, (_, i) => i).filter(
+      (i) => !exclude.includes(i),
+    );
+    for (let i = 0; i < len; i++) {
+      const j = i + Math.floor(Math.random() * (actualLen - i));
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+
+    ans = [...ans, ...arr.slice(0, len)];
   }
-  return arr.slice(0, length);
+
+  return ans;
 };

src/utils/player.ts

@@ -13,28 +13,28 @@ export const secondsToMinutes = (seconds: number) => {
   return `${formatTime(seconds / 60)}:${formatTime(seconds % 60)}`;
 };
 
-export const updatePlaylist = (trigger?: "next" | "prev" | "select") => {
+export const updatePlayQuque = (trigger?: "next" | "prev" | "select") => {
   const {
     getMusicList,
     isShuffle,
     isLoop,
     currentMusicIndex,
-    setPlaylist,
-    playlist,
+    setPlayQueue,
+    playQueue,
   } = useStore.getState();
   const musicList = getMusicList();
 
   if (musicList.length > 0) {
-    let newPlaylist: number[] = [];
+    let newPlayQueue: number[] = [];
     if (isShuffle) {
-      newPlaylist =
+      newPlayQueue =
         trigger === "next"
           ? [
-              ...playlist.filter((item) => item !== currentMusicIndex),
+              ...playQueue.filter((item) => item !== currentMusicIndex),
               ...generateRandomArray(
-                Math.min(10, musicList.length) - playlist.length,
+                Math.min(10, musicList.length) - playQueue.length,
                 musicList.length - 1,
-                playlist.slice(1),
+                playQueue.slice(1),
               ),
             ]
           : generateRandomArray(
@@ -43,17 +43,17 @@ export const updatePlaylist = (trigger?: "next" | "prev" | "select") => {
               [currentMusicIndex],
             );
     } else {
-      newPlaylist = generateOrderedArray(
+      newPlayQueue = generateOrderedArray(
         isLoop ? 10 : Math.min(10, musicList.length),
         currentMusicIndex + 1,
-        musicList.length - 1,
+        musicList.length,
         isLoop,
       );
     }
 
-    setPlaylist(newPlaylist);
+    setPlayQueue(newPlayQueue);
 
-    const nextMusic = musicList[newPlaylist[0]];
+    const nextMusic = musicList[newPlayQueue[0]] || {};
     parseMusicMeta(nextMusic.sign, nextMusic.name);
   }
 };

test/array.test.ts

@@ -5,27 +5,34 @@ import {
 } from "../src/utils/array.ts";
 
 describe("generateRandomArray", () => {
-  test("生成指定长度的数组", () => {
+  test("should generate an array of specified length.", () => {
     const array = generateRandomArray(5, 10);
     expect(array).toHaveLength(5);
   });
 
-  test("数组不重复", () => {
+  test("the array does not repeat(when the length is sufficient)", () => {
     const array = generateRandomArray(5, 4);
     expect(array).toStrictEqual(Array.from(new Set(array)));
   });
 
-  test("数组元素在指定范围内", () => {
+  test("array elements within the specified range", () => {
     const array = generateRandomArray(5, 4);
     expect(array.every((num) => num >= 0 && num <= 5)).toBe(true);
   });
 
-  test("数组元素不包含指定元素", () => {
+  test("the array elements do not contain the specified element", () => {
     const array = generateRandomArray(5, 6, [2, 4]);
     expect(
       array.every((num) => num >= 0 && num <= 6 && ![2, 4].includes(num)),
     ).toBe(true);
   });
+
+  test("Complete when the array length is insufficient", () => {
+    const array = generateRandomArray(10, 4);
+    expect(array).toHaveLength(10);
+    expect(new Set(array.slice(0, 5))).toEqual(new Set([0, 1, 2, 3, 4]));
+    expect(new Set(array.slice(5, 10))).toEqual(new Set([0, 1, 2, 3, 4]));
+  });
 });
 
 describe("generateOrderedArray", () => {