Merge pull request #239 from nepalcodes/issue/230-dictionary-audio-icon

feat: use icon for dictionary audio playback

Author: binamkayastha

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+.python_modules/

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,28 @@ 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();
+  };
+
+  const PronunciationButton = () => {
+    if (!PronounciationUrl) {
+      return null;
     }
+
+    return (
+      <button
+        type="button"
+        onClick={handlePronunciation}
+        className="absolute right-4 bottom-4 z-10 text-white"
+      >
+        <FontAwesomeIcon icon={faVolumeHigh} />
+      </button>
+    );
   };
 
   return (
@@ -72,14 +76,7 @@ const Card: React.FC<CardProps> = ({
             <p className="text-lg text-white sm:text-lg md:text-xl lg:text-2xl">
               {Pronunciation}
             </p>
-            {PronounciationUrl && (
-              <button
-                onClick={handlePronunciation}
-                className="absolute right-4 bottom-4 z-10 text-white"
-              >
-                <FontAwesomeIcon icon={faVolumeHigh} />
-              </button>
-            )}
+            <PronunciationButton />
           </div>
           <div className="relative w-full h-[30%] rounded-b-2xl overflow-hidden flex items-center justify-center">
             {ImageUrl && (
@@ -125,14 +122,7 @@ const Card: React.FC<CardProps> = ({
             <p className="text-lg sm:text-lg md:text-xl lg:text-2xl">
               {Pronunciation}
             </p>
-            {PronounciationUrl && (
-              <button
-                onClick={handlePronunciation}
-                className="absolute right-4 bottom-4 z-10 text-white"
-              >
-                <FontAwesomeIcon icon={faVolumeHigh} />
-              </button>
-            )}
+            <PronunciationButton />
           </div>
           <div className="relative h-[70%] w-full rounded-b-2xl overflow-hidden flex items-center justify-center">
             {ImageUrl && (

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,69 @@
+import { useCallback, useEffect, useState } from "react";
+
+const resetAudio = (audio: HTMLAudioElement | null) => {
+  if (!audio) {
+    return;
+  }
+
+  audio.pause();
+  audio.currentTime = 0;
+};
+
+const useAudioPlayer = (audioUrl?: string) => {
+  const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
+
+  const clearAudio = useCallback(() => {
+    setAudio((currentAudio) => {
+      if (currentAudio) {
+        resetAudio(currentAudio);
+      }
+
+      return null;
+    });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      resetAudio(audio);
+    };
+  }, [audio]);
+
+  useEffect(() => {
+    clearAudio();
+  }, [audioUrl, clearAudio]);
+
+  const togglePlayback = useCallback(() => {
+    if (!audioUrl) {
+      return;
+    }
+
+    setAudio((currentAudio) => {
+      if (currentAudio) {
+        if (!currentAudio.paused) {
+          resetAudio(currentAudio);
+          return null;
+        }
+
+        currentAudio.currentTime = 0;
+        const playPromise = currentAudio.play();
+        if (playPromise) {
+          void playPromise.catch(() => undefined);
+        }
+
+        return currentAudio;
+      }
+
+      const newAudio = new Audio(audioUrl);
+      const playPromise = newAudio.play();
+      if (playPromise) {
+        void playPromise.catch(() => undefined);
+      }
+
+      return newAudio;
+    });
+  }, [audioUrl]);
+
+  return { togglePlayback };
+};
+
+export default useAudioPlayer;