feat: use icon for dictionary audio playback

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,7 +1,18 @@
 import { Meaning } from "@/hooks/useDictionary";
 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 { togglePlayback } = useAudioPlayer(meaning.audio?.uri);
+
+  const handlePronunciation = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+
+    togglePlayback();
+  };
+
   return (
     <div
       key={meaning.meaningOriginal}
@@ -19,12 +30,15 @@ const SearchResponseCard = ({ meaning }: { meaning: Meaning }) => {
               </p>
             )}
           </div>
-          {meaning.audio && (
-            <audio
-              controls
-              src={meaning.audio.uri}
-              className="max-w-28 "
-            ></audio>
+          {meaning.audio?.uri && (
+            <button
+              type="button"
+              onClick={handlePronunciation}
+              className="self-start text-white text-2xl transition-colors hover:text-primary focus-visible:outline-none"
+              aria-label={`Play pronunciation for ${meaning.meaningOriginal}`}
+            >
+              <FontAwesomeIcon icon={faVolumeHigh} />
+            </button>
           )}
         </div>
         <div className="flex flex-row flex-wrap gap-2 mt-2">

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;