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)}
);
})}