Port GroupCallView to useAudioContext

src/room/GroupCallView.tsx

@@ -41,9 +41,9 @@ import { InviteModal } from "./InviteModal";
 import { useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { Link } from "../button/Link";
-
-import leftCallSoundMp3 from "../sound/left_call.mp3";
-import leftCallSoundOgg from "../sound/left_call.ogg";
+import { useAudioContext } from "../useAudioContext";
+import { CallEventAudioSounds } from "./CallEventAudioRenderer";
+import { useLatest } from "../useLatest";
 
 declare global {
   interface Window {
@@ -74,23 +74,12 @@ export const GroupCallView: FC<Props> = ({
 }) => {
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const isJoined = useMatrixRTCSessionJoinState(rtcSession);
-
-  // Only used in widget mode.
-  const leaveSound = useRef<HTMLAudioElement|null>(null);
-  const playLeaveSound = useCallback(async () => {
-    if (!leaveSound.current) {
-      return;
-    }
-    const ended = new Promise<void>(r => {
-      leaveSound.current?.addEventListener("ended", () => r());
-    });
-    console.log('Playing');
-    await leaveSound.current.play();
-    console.log('started playing');
-    await ended;
-    console.log('ended');
-  }, [leaveSound]);
-
+  const leaveSoundContext = useLatest(
+    useAudioContext({
+      sounds: CallEventAudioSounds,
+      latencyHint: "interactive",
+    }),
+  );
   // This should use `useEffectEvent` (only available in experimental versions)
   useEffect(() => {
     if (memberships.length >= MUTE_PARTICIPANT_COUNT)
@@ -233,10 +222,11 @@ export const GroupCallView: FC<Props> = ({
 
   const onLeave = useCallback(
     (leaveError?: Error): void => {
+      const audioPromise = leaveSoundContext.current?.playSound("left");
       // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
       // therefore we want the event to be sent instantly without getting queued/batched.
       const sendInstantly = !!widget;
-      console.log('hangup!', sendInstantly);
+      console.log("hangup!", sendInstantly);
       setLeaveError(leaveError);
       PosthogAnalytics.instance.eventCallEnded.track(
         rtcSession.room.roomId,
@@ -245,24 +235,27 @@ export const GroupCallView: FC<Props> = ({
         rtcSession,
       );
 
-      // Wait for the sound in widget mode (it's not long)
-      leaveRTCSession(rtcSession, sendInstantly ? playLeaveSound() : undefined)
-      // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
-      .then(() => {
-        setLeft(true);
-        if (
-          !isPasswordlessUser &&
-          !confineToRoom &&
-          !PosthogAnalytics.instance.isEnabled()
-        ) {
-          history.push("/");
-        }
-      })
-      .catch((e) => {
-        logger.error("Error leaving RTC session", e);
-      });
+      leaveRTCSession(
+        rtcSession,
+        // Wait for the sound in widget mode (it's not long)
+        sendInstantly && audioPromise ? audioPromise : undefined,
+      )
+        // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
+        .then(() => {
+          setLeft(true);
+          if (
+            !isPasswordlessUser &&
+            !confineToRoom &&
+            !PosthogAnalytics.instance.isEnabled()
+          ) {
+            history.push("/");
+          }
+        })
+        .catch((e) => {
+          logger.error("Error leaving RTC session", e);
+        });
     },
-    [rtcSession, isPasswordlessUser, confineToRoom, history],
+    [rtcSession, isPasswordlessUser, confineToRoom, leaveSoundContext, history],
   );
 
   useEffect(() => {
@@ -328,14 +321,6 @@ export const GroupCallView: FC<Props> = ({
       onDismiss={onDismissInviteModal}
     />
   );
-  const callEndedAudio = <audio
-    ref={leaveSound}
-    preload="auto"
-    hidden
-  >
-    <source src={leftCallSoundOgg} type="audio/ogg; codecs=vorbis" />
-    <source src={leftCallSoundMp3} type="audio/mpeg" />
-  </audio>;
   const lobbyView = (
     <>
       {shareModal}
@@ -349,7 +334,6 @@ export const GroupCallView: FC<Props> = ({
         participantCount={participantCount}
         onShareClick={onShareClick}
       />
-      {callEndedAudio}
     </>
   );
 
@@ -369,7 +353,6 @@ export const GroupCallView: FC<Props> = ({
           //otelGroupCallMembership={otelGroupCallMembership}
           onShareClick={onShareClick}
         />
-        {callEndedAudio}
       </>
     );
   } else if (left && widget === null) {
@@ -395,13 +378,8 @@ export const GroupCallView: FC<Props> = ({
             confineToRoom={confineToRoom}
             leaveError={leaveError}
             reconnect={onReconnect}
-          /><audio
-            autoPlay
-            hidden
-          >
-          <source src={leftCallSoundOgg} type="audio/ogg; codecs=vorbis" />
-          <source src={leftCallSoundMp3} type="audio/mpeg" />
-        </audio>;
+          />
+          ;
         </>
       );
     } else {
@@ -413,7 +391,7 @@ export const GroupCallView: FC<Props> = ({
   } else if (left && widget !== null) {
     // Left in widget mode:
     if (!returnToLobby) {
-      return callEndedAudio;
+      return null;
     }
   } else if (preload || skipLobby) {
     return null;