Remember whether sidebar is shown for calls when switching rooms (#30262)

* Remember whether sidebar is shown for calls when switching rooms

Stores the sidebar state per-room in LegacyCallHandler, along with other details about calls.

* Hide the Show/Hide Sidebar from the Picture-in-Picture preview

The toggle sidebar button currently does nothing in PIP mode, since PIP mode never shows a sidebar (even when the call is made fullscreen from the PIP preview)

* Add test for Show/Hide Sidebar feature

* Add more tests for LegacyCallView and LegacyCallViewForRoom

Also, fix issue where LegacyCallViewForRoom used roomId and not callId for checking for sidebar state

test/unit-tests/components/views/voip/LegacyCallView-test.tsx

@@ -8,9 +8,12 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { render } from "jest-matrix-react";
 import { type MatrixCall } from "matrix-js-sdk/src/matrix";
+import { type CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
 
 import LegacyCallView from "../../../../../src/components/views/voip/LegacyCallView";
 import { stubClient } from "../../../../test-utils";
+import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 
 describe("LegacyCallView", () => {
     it("should exit full screen on unmount", () => {
@@ -32,9 +35,70 @@ describe("LegacyCallView", () => {
             isScreensharing: jest.fn().mockReturnValue(false),
         } as unknown as MatrixCall;
 
-        const { unmount } = render(<LegacyCallView call={call} />);
+        const { unmount } = render(<LegacyCallView call={call} sidebarShown={false} />);
         expect(document.exitFullscreen).not.toHaveBeenCalled();
         unmount();
         expect(document.exitFullscreen).toHaveBeenCalled();
     });
+
+    it("should show/hide the sidebar based on the sidebarShown prop", async () => {
+        stubClient();
+
+        const call = {
+            roomId: "test-room",
+            on: jest.fn(),
+            removeListener: jest.fn(),
+            getFeeds: jest.fn().mockReturnValue(
+                [{ local: true }, { local: false }, { local: true, screenshare: true }].map(
+                    (x, i) =>
+                        ({
+                            stream: { id: "test-" + i },
+                            addListener: jest.fn(),
+                            removeListener: jest.fn(),
+                            getMember: jest.fn(),
+                            isAudioMuted: jest.fn().mockReturnValue(true),
+                            isVideoMuted: jest.fn().mockReturnValue(true),
+                            isLocal: jest.fn().mockReturnValue(x.local),
+                            purpose: x.screenshare && SDPStreamMetadataPurpose.Screenshare,
+                        }) as unknown as CallFeed,
+                ),
+            ),
+            isLocalOnHold: jest.fn().mockReturnValue(false),
+            isRemoteOnHold: jest.fn().mockReturnValue(false),
+            isMicrophoneMuted: jest.fn().mockReturnValue(true),
+            isLocalVideoMuted: jest.fn().mockReturnValue(true),
+            isScreensharing: jest.fn().mockReturnValue(true),
+            noIncomingFeeds: jest.fn().mockReturnValue(false),
+            opponentSupportsSDPStreamMetadata: jest.fn().mockReturnValue(true),
+        } as unknown as MatrixCall;
+        DMRoomMap.setShared({
+            getUserIdForRoomId: jest.fn().mockReturnValue("test-user"),
+        } as unknown as DMRoomMap);
+
+        const { container, rerender } = render(<LegacyCallView call={call} sidebarShown={true} />);
+        expect(container.querySelector(".mx_LegacyCallViewSidebar")).toBeTruthy();
+        rerender(<LegacyCallView call={call} sidebarShown={true} />);
+        expect(container.querySelector(".mx_LegacyCallViewSidebar")).toBeTruthy();
+    });
+
+    it("should not show the sidebar button in picture-in-picture mode", async () => {
+        stubClient();
+
+        const call = {
+            on: jest.fn(),
+            removeListener: jest.fn(),
+            getFeeds: jest.fn().mockReturnValue([]),
+            isLocalOnHold: jest.fn().mockReturnValue(false),
+            isRemoteOnHold: jest.fn().mockReturnValue(false),
+            isMicrophoneMuted: jest.fn().mockReturnValue(false),
+            isLocalVideoMuted: jest.fn().mockReturnValue(false),
+            isScreensharing: jest.fn().mockReturnValue(false),
+        } as unknown as MatrixCall;
+        DMRoomMap.setShared({
+            getUserIdForRoomId: jest.fn().mockReturnValue("test-user"),
+        } as unknown as DMRoomMap);
+
+        const { container } = render(<LegacyCallView call={call} sidebarShown={false} pipMode={true} />);
+        expect(container.querySelector(".mx_LegacyCallViewButtons_button_sidebar")).toBeFalsy();
+    });
 });

test/unit-tests/components/views/voip/LegacyCallViewForRoom-test.tsx

@@ -0,0 +1,72 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler";
+
+import LegacyCallView from "../../../../../src/components/views/voip/LegacyCallView";
+import LegacyCallViewForRoom from "../../../../../src/components/views/voip/LegacyCallViewForRoom";
+import { mkStubRoom, stubClient } from "../../../../test-utils";
+import DMRoomMap from "../../../../../src/utils/DMRoomMap";
+import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
+import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
+import LegacyCallHandler from "../../../../../src/LegacyCallHandler";
+
+jest.mock("../../../../../src/components/views/voip/LegacyCallView", () => jest.fn(() => "LegacyCallView"));
+
+describe("LegacyCallViewForRoom", () => {
+    const LegacyCallViewMock = LegacyCallView as unknown as jest.Mock;
+    beforeEach(() => {
+        LegacyCallViewMock.mockClear();
+    });
+    it("should remember sidebar state, defaulting to shown", async () => {
+        stubClient();
+
+        const callHandler = new LegacyCallHandler();
+        callHandler.start();
+        jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(() => callHandler);
+
+        const call = new MatrixCall({
+            client: MatrixClientPeg.safeGet(),
+            roomId: "test-room",
+        });
+        DMRoomMap.setShared({
+            getUserIdForRoomId: jest.fn().mockReturnValue("test-user"),
+        } as unknown as DMRoomMap);
+
+        const room = mkStubRoom(call.roomId, "room", MatrixClientPeg.safeGet());
+        MatrixClientPeg.safeGet().getRoom = jest.fn().mockReturnValue(room);
+        const cli = MatrixClientPeg.safeGet();
+        cli.emit(CallEventHandlerEvent.Incoming, call);
+
+        const { rerender } = render(
+            <LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />,
+        );
+
+        let props = LegacyCallViewMock.mock.lastCall![0];
+        expect(props.sidebarShown).toBeTruthy(); // Sidebar defaults to shown
+
+        props.setSidebarShown(false); // Hide the sidebar
+
+        rerender(<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />);
+
+        console.log(LegacyCallViewMock.mock);
+
+        props = LegacyCallViewMock.mock.lastCall![0];
+        expect(props.sidebarShown).toBeFalsy();
+
+        rerender(<div> </div>); // Destroy the LegacyCallViewForRoom and LegacyCallView
+        LegacyCallViewMock.mockClear(); // Drop stored LegacyCallView props
+
+        rerender(<LegacyCallViewForRoom roomId={call.roomId} resizeNotifier={new ResizeNotifier()} />);
+
+        props = LegacyCallViewMock.mock.lastCall![0];
+        expect(props.sidebarShown).toBeFalsy(); // Value was remembered
+    });
+});