Respect UIFeature.Voip (#29873)

* respect UIFeature.Voip

* Add unit tests

* reset sdk and mocks

* Update RoomHeader-test.tsx.snap

* use useSettingValue

* lint

src/hooks/room/useRoomCall.tsx

@@ -10,7 +10,7 @@ import { type Room } from "matrix-js-sdk/src/matrix";
 import React, { type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 
-import { useFeatureEnabled } from "../useSettings";
+import { useFeatureEnabled, useSettingValue } from "../useSettings";
 import SdkConfig from "../../SdkConfig";
 import { useEventEmitter, useEventEmitterState } from "../useEventEmitter";
 import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
@@ -33,7 +33,6 @@ 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";
 import { BetaPill } from "../../components/views/beta/BetaCard";
 import { type InteractionName } from "../../PosthogTrackers";
@@ -102,6 +101,8 @@ export const useRoomCall = (
 } => {
     // settings
     const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
+    const widgetsFeatureEnabled = useSettingValue(UIFeature.Widgets);
+    const voipFeatureEnabled = useSettingValue(UIFeature.Voip);
     const useElementCallExclusively = useMemo(() => {
         return SdkConfig.get("element_call").use_exclusively;
     }, []);
@@ -285,8 +286,8 @@ export const useRoomCall = (
     // We hide the voice call button if it'd have the same effect as the video call button
     let hideVoiceCallButton = isManagedHybridWidgetEnabled(room) || !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)) {
+    // We hide both buttons if they require widgets but widgets are disabled, or if the Voip feature is disabled.
+    if ((memberCount > 2 && !widgetsFeatureEnabled) || !voipFeatureEnabled) {
         hideVoiceCallButton = true;
         hideVideoCallButton = true;
     }

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

@@ -226,6 +226,37 @@ describe("RoomHeader", () => {
         expect(screen.queryByRole("button", { name: "Voice call" })).not.toBeInTheDocument();
     });
 
+    describe("UIFeature.Voip disabled", () => {
+        beforeEach(() => {
+            SdkConfig.put({
+                setting_defaults: {
+                    [UIFeature.Voip]: false,
+                },
+            });
+        });
+
+        afterEach(() => {
+            SdkConfig.reset();
+            jest.restoreAllMocks();
+        });
+
+        it("should not show call buttons in rooms smaller than 3 members", async () => {
+            mockRoomMembers(room, 2);
+            render(<RoomHeader room={room} />, getWrapper());
+
+            expect(screen.queryByRole("button", { name: "Video call" })).not.toBeInTheDocument();
+            expect(screen.queryByRole("button", { name: "Voice call" })).not.toBeInTheDocument();
+        });
+
+        it("should not show call button in rooms larger than 2 members", async () => {
+            mockRoomMembers(room, 3);
+            render(<RoomHeader room={room} />, getWrapper());
+
+            expect(screen.queryByRole("button", { name: "Video call" })).not.toBeInTheDocument();
+            expect(screen.queryByRole("button", { name: "Voice call" })).not.toBeInTheDocument();
+        });
+    });
+
     describe("UIFeature.Widgets enabled (default)", () => {
         beforeEach(() => {
             SdkConfig.put({

test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap

@@ -55,7 +55,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
         style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
       >
         <svg
-          aria-labelledby="«r1c8»"
+          aria-labelledby="«r1do»"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -71,7 +71,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     <button
       aria-disabled="true"
       aria-label="There's no one here to call"
-      aria-labelledby="«r1cd»"
+      aria-labelledby="«r1dt»"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 32px;"
@@ -96,7 +96,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Threads"
-      aria-labelledby="«r1ci»"
+      aria-labelledby="«r1e2»"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 32px;"
@@ -122,7 +122,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Room info"
-      aria-labelledby="«r1cn»"
+      aria-labelledby="«r1e7»"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 32px;"