From 47a2d84b861a8ed4ddd90cf3547e7acdc451a8bd Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Mon, 8 Apr 2024 23:35:36 +0800
Subject: [PATCH] fix(AudioPlayer): 1. app init error; 2. dont show audio
 artist when initial; 3. journal detial paly error;

---
 src/app/vol/[journalId]/page.tsx             |  2 +-
 src/components/AudioPlayer/Player.tsx        |  4 ++--
 src/components/AudioPlayer/PlayerControl.tsx |  6 ++++--
 src/components/Song/SongCardList.tsx         | 14 +++++++-------
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/app/vol/[journalId]/page.tsx b/src/app/vol/[journalId]/page.tsx
index 5c9b440..96782c9 100644
--- a/src/app/vol/[journalId]/page.tsx
+++ b/src/app/vol/[journalId]/page.tsx
@@ -71,7 +71,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
         />
 
         {/* 卡片 */}
-        <SongCardList className="my-40px w-full" songList={songList} />
+        <SongCardList className="my-40px w-full" listId={journalInfo.id} songList={songList} />
 
         <Comment
           journalId={journalInfo.id}
diff --git a/src/components/AudioPlayer/Player.tsx b/src/components/AudioPlayer/Player.tsx
index cba86e1..0950f84 100644
--- a/src/components/AudioPlayer/Player.tsx
+++ b/src/components/AudioPlayer/Player.tsx
@@ -26,7 +26,7 @@ export default function AudioPlayer({ className }: { className?: string }) {
 
   const audio: SongInfo = playQueue.find((item) => item.id === audioId) || playQueue[0];
 
-  const audioRef = useRef(new Audio(audio.src));
+  const audioRef = useRef(new Audio(audio?.src || ''));
   const isReady = useRef<boolean>(false); // 是否加载过组件
   const [isPlaying, setIsPlaying] = useState(false); // 播放状态
   const [trackProgress, setTrackProgress] = useState<number>(0); // 音频进度(s)
@@ -88,7 +88,7 @@ export default function AudioPlayer({ className }: { className?: string }) {
     };
 
     audioRef.current.pause();
-    audioRef.current = new Audio(audio.src);
+    audioRef.current = new Audio(audio?.src || '');
     audioRef.current.addEventListener('timeupdate', onTimeUpdate);
 
     if (isReady.current) {
diff --git a/src/components/AudioPlayer/PlayerControl.tsx b/src/components/AudioPlayer/PlayerControl.tsx
index 1920403..1d5446e 100644
--- a/src/components/AudioPlayer/PlayerControl.tsx
+++ b/src/components/AudioPlayer/PlayerControl.tsx
@@ -58,8 +58,10 @@ export default function AudioPlayer({
       <div className="h-full ml-[27px] mr-[44px] py-[14px]">
         <AutoScrollContainer key={audio?.id} auto hover width="140px" speed={50}>
           <div className="w-auto h-auto">
-            <p className="text-[17px] leading-[23.8px] text-[rgba(0,0,0,0.95)]">{audio?.title}</p>
-            <p className="text-[13px] leading-[18.2px] text-[rgba(0,0,0,0.7)]">{`${audio?.artist}/${audio?.album}`}</p>
+            <p className="text-[17px] leading-[23.8px] text-[rgba(0,0,0,0.95)]">{audio?.title ?? ''}</p>
+            {audio?.artist && audio?.album && (
+              <p className="text-[13px] leading-[18.2px] text-[rgba(0,0,0,0.7)]">{`${audio.artist}/${audio.album}`}</p>
+            )}
           </div>
         </AutoScrollContainer>
       </div>
diff --git a/src/components/Song/SongCardList.tsx b/src/components/Song/SongCardList.tsx
index 21cc663..7c03d42 100644
--- a/src/components/Song/SongCardList.tsx
+++ b/src/components/Song/SongCardList.tsx
@@ -15,31 +15,31 @@ interface Props {
 }
 
 export default function JournalItem({ listId, songList, className }: Props) {
-  const { setPlayList, audioIndex, playListId, setAudioIndex } = useAudioStore(
+  const { setPlayList, setAudioId, playListId, audioId } = useAudioStore(
     useShallow((state) => ({
       setplayList: state.setPlayList,
-      audioIndex: state.audioIndex,
-      setAudioIndex: state.setAudioIndex,
+      setAudioId: state.setAudioId,
+      audioId: state.audioId,
       playList: state.playList,
       setPlayList: state.setPlayList,
       playListId: state.playListId,
     })),
   );
 
-  const handlePlayList = (index: number) => {
+  const handlePlayList = (id: string) => {
     // 正在播放当前歌单
     if (playListId !== listId) {
       setPlayList({ id: listId, list: songList });
     }
 
     // 正在播放其他歌单
-    setAudioIndex(index);
+    setAudioId(id);
   };
 
   return (
     <div className={`${className}`}>
-      {songList.map((song: SongInfo, index: number) => (
-        <SongCard key={song.id} {...song} onPlay={() => handlePlayList(index)} />
+      {songList.map((song: SongInfo) => (
+        <SongCard key={song.id} {...song} onPlay={(audioId: string) => handlePlayList(audioId)} />
       ))}
     </div>
   );