feat: more user friendly default device label

Also fixes an issue where starting Chrome 90 air pods
no longer have the "Default -" prefix and the default
entry looks like a buggy duplicated one.

lang/main.json

@@ -674,6 +674,7 @@
         "more": "More",
         "name": "Name",
         "noDevice": "None",
+        "sameAsSystem": "Same as system ({{label}})",
         "selectAudioOutput": "Audio output",
         "selectCamera": "Camera",
         "selectMic": "Microphone",

react/features/settings/components/web/audio/AudioSettingsContent.js

@@ -14,6 +14,20 @@ import SpeakerEntry from './SpeakerEntry';
 
 const browser = JitsiMeetJS.util.browser;
 
+/**
+ * Translates the default device label into a more user friendly one.
+ *
+ * @param {string} deviceId - The device Id.
+ * @param {string} label - The device label.
+ * @param {Function} t - The translation function.
+ * @returns {string}
+ */
+function transformDefaultDeviceLabel(deviceId, label, t) {
+    return deviceId === 'default'
+        ? t('settings.sameAsSystem', { label: label.replace('Default - ', '') })
+        : label;
+}
+
 export type Props = {
 
    /**
@@ -125,10 +139,12 @@ class AudioSettingsContent extends Component<Props, State> {
      *
      * @param {Object} data - An object with the deviceId, jitsiTrack & label of the microphone.
      * @param {number} index - The index of the element, used for creating a key.
+     * @param {Function} t - The translation function.
      * @returns {React$Node}
      */
-    _renderMicrophoneEntry(data, index) {
-        const { deviceId, label, jitsiTrack, hasError } = data;
+    _renderMicrophoneEntry(data, index, t) {
+        const { deviceId, jitsiTrack, hasError } = data;
+        const label = transformDefaultDeviceLabel(deviceId, data.label, t);
         const isSelected = deviceId === this.props.currentMicDeviceId;
 
         return (
@@ -149,10 +165,12 @@ class AudioSettingsContent extends Component<Props, State> {
      *
      * @param {Object} data - An object with the deviceId and label of the speaker.
      * @param {number} index - The index of the element, used for creating a key.
+     * @param {Function} t - The translation function.
      * @returns {React$Node}
      */
-    _renderSpeakerEntry(data, index) {
-        const { deviceId, label } = data;
+    _renderSpeakerEntry(data, index, t) {
+        const { deviceId } = data;
+        const label = transformDefaultDeviceLabel(deviceId, data.label, t);
         const key = `se-${index}`;
 
         return (
@@ -251,7 +269,7 @@ class AudioSettingsContent extends Component<Props, State> {
                         IconComponent = { IconMicrophoneHollow }
                         text = { t('settings.microphones') } />
                     {this.state.audioTracks.map((data, i) =>
-                        this._renderMicrophoneEntry(data, i),
+                        this._renderMicrophoneEntry(data, i, t),
                     )}
                     { outputDevices.length > 0 && (
                         <>
@@ -263,7 +281,7 @@ class AudioSettingsContent extends Component<Props, State> {
                     )
                     }
                     {outputDevices.map((data, i) =>
-                        this._renderSpeakerEntry(data, i),
+                        this._renderSpeakerEntry(data, i, t),
                     )}
                 </div>
             </div>