From 9bdef0b31636f0683e9e4e15a82d23834b08e7c0 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Thu, 19 Oct 2023 06:43:49 +0530 Subject: [PATCH 01/12] feat: added audio output device icon on header --- .../src/Prebuilt/components/Header/common.jsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index bd9a1222a3..6798ce63b7 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/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,13 @@ import { useHMSActions, useHMSStore, } from '@100mslive/react-sdk'; -import { CameraFlipIcon, CheckIcon, CrossIcon, SpeakerIcon } from '@100mslive/react-icons'; +import { 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 +54,29 @@ 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; } return ( { 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, @@ -83,7 +91,11 @@ export const AudioOutputActions = () => { > - + {audioOutputLabel && audioOutputLabel.length > 0 && audioOutputLabel[0].label.includes('speaker') ? ( + + ) : ( + + )} From bb3a5dfff9d7f55990d872897e8e93e4c8e5642e Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Fri, 20 Oct 2023 11:17:35 +0530 Subject: [PATCH 02/12] fix: added bluetooth device icon --- packages/react-icons/src/index.ts | 1 + .../src/Prebuilt/components/Header/common.jsx | 31 ++++++++++++++----- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/react-icons/src/index.ts b/packages/react-icons/src/index.ts index 53ca615ccb..df48d624f9 100644 --- a/packages/react-icons/src/index.ts +++ b/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'; diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index 6798ce63b7..a237c354c9 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -9,7 +9,14 @@ import { useHMSActions, useHMSStore, } from '@100mslive/react-sdk'; -import { CameraFlipIcon, CheckIcon, CrossIcon, HeadphonesIcon, 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'; @@ -67,6 +74,20 @@ export const AudioOutputActions = () => { if (!shouldShowAudioOutput || !audioOutputFiltered?.length > 0) { return null; } + let AudioOutputIcon = ; + if ( + audioOutputLabel && + audioOutputLabel.length > 0 && + audioOutputLabel[0].label.toLowerCase().includes('bluetooth') + ) { + AudioOutputIcon = ; + } else if ( + audioOutputLabel && + audioOutputLabel.length > 0 && + audioOutputLabel[0].label.toLowerCase().includes('headphone') + ) { + AudioOutputIcon = ; + } return ( { }} > - - {audioOutputLabel && audioOutputLabel.length > 0 && audioOutputLabel[0].label.includes('speaker') ? ( - - ) : ( - - )} - + {AudioOutputIcon} ); From 5358f2f5c6bd443d2f1be58a16dc5b0f85d23099 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Fri, 20 Oct 2023 12:46:29 +0530 Subject: [PATCH 03/12] fix: use hms actions --- packages/react-icons/assets/BluetoothIcon.svg | 5 +++++ packages/react-icons/src/BluetoothIcon.tsx | 17 +++++++++++++++++ .../src/Prebuilt/components/Header/common.jsx | 10 +++------- 3 files changed, 25 insertions(+), 7 deletions(-) create mode 100644 packages/react-icons/assets/BluetoothIcon.svg create mode 100644 packages/react-icons/src/BluetoothIcon.tsx diff --git a/packages/react-icons/assets/BluetoothIcon.svg b/packages/react-icons/assets/BluetoothIcon.svg new file mode 100644 index 0000000000..60af6f9365 --- /dev/null +++ b/packages/react-icons/assets/BluetoothIcon.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/react-icons/src/BluetoothIcon.tsx b/packages/react-icons/src/BluetoothIcon.tsx new file mode 100644 index 0000000000..f4b70b13b8 --- /dev/null +++ b/packages/react-icons/src/BluetoothIcon.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { SVGProps } from 'react'; +const SvgBluetoothIcon = (props: SVGProps) => ( + + + + +); +export default SvgBluetoothIcon; diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index a237c354c9..f556d99f05 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { useMedia } from 'react-use'; import { DeviceType, selectIsLocalVideoEnabled, @@ -22,7 +21,6 @@ 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'; @@ -61,7 +59,7 @@ export const CamaraFlipActions = () => { export const AudioOutputActions = () => { const { allDevices, selectedDeviceIDs, updateDevice } = useDevices(); const { audioOutput } = allDevices; - const isMobile = useMedia(cssConfig.media.md); + const hmsActions = useHMSActions(); // 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; @@ -94,10 +92,8 @@ export const AudioOutputActions = () => { 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(); - } + // refresh device as `devicechange` listener won't work in mobile device + await hmsActions.refreshDevices(); await updateDevice({ deviceId, deviceType: DeviceType.audioOutput, From 06ddc2fd8ebc740211c12dd4dd2c192af7eac70f Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Tue, 31 Oct 2023 13:40:39 +0530 Subject: [PATCH 04/12] fix: added device change handler in devicesetting --- .../src/Prebuilt/components/Header/common.jsx | 11 ++++++---- .../components/Settings/DeviceSettings.jsx | 22 +++++++++++++++++-- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index f556d99f05..0442e6cb02 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -82,7 +82,7 @@ export const AudioOutputActions = () => { } else if ( audioOutputLabel && audioOutputLabel.length > 0 && - audioOutputLabel[0].label.toLowerCase().includes('headphone') + audioOutputLabel[0].label.toLowerCase().includes('wired') ) { AudioOutputIcon = ; } @@ -92,8 +92,6 @@ export const AudioOutputActions = () => { outputSelected={selectedDeviceIDs.audioOutput} onChange={async deviceId => { try { - // refresh device as `devicechange` listener won't work in mobile device - await hmsActions.refreshDevices(); await updateDevice({ deviceId, deviceType: DeviceType.audioOutput, @@ -106,7 +104,12 @@ export const AudioOutputActions = () => { } }} > - + { + // refresh device as `devicechange` listener won't work in mobile device + await hmsActions.refreshDevices(); + }} + > {AudioOutputIcon} diff --git a/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx b/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx index 2c81a581c1..9ed0255dbd 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx @@ -1,14 +1,17 @@ import React, { Fragment, useEffect, useRef, useState } from 'react'; +import { useMedia } from 'react-use'; import { DeviceType, selectIsLocalVideoEnabled, selectLocalVideoTrackID, selectVideoTrackByID, useDevices, + useHMSActions, useHMSStore, } from '@100mslive/react-sdk'; import { MicOnIcon, SpeakerIcon, VideoOnIcon } from '@100mslive/react-icons'; import { Box, Button, Dropdown, Flex, StyledVideoTile, Text, Video } from '../../../'; +import { config as cssConfig } from '../../../Theme'; import { DialogDropdownTrigger } from '../../primitives/DropdownTrigger'; import { useUISettings } from '../AppData/useUISettings'; import { useDropdownSelection } from '../hooks/useDropdownSelection'; @@ -30,7 +33,9 @@ const Settings = ({ setHide }) => { const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype; const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo); const trackSelector = selectVideoTrackByID(videoTrackId); + const hmsActions = useHMSActions(); const track = useHMSStore(trackSelector); + const isMobile = useMedia(cssConfig.media.md); /** * Chromium browsers return an audioOutput with empty label when no permissions are given @@ -100,6 +105,11 @@ const Settings = ({ setHide }) => { deviceType: DeviceType.audioOutput, }) } + refreshDevices={async () => { + if (isMobile) { + await hmsActions.refreshDevices(); + } + }} > @@ -108,7 +118,7 @@ const Settings = ({ setHide }) => { ); }; -const DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => { +const DeviceSelector = ({ title, devices, selection, onChange, icon, refreshDevices = null, children = null }) => { const [open, setOpen] = useState(false); const selectionBg = useDropdownSelection(); const ref = useRef(null); @@ -138,7 +148,15 @@ const DeviceSelector = ({ title, devices, selection, onChange, icon, children = }, }} > - + { + if (refreshDevices) { + await refreshDevices(); + } + setOpen(); + }} + > Date: Tue, 31 Oct 2023 15:08:42 +0530 Subject: [PATCH 05/12] fix: updated based on pr comment --- .../src/Prebuilt/components/Header/common.jsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index 0442e6cb02..52c920e590 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -67,23 +67,15 @@ export const AudioOutputActions = () => { * 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); + const audioOutputLabel = audioOutput?.filter(item => item.deviceId === selectedDeviceIDs.audioOutput)?.[0]; if (!shouldShowAudioOutput || !audioOutputFiltered?.length > 0) { return null; } let AudioOutputIcon = ; - if ( - audioOutputLabel && - audioOutputLabel.length > 0 && - audioOutputLabel[0].label.toLowerCase().includes('bluetooth') - ) { + if (audioOutputLabel && audioOutputLabel.label.toLowerCase().includes('bluetooth')) { AudioOutputIcon = ; - } else if ( - audioOutputLabel && - audioOutputLabel.length > 0 && - audioOutputLabel[0].label.toLowerCase().includes('wired') - ) { + } else if (audioOutputLabel && audioOutputLabel.label.toLowerCase().includes('wired')) { AudioOutputIcon = ; } return ( From e1f6252df23cbc99265857e8605b31d4f45e684c Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Tue, 31 Oct 2023 17:24:11 +0530 Subject: [PATCH 06/12] fix: using audio input device --- .../src/Prebuilt/components/Header/common.jsx | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index 52c920e590..9b25320ffc 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -58,39 +58,37 @@ export const CamaraFlipActions = () => { export const AudioOutputActions = () => { const { allDevices, selectedDeviceIDs, updateDevice } = useDevices(); - const { audioOutput } = allDevices; + const { audioInput } = allDevices; const hmsActions = useHMSActions(); - // 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 + * Chromium browsers return an audioInput with empty label when no permissions are given */ - const audioOutputFiltered = audioOutput?.filter(item => !!item.label) ?? []; - const audioOutputLabel = audioOutput?.filter(item => item.deviceId === selectedDeviceIDs.audioOutput)?.[0]; + const audioInputFiltered = audioInput?.filter(item => !!item.label) ?? []; + const audioInputLabel = audioInput?.filter(item => item.deviceId === selectedDeviceIDs.audioInput)?.[0]; - if (!shouldShowAudioOutput || !audioOutputFiltered?.length > 0) { + if (!(audioInputFiltered?.length > 0)) { return null; } - let AudioOutputIcon = ; - if (audioOutputLabel && audioOutputLabel.label.toLowerCase().includes('bluetooth')) { - AudioOutputIcon = ; - } else if (audioOutputLabel && audioOutputLabel.label.toLowerCase().includes('wired')) { - AudioOutputIcon = ; + let AudioInputIcon = ; + if (audioInputLabel && audioInputLabel.label.toLowerCase().includes('bluetooth')) { + AudioInputIcon = ; + } else if (audioInputLabel && audioInputLabel.label.toLowerCase().includes('wired')) { + AudioInputIcon = ; } return ( { try { await updateDevice({ deviceId, - deviceType: DeviceType.audioOutput, + deviceType: DeviceType.audioInput, }); } catch (e) { ToastManager.addToast({ - title: `Error while changing audio output ${e.message || ''}`, + title: `Error while changing audio input ${e.message || ''}`, variant: 'error', }); } @@ -102,7 +100,7 @@ export const AudioOutputActions = () => { await hmsActions.refreshDevices(); }} > - {AudioOutputIcon} + {AudioInputIcon} ); @@ -116,7 +114,7 @@ const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, ch - Audio Output + Audio Input From 04c82c4a547e91ad8b00f5769c5b83f372b3aa31 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Tue, 31 Oct 2023 17:46:17 +0530 Subject: [PATCH 07/12] fix: comments --- .../src/Prebuilt/components/Header/common.jsx | 4 ---- .../Prebuilt/components/Settings/DeviceSettings.jsx | 10 +++++----- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index 9b25320ffc..effc095ae0 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -60,10 +60,6 @@ export const AudioOutputActions = () => { const { allDevices, selectedDeviceIDs, updateDevice } = useDevices(); const { audioInput } = allDevices; const hmsActions = useHMSActions(); - - /** - * Chromium browsers return an audioInput with empty label when no permissions are given - */ const audioInputFiltered = audioInput?.filter(item => !!item.label) ?? []; const audioInputLabel = audioInput?.filter(item => item.deviceId === selectedDeviceIDs.audioInput)?.[0]; diff --git a/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx b/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx index 9ed0255dbd..1ece586bfd 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx @@ -90,6 +90,11 @@ const Settings = ({ setHide }) => { deviceType: DeviceType.audioInput, }) } + refreshDevices={async () => { + if (isMobile) { + await hmsActions.refreshDevices(); + } + }} /> ) : null} @@ -105,11 +110,6 @@ const Settings = ({ setHide }) => { deviceType: DeviceType.audioOutput, }) } - refreshDevices={async () => { - if (isMobile) { - await hmsActions.refreshDevices(); - } - }} > From b61ae12387c355bbd7f0c0529ac0b1937d4563ba Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Tue, 31 Oct 2023 18:22:21 +0530 Subject: [PATCH 08/12] fix: handle audio input/output cases --- .../src/Prebuilt/components/Header/common.jsx | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index effc095ae0..91e578b445 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -56,12 +56,25 @@ export const CamaraFlipActions = () => { ); }; +// It will handle and show audio input devices in Mweb while audio output devices in desktop export const AudioOutputActions = () => { const { allDevices, selectedDeviceIDs, updateDevice } = useDevices(); - const { audioInput } = allDevices; + + // 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; + const { audioInput, audioOutput } = allDevices; + let currentAudio = audioInput; + let selectedAudio = selectedDeviceIDs.audioInput; + let title = 'Audio Input'; + if (shouldShowAudioOutput) { + title = 'Audio Output'; + currentAudio = audioOutput; + selectedAudio = selectedDeviceIDs.audioOutput; + } const hmsActions = useHMSActions(); - const audioInputFiltered = audioInput?.filter(item => !!item.label) ?? []; - const audioInputLabel = audioInput?.filter(item => item.deviceId === selectedDeviceIDs.audioInput)?.[0]; + const audioInputFiltered = currentAudio?.filter(item => !!item.label) ?? []; + const audioInputLabel = currentAudio?.filter(item => item.deviceId === selectedAudio)?.[0]; if (!(audioInputFiltered?.length > 0)) { return null; @@ -74,8 +87,9 @@ export const AudioOutputActions = () => { } return ( { try { await updateDevice({ @@ -102,7 +116,7 @@ export const AudioOutputActions = () => { ); }; -const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, children }) => { +const AudioOutputSelectionSheet = ({ title, outputDevices, outputSelected, onChange, children }) => { return ( {children} @@ -110,7 +124,7 @@ const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, ch - Audio Input + {title} @@ -125,7 +139,7 @@ const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, ch css={{ px: '$8', maxHeight: '80vh', - overflowY: 'scroll', + overflowY: 'auto', }} > {outputDevices.map(audioDevice => { From 3319351408dd7c7e45e3041b523b6c05044de491 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Tue, 31 Oct 2023 18:31:58 +0530 Subject: [PATCH 09/12] fix: renaming --- .../src/Prebuilt/components/Header/Header.tsx | 4 +-- .../src/Prebuilt/components/Header/common.jsx | 36 +++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/Header.tsx b/packages/roomkit-react/src/Prebuilt/components/Header/Header.tsx index a93c98ff11..abea666ef3 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/Header.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/Header.tsx @@ -7,7 +7,7 @@ import { Logo, SpeakerTag } from './HeaderComponents'; // @ts-ignore: No implicit any import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions'; // @ts-ignore: No implicit any -import { AudioOutputActions, CamaraFlipActions } from './common'; +import { AudioActions, CamaraFlipActions } from './common'; export const Header = () => { const roomState = useHMSStore(selectRoomState); @@ -40,7 +40,7 @@ export const Header = () => { {isMobile ? ( <> - + ) : null} diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index 91e578b445..71781e50ab 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -57,7 +57,7 @@ export const CamaraFlipActions = () => { }; // It will handle and show audio input devices in Mweb while audio output devices in desktop -export const AudioOutputActions = () => { +export const AudioActions = () => { const { allDevices, selectedDeviceIDs, updateDevice } = useDevices(); // don't show speaker selector where the API is not supported, and use @@ -73,28 +73,28 @@ export const AudioOutputActions = () => { selectedAudio = selectedDeviceIDs.audioOutput; } const hmsActions = useHMSActions(); - const audioInputFiltered = currentAudio?.filter(item => !!item.label) ?? []; - const audioInputLabel = currentAudio?.filter(item => item.deviceId === selectedAudio)?.[0]; + const audioFiltered = currentAudio?.find(item => !!item.label); + const audioLabel = currentAudio?.find(item => item.deviceId === selectedAudio); - if (!(audioInputFiltered?.length > 0)) { + if (!audioFiltered) { return null; } - let AudioInputIcon = ; - if (audioInputLabel && audioInputLabel.label.toLowerCase().includes('bluetooth')) { - AudioInputIcon = ; - } else if (audioInputLabel && audioInputLabel.label.toLowerCase().includes('wired')) { - AudioInputIcon = ; + let AudioIcon = ; + if (audioLabel && audioLabel.label.toLowerCase().includes('bluetooth')) { + AudioIcon = ; + } else if (audioLabel && audioLabel.label.toLowerCase().includes('wired')) { + AudioIcon = ; } return ( - { try { await updateDevice({ deviceId, - deviceType: DeviceType.audioInput, + deviceType: shouldShowAudioOutput ? DeviceType.audioOutput : DeviceType.audioInput, }); } catch (e) { ToastManager.addToast({ @@ -110,13 +110,13 @@ export const AudioOutputActions = () => { await hmsActions.refreshDevices(); }} > - {AudioInputIcon} + {AudioIcon} - + ); }; -const AudioOutputSelectionSheet = ({ title, outputDevices, outputSelected, onChange, children }) => { +const AudioSelectionSheet = ({ title, audioDevices, audioSelected, onChange, children }) => { return ( {children} @@ -142,13 +142,13 @@ const AudioOutputSelectionSheet = ({ title, outputDevices, outputSelected, onCha overflowY: 'auto', }} > - {outputDevices.map(audioDevice => { + {audioDevices.map(audioDevice => { return ( onChange(audioDevice.deviceId)} /> ); From f16724603f467f382415194c4b93f3366eb7511c Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Tue, 31 Oct 2023 18:46:35 +0530 Subject: [PATCH 10/12] fix: minor renaming --- .../src/Prebuilt/components/Header/common.jsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index 71781e50ab..18a9b7ba57 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -66,28 +66,25 @@ export const AudioActions = () => { const { audioInput, audioOutput } = allDevices; let currentAudio = audioInput; let selectedAudio = selectedDeviceIDs.audioInput; - let title = 'Audio Input'; if (shouldShowAudioOutput) { - title = 'Audio Output'; currentAudio = audioOutput; selectedAudio = selectedDeviceIDs.audioOutput; } const hmsActions = useHMSActions(); const audioFiltered = currentAudio?.find(item => !!item.label); - const audioLabel = currentAudio?.find(item => item.deviceId === selectedAudio); + const currentSelection = currentAudio?.find(item => item.deviceId === selectedAudio); if (!audioFiltered) { return null; } let AudioIcon = ; - if (audioLabel && audioLabel.label.toLowerCase().includes('bluetooth')) { + if (currentSelection && currentSelection.label.toLowerCase().includes('bluetooth')) { AudioIcon = ; - } else if (audioLabel && audioLabel.label.toLowerCase().includes('wired')) { + } else if (currentSelection && currentSelection.label.toLowerCase().includes('wired')) { AudioIcon = ; } return ( { @@ -98,7 +95,7 @@ export const AudioActions = () => { }); } catch (e) { ToastManager.addToast({ - title: `Error while changing audio input ${e.message || ''}`, + title: `Error while changing audio device ${e.message || ''}`, variant: 'error', }); } @@ -116,7 +113,7 @@ export const AudioActions = () => { ); }; -const AudioSelectionSheet = ({ title, audioDevices, audioSelected, onChange, children }) => { +const AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => { return ( {children} @@ -124,7 +121,7 @@ const AudioSelectionSheet = ({ title, audioDevices, audioSelected, onChange, chi - {title} + Audio From 762dcf3d3bc47a56ff2edaa1bc8b23573c9f2ae7 Mon Sep 17 00:00:00 2001 From: raviteja83 Date: Tue, 31 Oct 2023 18:53:01 +0530 Subject: [PATCH 11/12] refactor: rename --- .../src/Prebuilt/components/Header/common.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index 18a9b7ba57..a61d03eeff 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -64,15 +64,15 @@ export const AudioActions = () => { // 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; const { audioInput, audioOutput } = allDevices; - let currentAudio = audioInput; + let availableAudioDevices = audioInput; let selectedAudio = selectedDeviceIDs.audioInput; if (shouldShowAudioOutput) { - currentAudio = audioOutput; + availableAudioDevices = audioOutput; selectedAudio = selectedDeviceIDs.audioOutput; } const hmsActions = useHMSActions(); - const audioFiltered = currentAudio?.find(item => !!item.label); - const currentSelection = currentAudio?.find(item => item.deviceId === selectedAudio); + const audioFiltered = availableAudioDevices?.find(item => !!item.label); + const currentSelection = availableAudioDevices?.find(item => item.deviceId === selectedAudio); if (!audioFiltered) { return null; @@ -85,7 +85,7 @@ export const AudioActions = () => { } return ( { try { From 277a7caa64981667b406c1306b084b8fdd7a1f00 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Tue, 31 Oct 2023 19:03:00 +0530 Subject: [PATCH 12/12] fix: used onmount --- .../components/Settings/DeviceSettings.jsx | 23 +++++++------------ 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx b/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx index 1ece586bfd..38abab0ea0 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx @@ -37,6 +37,12 @@ const Settings = ({ setHide }) => { const track = useHMSStore(trackSelector); const isMobile = useMedia(cssConfig.media.md); + useEffect(() => { + if (isMobile) { + hmsActions.refreshDevices(); + } + }, [hmsActions, isMobile]); + /** * Chromium browsers return an audioOutput with empty label when no permissions are given */ @@ -90,11 +96,6 @@ const Settings = ({ setHide }) => { deviceType: DeviceType.audioInput, }) } - refreshDevices={async () => { - if (isMobile) { - await hmsActions.refreshDevices(); - } - }} /> ) : null} @@ -118,7 +119,7 @@ const Settings = ({ setHide }) => { ); }; -const DeviceSelector = ({ title, devices, selection, onChange, icon, refreshDevices = null, children = null }) => { +const DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => { const [open, setOpen] = useState(false); const selectionBg = useDropdownSelection(); const ref = useRef(null); @@ -148,15 +149,7 @@ const DeviceSelector = ({ title, devices, selection, onChange, icon, refreshDevi }, }} > - { - if (refreshDevices) { - await refreshDevices(); - } - setOpen(); - }} - > +