Calling device selection: Localize 'default'

_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"

ts/components/CallingDeviceSelection.stories.tsx

@@ -72,6 +72,37 @@ stories.add('Some Devices', () => {
   return <CallingDeviceSelection {...props} />;
 });
 
+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 <CallingDeviceSelection {...props} />;
+});
+
 stories.add('All Devices', () => {
   const availableSpeakers = [
     {

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<AudioDevice>,
   i18n: LocalizerType,
@@ -39,7 +48,7 @@ function renderAudioOptions(
             key={device.index}
             value={device.index}
           >
-            {device.name}
+            {localizeDefault(i18n, device.name)}
           </option>
         );
       })}
@@ -71,7 +80,7 @@ function renderVideoOptions(
             key={device.deviceId}
             value={device.deviceId}
           >
-            {device.label}
+            {localizeDefault(i18n, device.label)}
           </option>
         );
       })}