Add support for playing a sound when the user exits a call.

src/room/GroupCallView.tsx

@@ -42,6 +42,9 @@ 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";
+
 declare global {
   interface Window {
     rtcSession?: MatrixRTCSession;
@@ -72,6 +75,22 @@ 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]);
+
   // This should use `useEffectEvent` (only available in experimental versions)
   useEffect(() => {
     if (memberships.length >= MUTE_PARTICIPANT_COUNT)
@@ -214,12 +233,11 @@ export const GroupCallView: FC<Props> = ({
 
   const onLeave = useCallback(
     (leaveError?: Error): void => {
-      setLeaveError(leaveError);
-      setLeft(true);
-
       // 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);
+      setLeaveError(leaveError);
       PosthogAnalytics.instance.eventCallEnded.track(
         rtcSession.room.roomId,
         rtcSession.memberships.length,
@@ -227,9 +245,11 @@ 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.
-      leaveRTCSession(rtcSession)
       .then(() => {
+        setLeft(true);
         if (
           !isPasswordlessUser &&
           !confineToRoom &&
@@ -308,6 +328,14 @@ 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}
@@ -321,6 +349,7 @@ export const GroupCallView: FC<Props> = ({
         participantCount={participantCount}
         onShareClick={onShareClick}
       />
+      {callEndedAudio}
     </>
   );
 
@@ -340,6 +369,7 @@ export const GroupCallView: FC<Props> = ({
           //otelGroupCallMembership={otelGroupCallMembership}
           onShareClick={onShareClick}
         />
+        {callEndedAudio}
       </>
     );
   } else if (left && widget === null) {
@@ -357,6 +387,7 @@ export const GroupCallView: FC<Props> = ({
       leaveError
     ) {
       return (
+        <>
           <CallEndedView
             endedCallId={rtcSession.room.roomId}
             client={client}
@@ -364,7 +395,14 @@ 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 {
       // If the user is a regular user, we'll have sent them back to the homepage,
@@ -375,7 +413,7 @@ export const GroupCallView: FC<Props> = ({
   } else if (left && widget !== null) {
     // Left in widget mode:
     if (!returnToLobby) {
-      return null;
+      return callEndedAudio;
     }
   } else if (preload || skipLobby) {
     return null;

src/rtcSessionHelpers.ts

@@ -120,6 +120,7 @@ export async function enterRTCSession(
 
 const widgetPostHangupProcedure = async (
   widget: WidgetHelpers,
+  promiseBeforeHangup?: Promise<unknown>,
 ): Promise<void> => {
   // we need to wait until the callEnded event is tracked on posthog.
   // Otherwise the iFrame gets killed before the callEnded event got tracked.
@@ -132,6 +133,8 @@ const widgetPostHangupProcedure = async (
     logger.error("Failed to set call widget `alwaysOnScreen` to false", e);
   }
 
+  // Wait for any last bits before hanging up.
+  await promiseBeforeHangup;
   // We send the hangup event after the memberships have been updated
   // calling leaveRTCSession.
   // We need to wait because this makes the client hosting this widget killing the IFrame.
@@ -140,9 +143,12 @@ const widgetPostHangupProcedure = async (
 
 export async function leaveRTCSession(
   rtcSession: MatrixRTCSession,
+  promiseBeforeHangup?: Promise<unknown>,
 ): Promise<void> {
   await rtcSession.leaveRoomSession();
   if (widget) {
-    await widgetPostHangupProcedure(widget);
+    await widgetPostHangupProcedure(widget, promiseBeforeHangup);
+  } else {
+    await promiseBeforeHangup;
   }
 }