Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 76844f5

Browse files
t3chguyt3chguy
authored
Hide voice call button when redundant (#12639)
* Hide voice call button when redundant i.e. when it'd do the same thing as the video call button like in non-dm rooms Signed-off-by: Michael Telatynski <[email protected]> * Tests Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent 04e1d7f commit 76844f5

File tree

3 files changed

+53
-30
lines changed

3 files changed

+53
-30
lines changed

‎src/components/views/rooms/RoomHeader.tsx‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export default function RoomHeader({
8282
isConnectedToCall,
8383
hasActiveCallSession,
8484
callOptions,
85+
showVoiceCallButton,
8586
} = useRoomCall(room);
8687

8788
const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
@@ -199,20 +200,25 @@ export default function RoomHeader({
199200
)}
200201
</>
201202
);
202-
const voiceCallButton = (
203-
<Tooltip label={voiceCallDisabledReason ?? _t("voip|voice_call")}>
204-
<IconButton
205-
// We need both: isViewingCall and isConnectedToCall
206-
// - in the Lobby we are viewing a call but are not connected to it.
207-
// - in pip view we are connected to the call but not viewing it.
208-
disabled={!!voiceCallDisabledReason || isViewingCall || isConnectedToCall}
209-
aria-label={voiceCallDisabledReason ?? _t("voip|voice_call")}
210-
onClick={(ev) => voiceCallClick(ev, callOptions[0])}
211-
>
212-
<VoiceCallIcon />
213-
</IconButton>
214-
</Tooltip>
215-
);
203+
204+
let voiceCallButton: JSX.Element | undefined;
205+
if (showVoiceCallButton) {
206+
voiceCallButton = (
207+
<Tooltip label={voiceCallDisabledReason ?? _t("voip|voice_call")}>
208+
<IconButton
209+
// We need both: isViewingCall and isConnectedToCall
210+
// - in the Lobby we are viewing a call but are not connected to it.
211+
// - in pip view we are connected to the call but not viewing it.
212+
disabled={!!voiceCallDisabledReason || isViewingCall || isConnectedToCall}
213+
aria-label={voiceCallDisabledReason ?? _t("voip|voice_call")}
214+
onClick={(ev) => voiceCallClick(ev, callOptions[0])}
215+
>
216+
<VoiceCallIcon />
217+
</IconButton>
218+
</Tooltip>
219+
);
220+
}
221+
216222
const closeLobbyButton = (
217223
<Tooltip label={_t("voip|close_lobby")}>
218224
<IconButton onClick={toggleCall} aria-label={_t("voip|close_lobby")}>

‎src/hooks/room/useRoomCall.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { placeCall } from "../../utils/room/placeCall";
3131
import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
3232
import { useRoomState } from "../useRoomState";
3333
import { _t } from "../../languageHandler";
34-
import { isManagedHybridWidget } from "../../widgets/ManagedHybrid";
34+
import { isManagedHybridWidget, isManagedHybridWidgetEnabled } from "../../widgets/ManagedHybrid";
3535
import { IApp } from "../../stores/WidgetStore";
3636
import { SdkContextClass } from "../../contexts/SDKContext";
3737
import { UPDATE_EVENT } from "../../stores/AsyncStore";
@@ -83,6 +83,7 @@ export const useRoomCall = (
8383
isConnectedToCall: boolean;
8484
hasActiveCallSession: boolean;
8585
callOptions: PlatformCallType[];
86+
showVoiceCallButton: boolean;
8687
} => {
8788
// settings
8889
const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
@@ -124,7 +125,7 @@ export const useRoomCall = (
124125
// The options provided to the RoomHeader.
125126
// If there are multiple options, the user will be prompted to choose.
126127
const callOptions = useMemo((): PlatformCallType[] => {
127-
const options = [];
128+
const options: PlatformCallType[] = [];
128129
if (memberCount <= 2) {
129130
options.push(PlatformCallType.LegacyCall);
130131
} else if (mayEditWidgets || hasJitsiWidget) {
@@ -266,6 +267,10 @@ export const useRoomCall = (
266267
});
267268
}, [isViewingCall, room.roomId]);
268269

270+
// We hide the voice call button if it'd have the same effect as the video call button
271+
const hideVoiceCallButton =
272+
isManagedHybridWidgetEnabled(room.roomId) || !callOptions.includes(PlatformCallType.LegacyCall);
273+
269274
/**
270275
* We've gone through all the steps
271276
*/
@@ -279,5 +284,6 @@ export const useRoomCall = (
279284
isConnectedToCall: isConnectedToCall,
280285
hasActiveCallSession: hasActiveCallSession,
281286
callOptions,
287+
showVoiceCallButton: !hideVoiceCallButton,
282288
};
283289
};

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

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {
3434
getByRole,
3535
getByText,
3636
queryAllByLabelText,
37+
queryByLabelText,
3738
render,
3839
RenderOptions,
3940
screen,
@@ -232,6 +233,28 @@ describe("RoomHeader", () => {
232233
expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.NotificationPanel });
233234
});
234235

236+
it("should show both call buttons in rooms smaller than 3 members", async () => {
237+
mockRoomMembers(room, 2);
238+
const { container } = render(<RoomHeader room={room} />, getWrapper());
239+
expect(getByLabelText(container, "Video call")).toBeInTheDocument();
240+
expect(getByLabelText(container, "Voice call")).toBeInTheDocument();
241+
});
242+
243+
it("should not show voice call button in managed hybrid environments", async () => {
244+
mockRoomMembers(room, 2);
245+
jest.spyOn(SdkConfig, "get").mockReturnValue({ widget_build_url: "https://widget.build.url" });
246+
const { container } = render(<RoomHeader room={room} />, getWrapper());
247+
expect(getByLabelText(container, "Video call")).toBeInTheDocument();
248+
expect(queryByLabelText(container, "Voice call")).not.toBeInTheDocument();
249+
});
250+
251+
it("should not show voice call button in rooms larger than 2 members", async () => {
252+
mockRoomMembers(room, 3);
253+
const { container } = render(<RoomHeader room={room} />, getWrapper());
254+
expect(getByLabelText(container, "Video call")).toBeInTheDocument();
255+
expect(queryByLabelText(container, "Voice call")).not.toBeInTheDocument();
256+
});
257+
235258
describe("groups call disabled", () => {
236259
it("you can't call if you're alone", () => {
237260
mockRoomMembers(room, 1);
@@ -270,22 +293,18 @@ describe("RoomHeader", () => {
270293
}
271294
});
272295

273-
it("can calls in large rooms if able to edit widgets", () => {
296+
it("can call in large rooms if able to edit widgets", () => {
274297
mockRoomMembers(room, 10);
275298
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
276299
const { container } = render(<RoomHeader room={room} />, getWrapper());
277300

278-
expect(getByLabelText(container, "Voice call")).not.toHaveAttribute("aria-disabled", "true");
279301
expect(getByLabelText(container, "Video call")).not.toHaveAttribute("aria-disabled", "true");
280302
});
281303

282304
it("disable calls in large rooms by default", () => {
283305
mockRoomMembers(room, 10);
284306
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(false);
285307
const { container } = render(<RoomHeader room={room} />, getWrapper());
286-
expect(
287-
getByLabelText(container, "You do not have permission to start voice calls", { selector: "button" }),
288-
).toHaveAttribute("aria-disabled", "true");
289308
expect(
290309
getByLabelText(container, "You do not have permission to start video calls", { selector: "button" }),
291310
).toHaveAttribute("aria-disabled", "true");
@@ -456,15 +475,10 @@ describe("RoomHeader", () => {
456475

457476
const { container } = render(<RoomHeader room={room} />, getWrapper());
458477

459-
const voiceButton = getByLabelText(container, "Voice call");
460478
const videoButton = getByLabelText(container, "Video call");
461-
expect(voiceButton).not.toHaveAttribute("aria-disabled", "true");
462479
expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
463480

464481
const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
465-
fireEvent.click(voiceButton);
466-
expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Voice);
467-
468482
fireEvent.click(videoButton);
469483
expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Video);
470484
});
@@ -479,9 +493,7 @@ describe("RoomHeader", () => {
479493

480494
const { container } = render(<RoomHeader room={room} />, getWrapper());
481495

482-
const voiceButton = getByLabelText(container, "Voice call");
483496
const videoButton = getByLabelText(container, "Video call");
484-
expect(voiceButton).not.toHaveAttribute("aria-disabled", "true");
485497
expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
486498

487499
const dispatcherSpy = jest.spyOn(dispatcher, "dispatch");
@@ -497,9 +509,8 @@ describe("RoomHeader", () => {
497509
);
498510
const { container } = render(<RoomHeader room={room} />, getWrapper());
499511

500-
const [videoButton, voiceButton] = getAllByLabelText(container, "Ongoing call");
512+
const [videoButton] = getAllByLabelText(container, "Ongoing call");
501513

502-
expect(voiceButton).toHaveAttribute("aria-disabled", "true");
503514
expect(videoButton).toHaveAttribute("aria-disabled", "true");
504515
});
505516

0 commit comments

Comments
 (0)