Hide voip buttons in group rooms in environments with widgets disabled (#12664)

* Hide voip buttons in group rooms in environments with widgets disabled

Signed-off-by: Michael Telatynski <[email protected]>

* Fix test stubs

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

src/components/views/rooms/RoomHeader.tsx

@@ -83,6 +83,7 @@ export default function RoomHeader({
         hasActiveCallSession,
         callOptions,
         showVoiceCallButton,
+        showVideoCallButton,
     } = useRoomCall(room);
 
     const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
@@ -200,39 +201,41 @@ export default function RoomHeader({
             )}
         </>
     );
-
-    let voiceCallButton: JSX.Element | undefined;
-    if (showVoiceCallButton) {
-        voiceCallButton = (
-            <Tooltip label={voiceCallDisabledReason ?? _t("voip|voice_call")}>
-                <IconButton
-                    // We need both: isViewingCall and isConnectedToCall
-                    //  - in the Lobby we are viewing a call but are not connected to it.
-                    //  - in pip view we are connected to the call but not viewing it.
-                    disabled={!!voiceCallDisabledReason || isViewingCall || isConnectedToCall}
-                    aria-label={voiceCallDisabledReason ?? _t("voip|voice_call")}
-                    onClick={(ev) => voiceCallClick(ev, callOptions[0])}
-                >
-                    <VoiceCallIcon />
-                </IconButton>
-            </Tooltip>
-        );
-    }
-
+    let voiceCallButton: JSX.Element | undefined = (
+        <Tooltip label={voiceCallDisabledReason ?? _t("voip|voice_call")}>
+            <IconButton
+                // We need both: isViewingCall and isConnectedToCall
+                //  - in the Lobby we are viewing a call but are not connected to it.
+                //  - in pip view we are connected to the call but not viewing it.
+                disabled={!!voiceCallDisabledReason || isViewingCall || isConnectedToCall}
+                aria-label={voiceCallDisabledReason ?? _t("voip|voice_call")}
+                onClick={(ev) => voiceCallClick(ev, callOptions[0])}
+            >
+                <VoiceCallIcon />
+            </IconButton>
+        </Tooltip>
+    );
     const closeLobbyButton = (
         <Tooltip label={_t("voip|close_lobby")}>
             <IconButton onClick={toggleCall} aria-label={_t("voip|close_lobby")}>
                 <CloseCallIcon />
             </IconButton>
         </Tooltip>
     );
-    let videoCallButton = startVideoCallButton;
+    let videoCallButton: JSX.Element | undefined = startVideoCallButton;
     if (isConnectedToCall) {
         videoCallButton = toggleCallButton;
     } else if (isViewingCall) {
         videoCallButton = closeLobbyButton;
     }
 
+    if (!showVideoCallButton) {
+        videoCallButton = undefined;
+    }
+    if (!showVoiceCallButton) {
+        voiceCallButton = undefined;
+    }
+
     return (
         <>
             <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">

src/hooks/room/useRoomCall.ts

@@ -41,6 +41,8 @@ import { Action } from "../../dispatcher/actions";
 import { CallStore, CallStoreEvent } from "../../stores/CallStore";
 import { isVideoRoom } from "../../utils/video-rooms";
 import { useGuestAccessInformation } from "./useGuestAccessInformation";
+import SettingsStore from "../../settings/SettingsStore";
+import { UIFeature } from "../../settings/UIFeature";
 
 export enum PlatformCallType {
     ElementCall,
@@ -83,6 +85,7 @@ export const useRoomCall = (
     isConnectedToCall: boolean;
     hasActiveCallSession: boolean;
     callOptions: PlatformCallType[];
+    showVideoCallButton: boolean;
     showVoiceCallButton: boolean;
 } => {
     // settings
@@ -268,8 +271,14 @@ export const useRoomCall = (
     }, [isViewingCall, room.roomId]);
 
     // We hide the voice call button if it'd have the same effect as the video call button
-    const hideVoiceCallButton =
+    let hideVoiceCallButton =
         isManagedHybridWidgetEnabled(room.roomId) || !callOptions.includes(PlatformCallType.LegacyCall);
+    let hideVideoCallButton = false;
+    // We hide both buttons if they require widgets but widgets are disabled.
+    if (memberCount > 2 && !SettingsStore.getValue(UIFeature.Widgets)) {
+        hideVoiceCallButton = true;
+        hideVideoCallButton = true;
+    }
 
     /**
      * We've gone through all the steps
@@ -285,5 +294,6 @@ export const useRoomCall = (
         hasActiveCallSession: hasActiveCallSession,
         callOptions,
         showVoiceCallButton: !hideVoiceCallButton,
+        showVideoCallButton: !hideVideoCallButton,
     };
 };

test/components/views/rooms/RoomHeader-test.tsx

@@ -61,6 +61,7 @@ import { _t } from "../../../../src/languageHandler";
 import * as UseCall from "../../../../src/hooks/useCall";
 import { SdkContextClass } from "../../../../src/contexts/SDKContext";
 import WidgetStore, { IApp } from "../../../../src/stores/WidgetStore";
+import { UIFeature } from "../../../../src/settings/UIFeature";
 
 jest.mock("../../../../src/utils/ShieldUtils");
 
@@ -255,7 +256,47 @@ describe("RoomHeader", () => {
         expect(queryByLabelText(container, "Voice call")).not.toBeInTheDocument();
     });
 
+    describe("UIFeature.Widgets enabled (default)", () => {
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature == UIFeature.Widgets);
+        });
+
+        it("should show call buttons in a room with 2 members", () => {
+            mockRoomMembers(room, 2);
+            const { container } = render(<RoomHeader room={room} />, getWrapper());
+            expect(getByLabelText(container, "Video call")).toBeInTheDocument();
+        });
+
+        it("should show call buttons in a room with more than 2 members", () => {
+            mockRoomMembers(room, 3);
+            const { container } = render(<RoomHeader room={room} />, getWrapper());
+            expect(getByLabelText(container, "Video call")).toBeInTheDocument();
+        });
+    });
+
+    describe("UIFeature.Widgets disabled", () => {
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => false);
+        });
+
+        it("should show call buttons in a room with 2 members", () => {
+            mockRoomMembers(room, 2);
+            const { container } = render(<RoomHeader room={room} />, getWrapper());
+            expect(getByLabelText(container, "Video call")).toBeInTheDocument();
+        });
+
+        it("should not show call buttons in a room with more than 2 members", () => {
+            mockRoomMembers(room, 3);
+            const { container } = render(<RoomHeader room={room} />, getWrapper());
+            expect(queryByLabelText(container, "Video call")).not.toBeInTheDocument();
+        });
+    });
+
     describe("groups call disabled", () => {
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature == UIFeature.Widgets);
+        });
+
         it("you can't call if you're alone", () => {
             mockRoomMembers(room, 1);
             const { container } = render(<RoomHeader room={room} />, getWrapper());
@@ -313,7 +354,9 @@ describe("RoomHeader", () => {
 
     describe("group call enabled", () => {
         beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature === "feature_group_calls");
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                (feature) => feature === "feature_group_calls" || feature == UIFeature.Widgets,
+            );
         });
 
         it("renders only the video call element", async () => {
@@ -353,7 +396,7 @@ describe("RoomHeader", () => {
 
         it("clicking on ongoing (unpinned) call re-pins it", () => {
             mockRoomMembers(room, 3);
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature == UIFeature.Widgets);
             // allow calls
             jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
             jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockReturnValue(false);