fix(ios) fix not showing the CarPlay audio interface

ios/sdk/src/AudioMode.m

@@ -35,9 +35,10 @@ typedef enum {
 static NSString * const kDevicesChanged = @"org.jitsi.meet:features/audio-mode#devices-update";
 
 // Device types (must match JS and Java)
-static NSString * const kDeviceTypeHeadphones = @"HEADPHONES";
 static NSString * const kDeviceTypeBluetooth  = @"BLUETOOTH";
+static NSString * const kDeviceTypeCar        = @"CAR";
 static NSString * const kDeviceTypeEarpiece   = @"EARPIECE";
+static NSString * const kDeviceTypeHeadphones = @"HEADPHONES";
 static NSString * const kDeviceTypeSpeaker    = @"SPEAKER";
 static NSString * const kDeviceTypeUnknown    = @"UNKNOWN";
 
@@ -320,6 +321,8 @@ RCT_EXPORT_METHOD(updateDeviceList) {
             || [portType isEqualToString:AVAudioSessionPortBluetoothLE]
             || [portType isEqualToString:AVAudioSessionPortBluetoothA2DP]) {
         return kDeviceTypeBluetooth;
+    } else if ([portType isEqualToString:AVAudioSessionPortCarAudio]) {
+        return kDeviceTypeCar; 
     } else {
         return kDeviceTypeUnknown;
     }

lang/main.json

@@ -31,6 +31,7 @@
     },
     "audioDevices": {
         "bluetooth": "Bluetooth",
+        "car": "Car Audio",
         "headphones": "Headphones",
         "none": "No audio devices available",
         "phone": "Phone",

react/features/base/icons/svg/car.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.44701 5H15.553C16.427 5 17.1997 5.56747 17.4613 6.40136L18.2765 9H18H6H5.7235L6.5387 6.40136C6.8003 5.56747 7.57305 5 8.44701 5ZM3.29779 10.0507L4.6304 5.80272C5.15358 4.13493 6.69908 3 8.44701 3H15.553C17.3009 3 18.8464 4.13494 19.3696 5.80272L20.7022 10.0507C21.4999 10.782 22 11.8326 22 13V17V18V21H20V18H4V21H2V18V17V13C2 11.8326 2.50012 10.782 3.29779 10.0507ZM6 11C4.89543 11 4 11.8954 4 13V16H20V13C20 11.8954 19.1046 11 18 11H6ZM9 13.5C9 14.3284 8.32843 15 7.5 15C6.67157 15 6 14.3284 6 13.5C6 12.6716 6.67157 12 7.5 12C8.32843 12 9 12.6716 9 13.5ZM16.5 15C17.3284 15 18 14.3284 18 13.5C18 12.6716 17.3284 12 16.5 12C15.6716 12 15 12.6716 15 13.5C15 14.3284 15.6716 15 16.5 15Z"/>
+</svg>

react/features/base/icons/svg/index.js

@@ -22,6 +22,7 @@ export { default as IconCameraEmpty } from './camera-empty.svg';
 export { default as IconCameraEmptyDisabled } from './camera-empty-disabled.svg';
 export { default as IconCameraRefresh } from './camera-refresh.svg';
 export { default as IconCancelSelection } from './cancel.svg';
+export { default as IconCar } from './car.svg';
 export { default as IconChat } from './chat.svg';
 export { default as IconChatSend } from './send.svg';
 export { default as IconChatUnread } from './chat-unread.svg';

react/features/mobile/audio-mode/components/AudioRoutePickerDialog.js

@@ -9,6 +9,7 @@ import { hideDialog, BottomSheet } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import {
     Icon,
+    IconCar,
     IconDeviceBluetooth,
     IconDeviceEarpiece,
     IconDeviceHeadphone,
@@ -125,6 +126,11 @@ const deviceInfoMap = {
         text: 'audioDevices.bluetooth',
         type: 'BLUETOOTH'
     },
+    CAR: {
+        icon: IconCar,
+        text: 'audioDevices.car',
+        type: 'CAR'
+    },
     EARPIECE: {
         icon: IconDeviceEarpiece,
         text: 'audioDevices.phone',
@@ -166,7 +172,7 @@ class AudioRoutePickerDialog extends Component<Props, State> {
      * @inheritdoc
      */
     static getDerivedStateFromProps(props: Props) {
-        const { _devices: devices } = props;
+        const { _devices: devices, t } = props;
 
         if (!devices) {
             return null;
@@ -183,13 +189,18 @@ class AudioRoutePickerDialog extends Component<Props, State> {
                 continue;
             }
 
-            const text = device.type === 'BLUETOOTH' && device.name ? device.name : infoMap.text;
+            let text = t(infoMap.text);
+
+            // iOS provides descriptive names for these, use it.
+            if ((device.type === 'BLUETOOTH' || device.type === 'CAR') && device.name) {
+                text = device.name;
+            }
 
             if (infoMap) {
                 const info = {
                     ...infoMap,
                     selected: Boolean(device.selected),
-                    text: props.t(text),
+                    text,
                     uid: device.uid
                 };