Start voice call in PiP (not in fullscreen) (#34055)

* start voice call in pip

* Update jest.config.ts

* fix "join" button to use correct intent

* Add regression test for join button

* Update RoomHeader-test.tsx

* fmt

* Add playwright test

* Fix expected intent on "join" button press

* Add additional pip check to exising:
`should be able to join a ${callType} call in progress` test

* Update RoomHeader-test.tsx

apps/web/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx

@@ -609,6 +609,30 @@ describe("RoomHeader", () => {
             expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
         });
 
+        it("clicking the join button of an ongoing video call joins as a video call", async () => {
+            const user = userEvent.setup();
+            mockRoomMembers(room, 3);
+            jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3, CallType.Video, true));
+            render(<RoomHeader room={room} />, getWrapper());
+
+            const dispatcherSpy = jest.spyOn(dispatcher, "dispatch").mockImplementation();
+            await user.click(getByLabelText(document.body, "Join video call"));
+
+            expect(dispatcherSpy).toHaveBeenCalledWith(expect.objectContaining({ view_call: true, voiceOnly: false }));
+        });
+
+        it("clicking the join button of an ongoing voice call joins as a voice call", async () => {
+            const user = userEvent.setup();
+            mockRoomMembers(room, 3);
+            jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3, CallType.Voice, true));
+            render(<RoomHeader room={room} />, getWrapper());
+
+            const dispatcherSpy = jest.spyOn(dispatcher, "dispatch").mockImplementation();
+            await user.click(getByLabelText(document.body, "Join voice call"));
+
+            expect(dispatcherSpy).toHaveBeenCalledWith(expect.objectContaining({ view_call: true, voiceOnly: true }));
+        });
+
         it("join button is disabled if there is an other ongoing call", async () => {
             mockRoomMembers(room, 3);
             // Mock CallStore to return a call with 3 participants
@@ -919,6 +943,7 @@ function createMockCall(
     roomId: string = "!1:example.org",
     participantCount: number = 0,
     callType: CallType = CallType.Video,
+    isElementCall: boolean = false,
 ): Call {
     const participants = new Map();
 
@@ -936,7 +961,7 @@ function createMockCall(
     return {
         roomId,
         participants,
-        widget: { id: "test-widget" },
+        widget: { id: "test-widget", type: isElementCall ? "m.call" : undefined },
         connectionState: "disconnected",
         callType,
         on: jest.fn(),