Improve internal model of ringing, expose ringing intent to call UI

I found our code's internal model of ringing a little overgrown (it had superfluous states like 'unknown') and difficult to extend with metadata or callbacks relating to ring attempts. By modeling ringing instead as a stream of ring attempts, where each attempt has an intent, a recipient, and an eventual outcome (accept/decline/timeout), I find it more natural to work with.

This makes room for a future 'try again' callback to allow ringing someone again after a timeout, and also forced me to look for a simpler solution to the duplicate leave sound effects. I exposed the intent of the ringing attempt to the call UI so I can later use it in the header.

src/room/GroupCallView.test.tsx

@@ -251,7 +251,7 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn
   expect(leaveRTCSession).toHaveBeenCalledOnce();
 });
 
-test("Should close widget when all other left and have time to play a sound", async () => {
+test("Should close widget when all other left and play a sound", async () => {
   const user = userEvent.setup();
   let widgetClosedCalled = false;
   const { promise: widgetClosedPromise, resolve: widgetClosedResolver } =
@@ -289,46 +289,13 @@ test("Should close widget when all other left and have time to play a sound", as
   expect(widgetClosedCalled).toBeFalsy();
   resolvePlaySound.resolve();
 
-  // Expect the leave sound to be played but silent (volumeOverwrite = 0)
-  // The allOthersLeft effect should already play a leave sound for the last user in the call.
-  expect(playSound).toHaveBeenCalledWith("left", 0);
+  expect(playSound).toHaveBeenCalledWith("left");
   await widgetClosedPromise;
   await flushPromises();
   expect(widgetClosedCalled).toBeTruthy();
   expect(widgetStopMock).toHaveBeenCalledOnce();
 }, 80000);
 
-test("Should close widget when all other left", async () => {
-  const user = userEvent.setup();
-  const widgetClosedCalled = Promise.withResolvers<void>();
-  const widgetSendMock = vi.fn().mockImplementation((action: string) => {
-    if (action === ElementWidgetActions.Close) {
-      widgetClosedCalled.resolve();
-    }
-  });
-  const widgetStopMock = vi.fn().mockResolvedValue(undefined);
-  const widget = {
-    api: {
-      setAlwaysOnScreen: vi.fn().mockResolvedValue(true),
-      transport: {
-        send: widgetSendMock,
-        reply: vi.fn().mockResolvedValue(undefined),
-        stop: widgetStopMock,
-      } as unknown as ITransport,
-    } as Partial<WidgetHelpers["api"]>,
-    lazyActions: new LazyEventEmitter(),
-  };
-
-  const { getByText } = createGroupCallView(widget as WidgetHelpers);
-  const leaveButton = getByText("SimulateOtherLeft");
-  await user.click(leaveButton);
-  await flushPromises();
-
-  await widgetClosedCalled.promise;
-  await flushPromises();
-  expect(widgetStopMock).toHaveBeenCalledOnce();
-});
-
 test("Should not close widget when auto leave due to error", async () => {
   const user = userEvent.setup();
 

src/room/GroupCallView.tsx

@@ -318,25 +318,12 @@ export const GroupCallView: FC<Props> = ({
     (
       reason: "timeout" | "user" | "allOthersLeft" | "decline" | "error",
     ): void => {
-      let audioPromise: Promise<void> | undefined = undefined;
-      switch (reason) {
-        case "allOthersLeft":
-          // When "allOthersLeft", the leaveSoundEffect$ in CallEventAudioRenderer
-          // already plays the "left" sound when the remote participant's media
-          // disappears. We play it here silenced (volumeOverwrite = 0) so we have the right duration in the audioPromise.
-          // (used to destory the widget)
-          audioPromise = leaveSoundContext.current?.playSound("left", 0);
-          break;
-        case "timeout":
-        case "decline":
-          audioPromise = leaveSoundContext.current?.playSound(reason);
-          break;
-        default:
-          audioPromise = leaveSoundContext.current?.playSound("left");
-      }
+      let playSound: CallEventSounds = "left";
+      if (reason === "timeout" || reason === "decline") playSound = reason;
 
       setJoined(false);
       setLeft(true);
+      const audioPromise = leaveSoundContext.current?.playSound(playSound);
 
       // We need to wait until the callEnded event is tracked on PostHog,
       // otherwise the iframe may get killed first.

src/room/InCallView.tsx

@@ -266,7 +266,7 @@ export const InCallView: FC<InCallViewProps> = ({
     () => void toggleRaisedHand(),
   );
 
-  const ringing = useBehavior(vm.ringing$);
+  const ringingIntent = useBehavior(vm.ringingIntent$);
   const audioParticipants = useBehavior(vm.livekitRoomItems$);
   const participantCount = useBehavior(vm.participantCount$);
   const reconnecting = useBehavior(vm.reconnecting$);
@@ -289,7 +289,7 @@ export const InCallView: FC<InCallViewProps> = ({
   // While ringing, loop the ringtone
   useEffect((): void | (() => void) => {
     const audio = latestPickupPhaseAudio.current;
-    if (ringing && audio) {
+    if (ringingIntent !== null && audio) {
       const endSound = audio.playSoundLooping(
         "waiting",
         audio.soundDuration["waiting"] ?? 1,
@@ -300,7 +300,7 @@ export const InCallView: FC<InCallViewProps> = ({
         });
       };
     }
-  }, [ringing, latestPickupPhaseAudio]);
+  }, [ringingIntent, latestPickupPhaseAudio]);
 
   // iOS Safari doesn't reliably fire `click` on plain <div>s, so we listen
   // for `pointerup` instead. Scrolls end in `pointercancel`, not `pointerup`,