fixing some bugs making it more feasible

packages/web/components/Audio/AudioHandler.tsx

@@ -50,24 +50,23 @@ export default function AudioHandler() {
   const relevantContacts = useRecoilValue(allRelevantContactsAtom);
 
   const onEndedPlaying = (e) => {
+    console.log('done playing')
+    toast.dismiss()
+
     // remove from queue and the queue manager will handle the rest
     setAudioQueue((prevQueue) => {
       const newQueue: AudioClip[] = [...prevQueue];
       newQueue.shift();
       return newQueue;
     });
-
-    console.log('done playing')
-    toast.dismiss()
   }
-
   // main effect to play with js
   useEffect(() => {
     if (playerSrc) {
       // play current audio clip
-      const audio = new Audio(playerSrc);
-      audio.onended = onEndedPlaying;
-      audio.play();
+      // const audio = new Audio(playerSrc);
+      // audio.onended = onEndedPlaying;
+      // audio.play();
 
       // have toast showing who is speaking
       // find who is speaking if we can
@@ -308,6 +307,17 @@ export default function AudioHandler() {
 
   return (
     <>
+    {playerSrc && (
+        <AudioPlayer
+          autoPlay
+          src={playerSrc}
+          onPlay={(e) => console.log("onPlay")}
+          showSkipControls={true}
+          onEnded={onEndedPlaying}
+          className="w-screen flex flex-row fixed bottom-0 invisible"
+        />
+      )}
+      
       <GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges={true} />
     </>
   );

packages/web/components/MainTabsOrPages/KeyboardShortcutHandler.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { GlobalHotKeys, KeyMap, configure } from "react-hotkeys";
 import { selectedConvoAtom, audioQueueAtom } from "../../recoil/main";
 import { useSetRecoilState } from "recoil";
+import toast from 'react-hot-toast'
 
 export default function KeyboardShortcutHandler() {
   const router = useRouter();
@@ -20,6 +21,8 @@ export default function KeyboardShortcutHandler() {
 
     setSelectedPriorityConvo(null);
     setAudioQueue([]);
+
+    toast.dismiss()
   };
 
   const keyMap: KeyMap = {