Translate the device menu titles and drop the duplicated heading

Spec: FEATURES_SPEC/2026-09_Quick_Audio_Menu.md — AC1
This commit is contained in:
fkwp
2026-09-16 13:14:23 +02:00
parent 27789131ee
commit ef2cbbbaea
3 changed files with 16 additions and 7 deletions
+2
View File
@@ -215,12 +215,14 @@
"activating": "Activating…", "activating": "Activating…",
"camera": "Camera", "camera": "Camera",
"camera_numbered": "Camera {{n}}", "camera_numbered": "Camera {{n}}",
"camera_source": "Camera Source",
"change_device_button": "Change audio device", "change_device_button": "Change audio device",
"default": "Default", "default": "Default",
"default_named": "Default <2>({{name}})</2>", "default_named": "Default <2>({{name}})</2>",
"default_named_plain": "Default ({{name}})", "default_named_plain": "Default ({{name}})",
"handset": "Handset", "handset": "Handset",
"loudspeaker": "Loudspeaker", "loudspeaker": "Loudspeaker",
"mic_source": "Mic Source",
"microphone": "Microphone", "microphone": "Microphone",
"microphone_numbered": "Microphone {{n}}", "microphone_numbered": "Microphone {{n}}",
"speaker": "Speaker", "speaker": "Speaker",
-2
View File
@@ -175,7 +175,6 @@ export const CallFooter: FC<FooterProps> = ({
if ((audioOptions?.length ?? 0) > 0) { if ((audioOptions?.length ?? 0) > 0) {
buttons.push( buttons.push(
<MediaMuteAndSwitchButton <MediaMuteAndSwitchButton
title={"Mic Source"}
key="audio" key="audio"
iconsAndLabels="audio" iconsAndLabels="audio"
enabled={audioEnabled ?? false} enabled={audioEnabled ?? false}
@@ -207,7 +206,6 @@ export const CallFooter: FC<FooterProps> = ({
if ((videoOptions?.length ?? 0) > 0) { if ((videoOptions?.length ?? 0) > 0) {
buttons.push( buttons.push(
<MediaMuteAndSwitchButton <MediaMuteAndSwitchButton
title={"Camera Source"}
key="video" key="video"
iconsAndLabels="video" iconsAndLabels="video"
enabled={videoEnabled ?? false} enabled={videoEnabled ?? false}
+14 -5
View File
@@ -46,8 +46,12 @@ export interface MenuOptions {
} }
export interface MediaMuteAndSwitchButtonProps { export interface MediaMuteAndSwitchButtonProps {
/** The title used in the Switcher modal. */ /**
title: string; * The accessible name of the menu. Defaults to a translated name for the
* media kind; the menu's own title is not shown, since each section carries
* its own heading.
*/
title?: string;
/** If the Mute button is enabled */ /** If the Mute button is enabled */
enabled?: boolean; enabled?: boolean;
/** Callback if the mute button is clicked */ /** Callback if the mute button is clicked */
@@ -153,17 +157,20 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
let IconOptions: ComponentType<React.SVGAttributes<SVGElement>> | undefined; let IconOptions: ComponentType<React.SVGAttributes<SVGElement>> | undefined;
let optionsButtonLabel: string; let optionsButtonLabel: string;
let defaultMenuTitle: string;
let numberedLabel: (number: number) => string; let numberedLabel: (number: number) => string;
switch (iconsAndLabels) { switch (iconsAndLabels) {
case "video": case "video":
IconOptions = VideoCallIcon; IconOptions = VideoCallIcon;
optionsButtonLabel = t("settings.devices.camera"); optionsButtonLabel = t("settings.devices.camera");
defaultMenuTitle = t("settings.devices.camera_source");
numberedLabel = (n): string => numberedLabel = (n): string =>
t("settings.devices.camera_numbered", { n }); t("settings.devices.camera_numbered", { n });
break; break;
case "audio": case "audio":
IconOptions = MicOnIcon; IconOptions = MicOnIcon;
optionsButtonLabel = t("settings.devices.microphone"); optionsButtonLabel = t("settings.devices.microphone");
defaultMenuTitle = t("settings.devices.mic_source");
numberedLabel = (n): string => numberedLabel = (n): string =>
t("settings.devices.microphone_numbered", { n }); t("settings.devices.microphone_numbered", { n });
break; break;
@@ -257,8 +264,10 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
{/* The mute button lives inside */} {/* The mute button lives inside */}
{button} {button}
<Menu <Menu
title={title} title={title ?? defaultMenuTitle}
showTitle={true} // Each section carries its own heading, so the menu's own title would
// sit on top of the first one. Kept for the accessible name only.
showTitle={false}
open={menuOpen} open={menuOpen}
onOpenChange={setMenuOpen} onOpenChange={setMenuOpen}
side="top" side="top"
@@ -287,9 +296,9 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
VolumeOnIcon, VolumeOnIcon,
)} )}
<Separator /> <Separator />
<MenuTitle title={t("settings.devices.microphone")} />
</> </>
)} )}
<MenuTitle title={optionsButtonLabel} />
{deviceItems( {deviceItems(
options, options,
selectedOption, selectedOption,