diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx index a01a879bf..46b338fc7 100644 --- a/src/components/MediaMuteAndSwitchButton.tsx +++ b/src/components/MediaMuteAndSwitchButton.tsx @@ -256,49 +256,36 @@ export const MediaMuteAndSwitchButton: FC = ({ if (menuOpen) devices.requestDeviceNames(); // No-op after the first call }, [menuOpen, devices]); - let button; - let toggles: { label: string; enabled: boolean; id: string }[] = []; - switch (iconsAndLabels) { - case "video": - button = ( - { - onMuteClick?.(); - e.preventDefault(); - e.stopPropagation(); - }} - disabled={isBusy || onMuteClick === undefined} - data-testid="incall_videomute" - /> - ); - if (videoBlurToggleClick !== undefined) { - toggles = [ + // The mute control differs between the two only in which button it is and + // what it is called; how it behaves is the same, and was worth saying once. + const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton; + const button = ( + { + onMuteClick?.(); + e.preventDefault(); + e.stopPropagation(); + }} + disabled={isBusy || onMuteClick === undefined} + data-testid={ + iconsAndLabels === "audio" ? "incall_mute" : "incall_videomute" + } + /> + ); + + // Only the camera menu carries a toggle, and only when the caller offers one. + const toggles = + iconsAndLabels === "video" && videoBlurToggleClick !== undefined + ? [ { label: t("action.blur_background"), enabled: videoBlurEnabled ?? false, id: BLUR_ID, }, - ]; - } - break; - case "audio": - button = ( - { - onMuteClick?.(); - e.preventDefault(); - e.stopPropagation(); - }} - disabled={isBusy || onMuteClick === undefined} - data-testid="incall_mute" - /> - ); - break; - } + ] + : []; let optionsButtonLabel: string; let defaultMenuTitle: string; @@ -518,15 +505,15 @@ export const MediaMuteAndSwitchButton: FC = ({ - {(toggles?.length ?? 0) > 0 &&
} - {toggles?.map((toggle) => ( + {toggles.length > 0 &&
} + {toggles.map((toggle) => ( { videoBlurToggleClick?.(); e.preventDefault(); }} - checked={toggle.enabled ?? false} + checked={toggle.enabled} key={toggle.id} /> ))}