move button bar from Player into own component

src/components/Player.jsx

@@ -1,22 +1,22 @@
-import { usePlayerStore } from "@/store/playerStore"
-import { Next, Pause, Play, Prev } from "@/icons/PlayerIcons"
+import { PlayerControlButtonBar } from "@/components/PlayerControlButtonBar";
 import { PlayerCurrentSong } from "@/components/PlayerCurrentSong"
 import { PlayerSoundControl } from "@/components/PlayerSoundControl"
 import { PlayerVolumeControl } from "@/components/PlayerVolumeControl"
+import { useCurrentMusic } from "@/hooks/UseCurrentMusic";
 import { useEffect, useRef } from "react"
+import { usePlayerStore } from "@/store/playerStore"
 
 
 export function Player() {
-  const {currentMusic, isPlaying, setIsPlaying, volume, setCurrentMusic} = usePlayerStore(state => state);
+  const {currentMusic, isPlaying, volume, setCurrentMusic} = usePlayerStore(state => state);
   const audioRef = useRef();
+  const {getNextSong} = useCurrentMusic(currentMusic)
 
   useEffect(() => {
     if (!currentMusic.song) {
       return;
     }
-    isPlaying
-      ? audioRef.current.play().catch((e) => console.log('error playing: ', e))
-      : audioRef.current.pause()
+    isPlaying ? play() : audioRef.current.pause()
   }, [isPlaying])
 
   useEffect(() => {
@@ -27,73 +27,40 @@ export function Player() {
     const {song, playlist} = currentMusic;
     if (song) {
       audioRef.current.src = `/music/${playlist?.id}/0${song.id}.mp3`;
-      audioRef.current.volume = volume;
-      audioRef.current.play();
+      play();
     }
   }, [currentMusic])
 
-  const onPlayPause = () => {
-    setIsPlaying(!isPlaying);
-  }
-
-
-  const getCurrentSongIndex = () => {
-    if (currentMusic.songs.length === 0) return -1;
-    return currentMusic.songs.findIndex(e => e.id === currentMusic.song.id) ?? -1
-  }
-
-  const onNextSong = () => {
-    const {songs} = currentMusic;
-    const playlistSongs = songs.length;
-    if (playlistSongs === 0) return;
 
-    const index = getCurrentSongIndex()
-    if (index + 1 < playlistSongs) {
-      updateCurrentMusicBySongId(index + 1)
-    }
+  const play = () => {
+    audioRef.current.play()
+      .catch((e) => console.log('error playing: ', e))
   }
 
-  const onPrevSong = () => {
-    const index = getCurrentSongIndex()
-    if (index > 0) {
-      updateCurrentMusicBySongId(index - 1)
+  function onNextSong() {
+    const nextSong = getNextSong();
+    if (nextSong) {
+      setCurrentMusic({...currentMusic, song: nextSong});
     }
   }
 
-  const updateCurrentMusicBySongId = (songIndex) => {
-    const {playlist, songs} = currentMusic;
-    setIsPlaying(false);
-    setCurrentMusic({songs, playlist, song: songs[songIndex]})
-    setIsPlaying(true);
-  }
-
-  return (
-    <div className="flex flex-row justify-between w-full px-1 z-50">
+  return (<div className="flex flex-row justify-between w-full px-1 z-50">
       <div className="w-[200px]">
         <PlayerCurrentSong {...currentMusic.song} />
       </div>
 
       <div className="grid place-content-center gap-4 flex-1">
         <div className="flex justify-center flex-col items-center">
-          <div className="flex justify-center flex-row flex-nowrap items-center gap-4">
-            <button className="hover:scale-110" onClick={onPrevSong} title="Previous song">
-              <Prev/>
-            </button>
-            <button className="bg-white text-black rounded-full p-2 hover:scale-110" onClick={onPlayPause}>
-              {isPlaying ? <Pause/> : <Play/>}
-            </button>
-            <button className="hover:scale-110" onClick={onNextSong} title="Next song">
-              <Next/>
-            </button>
-          </div>
+          <PlayerControlButtonBar/>
           <PlayerSoundControl audio={audioRef}/>
-          <audio ref={audioRef} onEnded={onNextSong}/>
+          <audio ref={audioRef}
+                 onEnded={onNextSong}
+          />
         </div>
       </div>
 
       <div className="grid place-content-center">
         <PlayerVolumeControl/>
       </div>
-    </div>
-  )
+    </div>)
 }

src/components/PlayerControlButtonBar.tsx

@@ -0,0 +1,43 @@
+import { Next, Pause, Play, Prev } from "@/icons/PlayerIcons";
+import { useCurrentMusic } from "@/hooks/UseCurrentMusic";
+import { usePlayerStore } from "@/store/playerStore";
+
+export function PlayerControlButtonBar() {
+  const {currentMusic, isPlaying, setIsPlaying, setCurrentMusic} = usePlayerStore(state => state);
+  const { getNextSong, getPreviousSong } = useCurrentMusic(currentMusic);
+
+
+  const onPlayPause = () => {
+    if (currentMusic.song === null) return;
+    setIsPlaying(!isPlaying);
+  }
+
+
+  const onNextSong = () => {
+    const nextSong = getNextSong();
+    if (nextSong) {
+      setCurrentMusic({ ...currentMusic, song: nextSong });
+    }
+  }
+
+  const onPrevSong = () => {
+    const prevSong = getPreviousSong();
+    if (prevSong) {
+      setCurrentMusic({ ...currentMusic, song: prevSong });
+    }
+  }
+
+  return (
+    <div className="flex justify-center flex-row flex-nowrap items-center gap-4">
+      <button className="hover:scale-110" onClick={onPrevSong} title="Previous song">
+        <Prev/>
+      </button>
+      <button className="bg-white text-black rounded-full p-2 hover:scale-110" onClick={onPlayPause}>
+        {isPlaying ? <Pause/> : <Play/>}
+      </button>
+      <button className="hover:scale-110" onClick={onNextSong} title="Next song">
+        <Next/>
+      </button>
+    </div>
+  );
+}