feat: show selected audio device indicator in header for mweb

packages/react-icons/src/index.ts

@@ -29,6 +29,7 @@ export { default as BarIcon } from './BarIcon';
 export { default as BatteryFullIcon } from './BatteryFullIcon';
 export { default as BatteryPowerIcon } from './BatteryPowerIcon';
 export { default as BillIcon } from './BillIcon';
+export { default as BluetoothIcon } from './BluetoothIcon';
 export { default as BoltIcon } from './BoltIcon';
 export { default as BookIcon } from './BookIcon';
 export { default as BookmarkIcon } from './BookmarkIcon';

packages/roomkit-react/src/Prebuilt/components/Header/common.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useMedia } from 'react-use';
 import {
   DeviceType,
   selectIsLocalVideoEnabled,
@@ -8,12 +9,20 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { CameraFlipIcon, CheckIcon, CrossIcon, SpeakerIcon } from '@100mslive/react-icons';
+import {
+  BluetoothIcon,
+  CameraFlipIcon,
+  CheckIcon,
+  CrossIcon,
+  HeadphonesIcon,
+  SpeakerIcon,
+} from '@100mslive/react-icons';
 import { HorizontalDivider } from '../../../Divider';
 import { Label } from '../../../Label';
 import { Box, Flex } from '../../../Layout';
 import { Sheet } from '../../../Sheet';
 import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
 import IconButton from '../../IconButton';
 import { ToastManager } from '../Toast/ToastManager';
 
@@ -52,23 +61,43 @@ export const CamaraFlipActions = () => {
 export const AudioOutputActions = () => {
   const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
   const { audioOutput } = allDevices;
+  const isMobile = useMedia(cssConfig.media.md);
   // don't show speaker selector where the API is not supported, and use
   // a generic word("Audio") for Mic. In some cases(Chrome Android for e.g.) this changes both mic and speaker keeping them in sync.
   const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;
-
   /**
    * Chromium browsers return an audioOutput with empty label when no permissions are given
    */
   const audioOutputFiltered = audioOutput?.filter(item => !!item.label) ?? [];
+  const audioOutputLabel = audioOutput?.filter(item => item.deviceId === selectedDeviceIDs.audioOutput);
+
   if (!shouldShowAudioOutput || !audioOutputFiltered?.length > 0) {
     return null;
   }
+  let AudioOutputIcon = <SpeakerIcon />;
+  if (
+    audioOutputLabel &&
+    audioOutputLabel.length > 0 &&
+    audioOutputLabel[0].label.toLowerCase().includes('bluetooth')
+  ) {
+    AudioOutputIcon = <BluetoothIcon />;
+  } else if (
+    audioOutputLabel &&
+    audioOutputLabel.length > 0 &&
+    audioOutputLabel[0].label.toLowerCase().includes('headphone')
+  ) {
+    AudioOutputIcon = <HeadphonesIcon />;
+  }
   return (
     <AudioOutputSelectionSheet
       outputDevices={audioOutput}
-      outputSelected={selectedDeviceIDs.outputDevices}
+      outputSelected={selectedDeviceIDs.audioOutput}
       onChange={async deviceId => {
         try {
+          if (window.__hms && isMobile) {
+            // refresh device as `devicechange` listener won't work in mobile device
+            await window.__hms.actions.refreshDevices();
+          }
           await updateDevice({
             deviceId,
             deviceType: DeviceType.audioOutput,
@@ -82,9 +111,7 @@ export const AudioOutputActions = () => {
       }}
     >
       <Box>
-        <IconButton>
-          <SpeakerIcon />
-        </IconButton>
+        <IconButton>{AudioOutputIcon} </IconButton>
       </Box>
     </AudioOutputSelectionSheet>
   );