diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 3b23b757c2..93e4fe690b 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2746,6 +2746,10 @@ "message": "No devices available", "description": "Message for when there are no available devices to select for input/output audio or video" }, + "callingDeviceSelection__select--default": { + "message": "Default", + "description": "Shown when the device is the default device" + }, "muteNotificationsTitle": { "message": "Mute notifications", "description": "Label for the mute notifications drop-down selector" diff --git a/ts/components/CallingDeviceSelection.stories.tsx b/ts/components/CallingDeviceSelection.stories.tsx index 831315f56d..e709768462 100644 --- a/ts/components/CallingDeviceSelection.stories.tsx +++ b/ts/components/CallingDeviceSelection.stories.tsx @@ -72,6 +72,37 @@ stories.add('Some Devices', () => { return ; }); +stories.add('Default Devices', () => { + const availableSpeakers = [ + { + name: 'default (Headphones)', + index: 0, + uniqueId: 'Default', + i18nKey: 'default_communication_device', + }, + ]; + const selectedSpeaker = availableSpeakers[0]; + + const availableMicrophones = [ + { + name: 'DefAuLt (Headphones)', + index: 0, + uniqueId: 'Default', + i18nKey: 'default_communication_device', + }, + ]; + const selectedMicrophone = availableMicrophones[0]; + + const props = createProps({ + availableMicrophones, + availableSpeakers, + selectedMicrophone, + selectedSpeaker, + }); + + return ; +}); + stories.add('All Devices', () => { const availableSpeakers = [ { diff --git a/ts/components/CallingDeviceSelection.tsx b/ts/components/CallingDeviceSelection.tsx index 4f9effe02b..7bc7edaa67 100644 --- a/ts/components/CallingDeviceSelection.tsx +++ b/ts/components/CallingDeviceSelection.tsx @@ -15,6 +15,15 @@ export type Props = MediaDeviceSettings & { toggleSettings: () => void; }; +function localizeDefault(i18n: LocalizerType, deviceLabel: string): string { + return deviceLabel.toLowerCase().startsWith('default') + ? deviceLabel.replace( + /default/i, + i18n('callingDeviceSelection__select--default') + ) + : deviceLabel; +} + function renderAudioOptions( devices: Array, i18n: LocalizerType, @@ -39,7 +48,7 @@ function renderAudioOptions( key={device.index} value={device.index} > - {device.name} + {localizeDefault(i18n, device.name)} ); })} @@ -71,7 +80,7 @@ function renderVideoOptions( key={device.deviceId} value={device.deviceId} > - {device.label} + {localizeDefault(i18n, device.label)} ); })}