update(Player):

1. FM 模式播放队列逻辑修改
2. styles

src/components/AudioPlayer/Player.tsx

@@ -129,9 +129,11 @@ export default function AudioPlayer({
   // 弹出 Card 时，禁止页面滚动
   useEffect(() => {
     if (showCard) {
-      document.body.style.setProperty('overflow-y', 'hidden', 'important');
+      // document.body.style.setProperty('overflow-y', 'hidden');
+      // document.body.style.setProperty('padding-right', '15px');
     } else {
-      document.body.style.removeProperty('overflow-y');
+      // document.body.style.removeProperty('overflow-y');
+      // document.body.style.removeProperty('padding-right');
     }
   }, [showCard]);
 

src/components/AudioPlayer/PlayerCard.tsx

@@ -20,12 +20,12 @@ interface Prop {
 
 export default function PlayerCard({ show, className }: Prop) {
   const router = useRouter();
-  const { audioId, playList, playQueue, playState, setShowCard, setPlayList, setPlayQueue } = useAudioStore(
+  const { audioId, playListInfo, playQueue, playState, setShowCard, setPlayList, setPlayQueue } = useAudioStore(
     useShallow((state) => {
       return {
         playState: state.playState,
         audioId: state.audioId,
-        playList: state.playList,
+        playListInfo: state.playListInfo,
         playQueue: state.playQueue,
         setShowCard: state.setShowCard,
         setPlayList: state.setPlayList,
@@ -36,12 +36,12 @@ export default function PlayerCard({ show, className }: Prop) {
   const rightRef = useRef<HTMLDivElement>(null);
 
   const [lrc, setLrc] = useState<string>('');
-  const [height, setHeight] = useState<number>(100);
+  const [playListHeight, setPlayListHeight] = useState<number>(100);
 
   const miniClass = 'translate-y-100vh'; // 缩小时的样式
   const largeClass = 'translate-y-0'; // 放大后的样式
 
-  const audioInfo = playList.find((item) => item.id === audioId);
+  const audioInfo = playQueue.find((item) => item.id === audioId);
 
   const getLrc = async (lrcUrl: string) => {
     if (!lrcUrl) {
@@ -59,7 +59,7 @@ export default function PlayerCard({ show, className }: Prop) {
   const handleClearPlayQueue = () => {
     if (audioInfo) {
       setPlayQueue([audioInfo]);
-      setPlayList([audioInfo]);
+      if (playListInfo.type !== 'fm') setPlayList([audioInfo]);
     }
   };
 
@@ -73,12 +73,12 @@ export default function PlayerCard({ show, className }: Prop) {
   }, [audioInfo]);
 
   useEffect(() => {
-    if (rightRef.current?.offsetHeight) setHeight(rightRef.current?.offsetHeight - 24 - 15);
-  }, []);
+    if (rightRef.current?.offsetHeight) setPlayListHeight(rightRef.current?.offsetHeight - 24 - 15);
+  }, [show]);
 
   return (
     <div
-      className={`w-100vw h-100vh pb-150px bg-[#fff] transition-all duration-300 z-9 ${show ? largeClass : miniClass} ${className}`}
+      className={`w-100vw h-100vh pb-150px bg-[#fff] transition-all duration-300 z-9 overscroll-y-contain ${show ? largeClass : miniClass} ${className}`}
     >
       <Header type="client" />
 
@@ -150,7 +150,9 @@ export default function PlayerCard({ show, className }: Prop) {
           </button>
 
           <div className="w-full mt-15px ml-[-18px] overflow-hidden">
-            <SongList height={height} songList={playQueue} listInfo={{ type: 'playerCard', id: null }} />
+            {show && (
+              <SongList height={playListHeight} songList={playQueue} listInfo={{ type: 'playerCard', id: null }} />
+            )}
           </div>
         </div>
       </div>

src/components/Button/ButtonFM.tsx

@@ -46,7 +46,7 @@ export default function ButtonFM() {
         id: 'fm',
       });
       if (!setRes) return;
-      setPlayList(res.data);
+      setPlayList(res.data.slice(1));
       setPlayOrder('list_loop');
       setPlayQueue([res.data[0]]);
       setAudioId(res.data[0].id);

src/store/audio.ts

@@ -99,12 +99,10 @@ const useAudioState = create<AuioState>()(
 
           // 获取当前播放歌曲, 在 Queue 中的 index，并计算出下一首歌曲的 index
           const queueIndex = playQueue.findIndex((item) => item.id === get().audioId);
-          const listIndex = playList.findIndex((item) => item.id === get().audioId);
           const nextQueueIndex = queueIndex + diff;
-          const nextListIndex = listIndex + diff;
 
           // 播放 list 最后一首歌时，再加载30首
-          if (nextListIndex >= playList.length - 1) {
+          if (playList.length < 3) {
             await getFm();
             playQueue = get().playQueue;
             playList = get().playList;
@@ -114,23 +112,26 @@ const useAudioState = create<AuioState>()(
           let audioId = '';
           if (nextQueueIndex < 0) {
             // 在第一首歌点击上一首，切换到最后一首
-            audioId = playQueue[playQueue.length - 1].id;
+            audioId = playQueue[playQueue.length - 1]?.id;
           } else if (nextQueueIndex >= playQueue.length) {
             // 在最后一首歌点击下一首，往 Queue 中 push 歌曲
-            const newAudio = playList[nextListIndex];
+            const newAudio = playList[0];
+            const newQueue = playQueue.length > 50 ? [...playQueue.slice(1), newAudio] : [...playQueue, newAudio];
+
             set(
               produce((state) => {
-                state.playQueue = [...playQueue, newAudio];
+                state.playQueue = newQueue;
+                state.playList = playList.slice(1);
               }),
             );
-            audioId = newAudio.id;
+            audioId = newAudio?.id;
           } else {
             // 非越界切换
-            audioId = playQueue[nextQueueIndex].id;
+            audioId = playQueue[nextQueueIndex]?.id;
           }
 
           // 切换歌曲
-          setAudioId(audioId);
+          if (audioId) setAudioId(audioId);
         };
 
         // 切换播放顺序
@@ -164,11 +165,13 @@ const useAudioState = create<AuioState>()(
         // 获取 fm 列表
         const getFm = async () => {
           const res = await apiGetSongRandom(30);
+          const { playList } = get();
 
           if (res.code === 200 && res.data.length > 0) {
+            const newList = [...playList, ...res.data];
             set(
               produce((state) => {
-                state.playList = [...get().playList, ...res.data];
+                state.playList = newList;
               }),
             );
           }