diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 59dfdb219e..d37ff18a76 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/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,25 +201,20 @@ export default function RoomHeader({
)}
>
);
-
- let voiceCallButton: JSX.Element | undefined;
- if (showVoiceCallButton) {
- voiceCallButton = (
-
- voiceCallClick(ev, callOptions[0])}
- >
-
-
-
- );
- }
-
+ let voiceCallButton: JSX.Element | undefined = (
+
+ voiceCallClick(ev, callOptions[0])}
+ >
+
+
+
+ );
const closeLobbyButton = (
@@ -226,13 +222,20 @@ export default function RoomHeader({
);
- 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 (
<>
diff --git a/src/hooks/room/useRoomCall.ts b/src/hooks/room/useRoomCall.ts
index ccb203b844..fd2ed9c750 100644
--- a/src/hooks/room/useRoomCall.ts
+++ b/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,
};
};
diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx
index 958ddb8c59..92ababba28 100644
--- a/test/components/views/rooms/RoomHeader-test.tsx
+++ b/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(, 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(, 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(, 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(, 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(, 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);