feat: extract audio state into custom hook

AnthonyPorthouse · Nov 14, 2024 · ab6bd8a · ab6bd8a
1 parent 2fef727
commit ab6bd8a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/Components/MediaPlayer/MediaControls.tsx b/src/Components/MediaPlayer/MediaControls.tsx
@@ -1,4 +1,5 @@
-import { useAudio } from "@hooks/useAudio.js";
+import { useAudioState } from "@hooks/useAudio.js";
+import { useCallback } from "react";
 
 import FullscreenButton from "../MediaControls/FullscreenButton.js";
 import PauseButton from "../MediaControls/PauseButton.js";
@@ -7,15 +8,15 @@ import SkipButton from "../MediaControls/SkipButton.js";
 import StopButton from "../MediaControls/StopButton.js";
 
 function MediaControls() {
-  const audio = useAudio();
+  const { isPaused } = useAudioState();
 
-  const playPauseButton = () => {
-    if (audio?.paused) {
+  const playPauseButton = useCallback(() => {
+    if (isPaused) {
       return <PlayButton />;
     }
 
     return <PauseButton />;
-  };
+  }, [isPaused]);
 
   return (
     <div className={`flex w-full gap-2`}>

diff --git a/src/hooks/useAudio.ts b/src/hooks/useAudio.ts
@@ -4,3 +4,11 @@ import { useContext } from "react";
 export function useAudio() {
   return useContext(AudioContext);
 }
+
+export function useAudioState() {
+  const audio = useAudio();
+
+  return {
+    isPaused: audio?.paused ?? false,
+  };
+}