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

Hide voice call button when redundant #12639

Merged
merged 2 commits into from
Jun 19, 2024
Merged

Hide voice call button when redundant #12639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59a784c
Hide voice call button when redundant
t3chguy Jun 18, 2024
eef50a0
Tests
t3chguy Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 20 additions & 14 deletions src/components/views/rooms/RoomHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ export default function RoomHeader({
isConnectedToCall,
hasActiveCallSession,
callOptions,
showVoiceCallButton,
} = useRoomCall(room);

const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
Expand Down Expand Up @@ -199,20 +200,25 @@ export default function RoomHeader({
)}
</>
);
const 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;
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>
);
}

const closeLobbyButton = (
<Tooltip label={_t("voip|close_lobby")}>
<IconButton onClick={toggleCall} aria-label={_t("voip|close_lobby")}>
Expand Down
10 changes: 8 additions & 2 deletions src/hooks/room/useRoomCall.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -83,6 +83,7 @@ export const useRoomCall = (
isConnectedToCall: boolean;
hasActiveCallSession: boolean;
callOptions: PlatformCallType[];
showVoiceCallButton: boolean;
} => {
// settings
const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
*/
Expand All @@ -279,5 +284,6 @@ export const useRoomCall = (
isConnectedToCall: isConnectedToCall,
hasActiveCallSession: hasActiveCallSession,
callOptions,
showVoiceCallButton: !hideVoiceCallButton,
};
};
39 changes: 25 additions & 14 deletions test/components/views/rooms/RoomHeader-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
getByRole,
getByText,
queryAllByLabelText,
queryByLabelText,
render,
RenderOptions,
screen,
Expand Down Expand Up @@ -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(<RoomHeader room={room} />, 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(<RoomHeader room={room} />, 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(<RoomHeader room={room} />, 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);
Expand Down Expand Up @@ -270,22 +293,18 @@ 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(<RoomHeader room={room} />, getWrapper());

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

it("disable calls in large rooms by default", () => {
mockRoomMembers(room, 10);
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(false);
const { container } = render(<RoomHeader room={room} />, 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");
Expand Down Expand Up @@ -456,15 +475,10 @@ describe("RoomHeader", () => {

const { container } = render(<RoomHeader room={room} />, 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);
});
Expand All @@ -479,9 +493,7 @@ describe("RoomHeader", () => {

const { container } = render(<RoomHeader room={room} />, 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");
Expand All @@ -497,9 +509,8 @@ describe("RoomHeader", () => {
);
const { container } = render(<RoomHeader room={room} />, 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");
});

Expand Down
Loading