From 76844f5973d141b62b9573697124d278e3255f53 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 19 Jun 2024 16:49:09 +0100 Subject: [PATCH] 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 <7t3chguy@gmail.com> * Tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/RoomHeader.tsx | 34 +++++++++------- src/hooks/room/useRoomCall.ts | 10 ++++- .../views/rooms/RoomHeader-test.tsx | 39 ++++++++++++------- 3 files changed, 53 insertions(+), 30 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 4d003de05da..59dfdb219e3 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -82,6 +82,7 @@ export default function RoomHeader({ isConnectedToCall, hasActiveCallSession, callOptions, + showVoiceCallButton, } = useRoomCall(room); const groupCallsEnabled = useFeatureEnabled("feature_group_calls"); @@ -199,20 +200,25 @@ export default function RoomHeader({ )} ); - const voiceCallButton = ( - - voiceCallClick(ev, callOptions[0])} - > - - - - ); + + let voiceCallButton: JSX.Element | undefined; + if (showVoiceCallButton) { + voiceCallButton = ( + + voiceCallClick(ev, callOptions[0])} + > + + + + ); + } + const closeLobbyButton = ( diff --git a/src/hooks/room/useRoomCall.ts b/src/hooks/room/useRoomCall.ts index 57145235fac..ccb203b8446 100644 --- a/src/hooks/room/useRoomCall.ts +++ b/src/hooks/room/useRoomCall.ts @@ -31,7 +31,7 @@ import { placeCall } from "../../utils/room/placeCall"; import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore"; import { useRoomState } from "../useRoomState"; import { _t } from "../../languageHandler"; -import { isManagedHybridWidget } from "../../widgets/ManagedHybrid"; +import { isManagedHybridWidget, isManagedHybridWidgetEnabled } from "../../widgets/ManagedHybrid"; import { IApp } from "../../stores/WidgetStore"; import { SdkContextClass } from "../../contexts/SDKContext"; import { UPDATE_EVENT } from "../../stores/AsyncStore"; @@ -83,6 +83,7 @@ export const useRoomCall = ( isConnectedToCall: boolean; hasActiveCallSession: boolean; callOptions: PlatformCallType[]; + showVoiceCallButton: boolean; } => { // settings const groupCallsEnabled = useFeatureEnabled("feature_group_calls"); @@ -124,7 +125,7 @@ export const useRoomCall = ( // The options provided to the RoomHeader. // If there are multiple options, the user will be prompted to choose. const callOptions = useMemo((): PlatformCallType[] => { - const options = []; + const options: PlatformCallType[] = []; if (memberCount <= 2) { options.push(PlatformCallType.LegacyCall); } else if (mayEditWidgets || hasJitsiWidget) { @@ -266,6 +267,10 @@ 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 = + isManagedHybridWidgetEnabled(room.roomId) || !callOptions.includes(PlatformCallType.LegacyCall); + /** * We've gone through all the steps */ @@ -279,5 +284,6 @@ export const useRoomCall = ( isConnectedToCall: isConnectedToCall, hasActiveCallSession: hasActiveCallSession, callOptions, + showVoiceCallButton: !hideVoiceCallButton, }; }; diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx index a3cb89a7fb8..958ddb8c590 100644 --- a/test/components/views/rooms/RoomHeader-test.tsx +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -34,6 +34,7 @@ import { getByRole, getByText, queryAllByLabelText, + queryByLabelText, render, RenderOptions, screen, @@ -232,6 +233,28 @@ describe("RoomHeader", () => { expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.NotificationPanel }); }); + it("should show both call buttons in rooms smaller than 3 members", async () => { + mockRoomMembers(room, 2); + const { container } = render(, getWrapper()); + expect(getByLabelText(container, "Video call")).toBeInTheDocument(); + expect(getByLabelText(container, "Voice call")).toBeInTheDocument(); + }); + + it("should not show voice call button in managed hybrid environments", async () => { + mockRoomMembers(room, 2); + jest.spyOn(SdkConfig, "get").mockReturnValue({ widget_build_url: "https://widget.build.url" }); + const { container } = render(, getWrapper()); + expect(getByLabelText(container, "Video call")).toBeInTheDocument(); + expect(queryByLabelText(container, "Voice call")).not.toBeInTheDocument(); + }); + + it("should not show voice call button in rooms larger than 2 members", async () => { + mockRoomMembers(room, 3); + const { container } = render(, getWrapper()); + expect(getByLabelText(container, "Video call")).toBeInTheDocument(); + expect(queryByLabelText(container, "Voice call")).not.toBeInTheDocument(); + }); + describe("groups call disabled", () => { it("you can't call if you're alone", () => { mockRoomMembers(room, 1); @@ -270,12 +293,11 @@ describe("RoomHeader", () => { } }); - it("can calls in large rooms if able to edit widgets", () => { + it("can call in large rooms if able to edit widgets", () => { mockRoomMembers(room, 10); jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true); const { container } = render(, getWrapper()); - expect(getByLabelText(container, "Voice call")).not.toHaveAttribute("aria-disabled", "true"); expect(getByLabelText(container, "Video call")).not.toHaveAttribute("aria-disabled", "true"); }); @@ -283,9 +305,6 @@ describe("RoomHeader", () => { mockRoomMembers(room, 10); jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(false); const { container } = render(, getWrapper()); - expect( - getByLabelText(container, "You do not have permission to start voice calls", { selector: "button" }), - ).toHaveAttribute("aria-disabled", "true"); expect( getByLabelText(container, "You do not have permission to start video calls", { selector: "button" }), ).toHaveAttribute("aria-disabled", "true"); @@ -456,15 +475,10 @@ describe("RoomHeader", () => { const { container } = render(, getWrapper()); - const voiceButton = getByLabelText(container, "Voice call"); const videoButton = getByLabelText(container, "Video call"); - expect(voiceButton).not.toHaveAttribute("aria-disabled", "true"); expect(videoButton).not.toHaveAttribute("aria-disabled", "true"); const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall"); - fireEvent.click(voiceButton); - expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Voice); - fireEvent.click(videoButton); expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Video); }); @@ -479,9 +493,7 @@ describe("RoomHeader", () => { const { container } = render(, getWrapper()); - const voiceButton = getByLabelText(container, "Voice call"); const videoButton = getByLabelText(container, "Video call"); - expect(voiceButton).not.toHaveAttribute("aria-disabled", "true"); expect(videoButton).not.toHaveAttribute("aria-disabled", "true"); const dispatcherSpy = jest.spyOn(dispatcher, "dispatch"); @@ -497,9 +509,8 @@ describe("RoomHeader", () => { ); const { container } = render(, getWrapper()); - const [videoButton, voiceButton] = getAllByLabelText(container, "Ongoing call"); + const [videoButton] = getAllByLabelText(container, "Ongoing call"); - expect(voiceButton).toHaveAttribute("aria-disabled", "true"); expect(videoButton).toHaveAttribute("aria-disabled", "true"); });