import classNames from 'classnames/bind' ; import React , { useContext } from 'react' ; import Dropdown from 'react-dropdown' ; import { useIntl } from 'react-intl' ; import ChimeSdkWrapper from '../chime/ChimeSdkWrapper' ; import getChimeContext from '../context/getChimeContext' ; import useDevices from '../hooks/useDevices' ; import DeviceType from '../types/DeviceType' ; import styles from './DeviceSwitcher.css' ; const cx = classNames . bind ( styles ) ; export default function DeviceSwitcher ( ) { const chime = useContext ( getChimeContext ( ) ) ; const intl = useIntl ( ) ; const deviceSwitcherState = useDevices ( ) ; return ( < div className = { cx ( 'deviceList' ) } > < Dropdown className = { cx ( 'dropdown' ) } controlClassName = { cx ( 'control' ) } placeholderClassName = { cx ( 'placeholder' ) } menuClassName = { cx ( 'menu' ) } arrowClassName = { cx ( 'arrow' ) } value = { deviceSwitcherState . currentAudioInputDevice || undefined } options = { deviceSwitcherState . audioInputDevices || ( [ ] as DeviceType [ ] ) } disabled = { ! deviceSwitcherState . audioInputDevices || ! deviceSwitcherState . audioInputDevices . length } onChange = { async ( selectedDevice ) => { await chime ?. chooseAudioInputDevice ( selectedDevice ) ; } } placeholder = { deviceSwitcherState . currentAudioInputDevice ? intl . formatMessage ( { id : 'DeviceSwitcher.noAudioInputPlaceholder' } ) : '' } / > < Dropdown className = { cx ( 'dropdown' ) } controlClassName = { cx ( 'control' ) } placeholderClassName = { cx ( 'placeholder' ) } menuClassName = { cx ( 'menu' ) } arrowClassName = { cx ( 'arrow' ) } value = { deviceSwitcherState . currentAudioOutputDevice || undefined } options = { deviceSwitcherState . audioOutputDevices || ( [ ] as DeviceType [ ] ) } disabled = { ! deviceSwitcherState . audioOutputDevices || ! deviceSwitcherState . audioOutputDevices . length } onChange = { async ( selectedDevice ) => { await chime ?. chooseAudioOutputDevice ( selectedDevice ) ; } } placeholder = { deviceSwitcherState . currentAudioOutputDevice ? intl . formatMessage ( { id : 'DeviceSwitcher.noAudioOutputPlaceholder' } ) : '' } / > < Dropdown className = { cx ( 'dropdown' ) } controlClassName = { cx ( 'control' ) } placeholderClassName = { cx ( 'placeholder' ) } menuClassName = { cx ( 'menu' ) } arrowClassName = { cx ( 'arrow' ) } value = { deviceSwitcherState . currentVideoInputDevice || undefined } options = { deviceSwitcherState . videoInputDevices || ( [ ] as DeviceType [ ] ) } disabled = { ! deviceSwitcherState . videoInputDevices || ! deviceSwitcherState . videoInputDevices . length } onChange = { async ( selectedDevice ) => { await chime ?. chooseVideoInputDevice ( selectedDevice ) ; } } placeholder = { deviceSwitcherState . currentVideoInputDevice ? intl . formatMessage ( { id : 'DeviceSwitcher.noVideoInputPlaceholder' } ) : '' } / > < /div>); }