Close incoming Element call toast when viewing the call lobby (#9375)

src/toasts/IncomingCallToast.tsx

@@ -34,6 +34,8 @@ import {
 import { useCall } from "../hooks/useCall";
 import { useRoomState } from "../hooks/useRoomState";
 import { ButtonEvent } from "../components/views/elements/AccessibleButton";
+import { useDispatcher } from "../hooks/useDispatcher";
+import { ActionPayload } from "../dispatcher/payloads";
 
 export const getIncomingCallToastKey = (stateKey: string) => `call_${stateKey}`;
 
@@ -60,6 +62,16 @@ export function IncomingCallToast({ callEvent }: Props) {
         }
     }, [latestEvent, dismissToast]);
 
+    useDispatcher(defaultDispatcher, useCallback((payload: ActionPayload) => {
+        if (
+            payload.action === Action.ViewRoom
+            && payload.room_id === roomId
+            && payload.view_call
+        ) {
+            dismissToast();
+        }
+    }, [roomId, dismissToast]));
+
     const onJoinClick = useCallback((e: ButtonEvent): void => {
         e.stopPropagation();
 

test/toasts/IncomingCallToast-test.tsx

@@ -155,4 +155,18 @@ describe("IncomingCallEvent", () => {
 
         defaultDispatcher.unregister(dispatcherRef);
     });
+
+    it("closes toast when the call lobby is viewed", async () => {
+        renderToast();
+
+        defaultDispatcher.dispatch({
+            action: Action.ViewRoom,
+            room_id: room.roomId,
+            view_call: true,
+        });
+
+        await waitFor(() => expect(toastStore.dismissToast).toHaveBeenCalledWith(
+            getIncomingCallToastKey(call.event.getStateKey()!),
+        ));
+    });
 });