#14 feat: 앨범 데이터에 포함된 duration 값을 통해 음악 시간 미리 표시

boostksm · Jul 12, 2023 · 8d68ee4 · 8d68ee4
1 parent 3a2d71e
commit 8d68ee4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 15 deletions.
diff --git a/src/components/SongPlayer.js b/src/components/SongPlayer.js
@@ -117,9 +117,7 @@ const SongPlayer = ({
     playPrevSong,
     playNextSong,
     currentTime,
-    duration,
     changeCurrentTime,
-    updateDuration,
     updateCurrentTime,
     isPlaying,
     isRandom,
@@ -137,7 +135,6 @@ const SongPlayer = ({
         ref={audioRef}
         id="player"
         loop={loopOptionIdx === 2}
-        onLoadedMetadata={updateDuration}
         onTimeUpdate={updateCurrentTime}
       ></audio>
       <div className="playingSongHeadingBox">
@@ -194,15 +191,17 @@ const SongPlayer = ({
             <input
               className="progressBarInput"
               type="range"
-              value={(currentTime / duration) * 100 || 0}
+              value={
+                playingSong ? (currentTime / playingSong.duration) * 100 : 0
+              }
               onInput={changeCurrentTime}
               aria-label="재생바"
             />
           )}
         </div>
         <div className="playingSongTimeBox">
           <div>{timeFormatter.getString(currentTime)}</div>
-          <div>{timeFormatter.getString(duration)}</div>
+          <div>{timeFormatter.getString(playingSong?.duration || 0)}</div>
         </div>
       </div>
     </SongPlayerLayout>

diff --git a/src/hooks/useSongPlayer.js b/src/hooks/useSongPlayer.js
@@ -11,7 +11,6 @@ export default function useSongPlayer({
   const [isPlaying, setIsPlaying] = useState(false);
   const [isRandom, setIsRandom] = useState(false);
   const [loopOptionIdx, setLoopOptionIdx] = useState(0);
-  const [duration, setDuration] = useState(0);
   const [currentTime, setCurrentTime] = useState(0);
   const audioRef = useRef(null);
   const audioSrcManager = useRef(new AudioFetchingManager(10));
@@ -40,16 +39,16 @@ export default function useSongPlayer({
   }, [playingSong]);
 
   useEffect(() => {
-    console.log(curObjectUrl);
     audioRef.current.src = curObjectUrl;
+    if (isFromHighlight) moveToHighlight();
     if (isPlaying) {
       audioRef.current.play().catch(console.log);
     }
   }, [curObjectUrl]);
 
   useEffect(() => {
     if (isFromHighlight) moveToHighlight();
-  }, [isFromHighlight, duration]);
+  }, [isFromHighlight]);
 
   useEffect(() => {
     if (isPlaying) audioRef.current.play().catch(console.log);
@@ -101,31 +100,27 @@ export default function useSongPlayer({
     }, 100);
   }, []);
 
-  const updateDuration = useCallback((e) => {
-    setDuration(e.currentTarget.duration);
-  }, []);
   const updateCurrentTime = useCallback((e) => {
     const { currentTime } = e.currentTarget;
     setCurrentTime(currentTime);
   }, []);
 
   const changeCurrentTime = useCallback(
     (e) => {
+      if (!playingSong) return;
       const { value } = e.currentTarget;
-      const nextTime = (value / 100) * duration;
+      const nextTime = (value / 100) * playingSong.duration;
       audioRef.current.currentTime = nextTime;
       setCurrentTime(nextTime);
     },
-    [duration]
+    [playingSong]
   );
   return {
     audioRef,
     playPrevSong,
     playNextSong,
     currentTime,
-    duration,
     changeCurrentTime,
-    updateDuration,
     updateCurrentTime,
     isPlaying,
     isRandom,