fix: device label categorisation on prebuilt

100mslive · Sep 19, 2024 · 0766552 · 0766552
1 parent 8c79ee4
commit 0766552
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/packages/hms-video-store/src/device-manager/DeviceManager.ts b/packages/hms-video-store/src/device-manager/DeviceManager.ts
@@ -4,7 +4,7 @@ import { ErrorFactory } from '../error/ErrorFactory';
 import { HMSException } from '../error/HMSException';
 import { EventBus } from '../events/EventBus';
 import { DeviceMap, HMSDeviceChangeEvent, SelectedDevices } from '../interfaces';
-import { isIOS } from '../internal';
+import { getAudioDeviceCategory, isIOS } from '../internal';
 import { HMSAudioTrackSettingsBuilder, HMSVideoTrackSettingsBuilder } from '../media/settings';
 import { HMSLocalAudioTrack, HMSLocalTrack, HMSLocalVideoTrack } from '../media/tracks';
 import { Store } from '../sdk/store';
@@ -443,14 +443,14 @@ export class DeviceManager implements HMSDeviceManager {
     let earpiece: InputDeviceInfo | null = null;
 
     for (const device of this.audioInput) {
-      const label = device.label.toLowerCase();
-      if (label.includes('speakerphone')) {
+      const deviceCategory = getAudioDeviceCategory(device.label);
+      if (deviceCategory === 'speakerphone') {
         speakerPhone = device;
-      } else if (label.includes('wired')) {
+      } else if (deviceCategory === 'wired') {
         wired = device;
-      } else if (/airpods|buds|wireless|bluetooth/gi.test(label)) {
+      } else if (deviceCategory === 'bluetooth') {
         bluetoothDevice = device;
-      } else if (label.includes('earpiece')) {
+      } else if (deviceCategory === 'speakerhone') {
         earpiece = device;
       }
     }

diff --git a/packages/hms-video-store/src/index.ts b/packages/hms-video-store/src/index.ts
@@ -20,6 +20,7 @@ export {
   simulcastMapping,
   DeviceType,
   HMSPeerType,
+  getAudioDeviceCategory,
 } from './internal';
 
 export type {

diff --git a/packages/hms-video-store/src/utils/media.ts b/packages/hms-video-store/src/utils/media.ts
@@ -63,3 +63,17 @@ export const HMSAudioContextHandler: HMSAudioContext = {
     }
   },
 };
+
+export const getAudioDeviceCategory = (deviceLabel: string) => {
+  const label = deviceLabel.toLowerCase();
+  if (label.includes('speakerphone')) {
+    return 'speakerhone';
+  } else if (label.includes('wired')) {
+    return 'wired';
+  } else if (/airpods|buds|wireless|bluetooth/gi.test(label)) {
+    return 'bluetooth';
+  } else if (label.includes('earpiece')) {
+    return 'earpiece';
+  }
+  return 'speakerphone';
+};
diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   DeviceType,
+  getAudioDeviceCategory,
   selectIsLocalVideoEnabled,
   selectLocalVideoTrackID,
   selectVideoTrackByID,
@@ -78,12 +79,13 @@ export const AudioActions = () => {
   if (!audioFiltered) {
     return null;
   }
+  const deviceCategory = getAudioDeviceCategory(currentSelection.label);
   let AudioIcon = <SpeakerIcon />;
-  if (currentSelection && currentSelection.label.toLowerCase().includes('bluetooth')) {
+  if (deviceCategory === 'bluetooth') {
     AudioIcon = <BluetoothIcon />;
-  } else if (currentSelection && currentSelection.label.toLowerCase().includes('wired')) {
+  } else if (deviceCategory === 'wired') {
     AudioIcon = <HeadphonesIcon />;
-  } else if (currentSelection && currentSelection.label.toLowerCase().includes('earpiece')) {
+  } else if (deviceCategory === 'earpiece') {
     AudioIcon = <TelePhoneIcon />;
   }
   return (