From ab6bd8aecb05c96a8d107555a49c274f311b95bc Mon Sep 17 00:00:00 2001
From: Anthony Porthouse <anthony@porthou.se>
Date: Thu, 14 Nov 2024 10:23:28 +0000
Subject: [PATCH] feat: extract audio state into custom hook

---
 src/Components/MediaPlayer/MediaControls.tsx | 11 ++++++-----
 src/hooks/useAudio.ts                        |  8 ++++++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/Components/MediaPlayer/MediaControls.tsx b/src/Components/MediaPlayer/MediaControls.tsx
index 4cd940a..32408bc 100644
--- 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
index 51e2f79..c247ca7 100644
--- 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,
+  };
+}