refactor: share audio playback hook

Author: binamkayastha

nepalingo-web/src/components/Card.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faVolumeHigh } from "@fortawesome/free-solid-svg-icons";
 import { useLanguage } from "@/hooks/Langauge";
+import useAudioPlayer from "@/hooks/useAudioPlayer";
 
 interface CardProps {
   Word: string;
@@ -22,25 +23,12 @@ const Card: React.FC<CardProps> = ({
   PronounciationUrl,
   viewType,
 }) => {
-  const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
   const { selectedLanguage } = useLanguage();
+  const { togglePlayback } = useAudioPlayer(PronounciationUrl);
 
-  const handlePronunciation = (event: React.MouseEvent) => {
+  const handlePronunciation = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
-    if (PronounciationUrl) {
-      if (audio) {
-        if (!audio.paused) {
-          audio.pause();
-          audio.currentTime = 0;
-        } else {
-          audio.play();
-        }
-      } else {
-        const newAudio = new Audio(PronounciationUrl);
-        setAudio(newAudio);
-        newAudio.play();
-      }
-    }
+    togglePlayback();
   };
 
   return (

nepalingo-web/src/components/SearchResponseCard.tsx

@@ -1,40 +1,16 @@
 import { Meaning } from "@/hooks/useDictionary";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faVolumeHigh } from "@fortawesome/free-solid-svg-icons";
+import useAudioPlayer from "@/hooks/useAudioPlayer";
 
 const SearchResponseCard = ({ meaning }: { meaning: Meaning }) => {
-  const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (audio) {
-        audio.pause();
-        audio.currentTime = 0;
-      }
-    };
-  }, [audio]);
+  const { togglePlayback } = useAudioPlayer(meaning.audio?.uri);
 
   const handlePronunciation = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
 
-    if (!meaning.audio?.uri) {
-      return;
-    }
-
-    if (audio) {
-      if (!audio.paused) {
-        audio.pause();
-        audio.currentTime = 0;
-      } else {
-        audio.currentTime = 0;
-        void audio.play();
-      }
-    } else {
-      const newAudio = new Audio(meaning.audio.uri);
-      setAudio(newAudio);
-      void newAudio.play();
-    }
+    togglePlayback();
   };
 
   return (

nepalingo-web/src/hooks/useAudioPlayer.ts

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useRef } from "react";
+
+const resetAudio = (audio: HTMLAudioElement | null) => {
+  if (!audio) {
+    return;
+  }
+
+  audio.pause();
+  audio.currentTime = 0;
+};
+
+const useAudioPlayer = (audioUrl?: string) => {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const lastUrlRef = useRef<string | undefined>(audioUrl);
+
+  useEffect(() => {
+    return () => {
+      resetAudio(audioRef.current);
+      audioRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!audioUrl) {
+      resetAudio(audioRef.current);
+      audioRef.current = null;
+    } else if (lastUrlRef.current && lastUrlRef.current !== audioUrl) {
+      resetAudio(audioRef.current);
+      audioRef.current = null;
+    }
+
+    lastUrlRef.current = audioUrl;
+  }, [audioUrl]);
+
+  const togglePlayback = useCallback(() => {
+    if (!audioUrl) {
+      return;
+    }
+
+    const existingAudio = audioRef.current;
+
+    if (existingAudio) {
+      if (!existingAudio.paused) {
+        resetAudio(existingAudio);
+      } else {
+        existingAudio.currentTime = 0;
+        const playPromise = existingAudio.play();
+        if (playPromise) {
+          void playPromise.catch(() => undefined);
+        }
+      }
+
+      return;
+    }
+
+    const newAudio = new Audio(audioUrl);
+    audioRef.current = newAudio;
+    const playPromise = newAudio.play();
+    if (playPromise) {
+      void playPromise.catch(() => undefined);
+    }
+  }, [audioUrl]);
+
+  return { togglePlayback };
+};
+
+export default useAudioPlayer;