From 06b5e556eef8f0da1c5d3d2442b97e761c9fa3df Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sun, 20 Feb 2022 16:54:47 -0800
Subject: [PATCH] not the best solution as dismissing all on ended, but still
 okay

---
 .vscode/settings.json                         |  2 +-
 packages/web/.babelrc                         |  4 +-
 .../web/components/Audio/AudioHandler.tsx     | 45 ++++++++++++-------
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index cc40c2e..5c72ef9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,6 +8,6 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "workbench.colorTheme": "Default Light+",
   "javascript.format.semicolons": "insert",
-  "window.zoomLevel": 1,
+  "window.zoomLevel": 2,
   "trunk.trunkGrayOutNonBlockingIssues": false
 }
diff --git a/packages/web/.babelrc b/packages/web/.babelrc
index c28db9b..c8d00a9 100644
--- a/packages/web/.babelrc
+++ b/packages/web/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["next/babel"],
-  "plugins": ["transform-remove-console"]
-}
+  // "plugins": ["transform-remove-console"]
+}
\ No newline at end of file
diff --git a/packages/web/components/Audio/AudioHandler.tsx b/packages/web/components/Audio/AudioHandler.tsx
index bc0a584..7958b93 100644
--- a/packages/web/components/Audio/AudioHandler.tsx
+++ b/packages/web/components/Audio/AudioHandler.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { configure, GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { useRecoilState, useRecoilValue } from "recoil";
 import {
+  allRelevantContactsAtom,
   allRelevantConversationsAtom,
   audioQueueAtom,
   hasMicPermissionsAtom,
@@ -43,16 +44,42 @@ export default function AudioHandler() {
     useRecoilState(selectedConvoAtom);
 
   const [audioQueue, setAudioQueue] = useRecoilState(audioQueueAtom);
+  const [playerSrc, setPlayerSrc] = useState<string | null>(null);
 
-  function onEndedPlaying(e) {
+  const [speakerToastId, setSpeakerToastId] = useState<string | null>(null);
+  const relevantContacts = useRecoilValue(allRelevantContactsAtom);
+
+  const onEndedPlaying = (e) => {
     // 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();
+
+      // have toast showing who is speaking
+      // find who is speaking if we can
+      const speaker = relevantContacts.get(audioQueue[0]?.senderUserId);
+      const speakingText = speaker
+        ? `${speaker.firstName} speaking`
+        : "someone is speaking";
+      const spToast = toast.loading(speakingText);
+      setSpeakerToastId(spToast);
+    }
+  }, [playerSrc]);
+
   useEffect(() => {
     if (audioQueue.length > 0 && audioQueue[0].audioDataUrl) {
       console.log("Adding clip to Queue");
@@ -80,6 +107,7 @@ export default function AudioHandler() {
     hasMicPermissionsAtom
   );
 
+  // setting up recording permissions
   useEffect(() => {
     try {
       // checking for permissions for recording
@@ -129,8 +157,6 @@ export default function AudioHandler() {
   const [recordingToastId, setRecordingToastId] = useState<string>("");
   const [isRecording, setIsRecording] = useRecoilState(isRecordingAtom);
 
-  const [playerSrc, setPlayerSrc] = useState<string | null>(null);
-
   const startRecording = () => {
     // check if there is a person selected
     if (!selectedConvoId) {
@@ -282,17 +308,6 @@ 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"
-        />
-      )}
-
       <GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges={true} />
     </>
   );