From 84fa91df1fb5348aa0802adaf39e1427b1513cc5 Mon Sep 17 00:00:00 2001
From: fadeaway <chaofanchi@gmail.com>
Date: Sun, 24 Mar 2024 21:15:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=9F=E5=88=8A=E6=AD=8C=E6=9B=B2?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=92=AD=E6=94=BE=E4=B8=8B=E4=B8=80=E9=A6=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AudioPlayer/index.tsx |  7 ++++++-
 src/components/MusicPanel/index.tsx  |  4 +++-
 src/components/SongList/index.tsx    | 14 +++++++++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/AudioPlayer/index.tsx b/src/components/AudioPlayer/index.tsx
index 10481fb..016f778 100644
--- a/src/components/AudioPlayer/index.tsx
+++ b/src/components/AudioPlayer/index.tsx
@@ -11,7 +11,7 @@ export interface IAudioPlayerRef {
 }
 
 export default forwardRef(function AudioPlayer(
-  { src, autoPlay }: { src?: string; autoPlay?: boolean },
+  { src, autoPlay, onEnded }: { src?: string; autoPlay?: boolean; onEnded?: () => void },
   ref: React.Ref<IAudioPlayerRef>,
 ) {
   const [curTime, setCurTime] = useState('00:00');
@@ -45,6 +45,10 @@ export default forwardRef(function AudioPlayer(
     });
   };
 
+  const handleEnded = () => {
+    onEnded?.();
+  };
+
   const handleSlideStart = () => {
     isDragingRef.current = true;
   };
@@ -86,6 +90,7 @@ export default forwardRef(function AudioPlayer(
         src={src}
         onLoadedMetadata={handleLoadedMetadata}
         onTimeUpdate={handleTimeUpdate}
+        onEnded={handleEnded}
       />
       <input
         ref={sliderRef}
diff --git a/src/components/MusicPanel/index.tsx b/src/components/MusicPanel/index.tsx
index b73007d..5f03875 100644
--- a/src/components/MusicPanel/index.tsx
+++ b/src/components/MusicPanel/index.tsx
@@ -58,7 +58,9 @@ export default function MusicPanel(props: { musicInfo: ISong }) {
         </div>
       </div>
       <h5 className="mt-[9px] font-medium text-[20px] leading-[28px] w-full">{musicInfo?.title}</h5>
-      <p className="mt-[3px] text-[12px] text-[#ffffffb2] w-full">{musicInfo?.artist}</p>
+      <p className="mt-[3px] text-[12px] text-[#ffffffb2] w-full">
+        {[musicInfo?.artist, musicInfo?.album].filter((str) => !!str).join(' / ')}
+      </p>
 
       <div className="w-full mt-[18px] mb-[46px]">
         <AudioPlayer ref={audioPlayerRef} src={musicInfo?.src} />
diff --git a/src/components/SongList/index.tsx b/src/components/SongList/index.tsx
index 1f29738..d699569 100644
--- a/src/components/SongList/index.tsx
+++ b/src/components/SongList/index.tsx
@@ -14,6 +14,18 @@ export default function SongList({ list }: { list: ISong[] }) {
   const [curSong, setCurSong] = useState<ISong | undefined>();
   const [playing, setPlaying] = useState(false);
 
+  // 上一首播放完毕，自动播放下一首
+  const handleEnded = () => {
+    setPlaying(false);
+    if (list && list.length > 0) {
+      const curIndex = list.findIndex((song: ISong) => song.id === curSong?.id);
+      if (list[curIndex + 1]) {
+        setCurSong(list[curIndex + 1]);
+        setPlaying(true);
+      }
+    }
+  };
+
   const providerVal = {
     audioPlayer: audioPlayerRef?.current,
     songList: list,
@@ -31,7 +43,7 @@ export default function SongList({ list }: { list: ISong[] }) {
       {list?.map((song: ISong) => <SongItem key={song.id} data={song} />)}
 
       <div className="hidden">
-        <AudioPlayer ref={audioPlayerRef} autoPlay={false} src={curSong?.src} />
+        <AudioPlayer ref={audioPlayerRef} autoPlay={false} src={curSong?.src} onEnded={handleEnded} />
       </div>
     </JournalAudioContext.Provider>
   );