diff --git a/app/lib/components/Settings.jsx b/app/lib/components/Settings.jsx index 9cc270d..d0d3572 100644 --- a/app/lib/components/Settings.jsx +++ b/app/lib/components/Settings.jsx @@ -14,112 +14,75 @@ const modes = [ { label : 'Filmstrip view' } ]; -class Settings extends React.Component +const findOption = (options, value) => options.find((option) => option.value === value); + +const Settings = ({ + room, me, onToggleAdvancedMode, handleChangeWebcam, + handleChangeAudioDevice, handleChangeMode +}) => { - state = { - selectedCamera : null, - selectedAudioDevice : null, - selectedMode : modes[0] - }; + let webcams; + let webcamText; - handleChangeWebcam = (webcam) => - { - this.props.handleChangeWebcam(webcam.value); + if (me.canChangeWebcam) + webcamText = 'Select camera'; + else + webcamText = 'Unable to select camera'; - this.setState({ - selectedCamera : webcam - }); - } + if (me.webcamDevices) + webcams = Array.from(me.webcamDevices.values()); + else + webcams = []; - handleChangeAudioDevice = (device) => - { - this.props.handleChangeAudioDevice(device.value); + let audioDevices; + let audioDevicesText; - this.setState({ - selectedAudioDevice : device - }); - } - - handleChangeMode = (mode) => - { - this.setState({ - selectedMode : mode - }); + if (me.canChangeAudioDevice) + audioDevicesText = 'Select audio input device'; + else + audioDevicesText = 'Unable to select audio input device'; - this.props.handleChangeMode(mode.value); - }; + if (me.audioDevices) + audioDevices = Array.from(me.audioDevices.values()); + else + audioDevices = []; - render() - { - const { - room, - me, - onToggleAdvancedMode - } = this.props; + return ( +
+
+ handleChangeWebcam(webcam.value)} + placeholder={webcamText} + /> + + handleChangeAudioDevice(device.value)} + placeholder={audioDevicesText} + /> - let webcams; - let webcamText; + + - if (me.canChangeWebcam) - webcamText = 'Select camera'; - else - webcamText = 'Unable to select camera'; - - if (me.webcamDevices) - webcams = Array.from(me.webcamDevices.values()); - else - webcams = []; - - let audioDevices; - let audioDevicesText; - - if (me.canChangeAudioDevice) - audioDevicesText = 'Select audio input device'; - else - audioDevicesText = 'Unable to select audio input device'; - - if (me.audioDevices) - audioDevices = Array.from(me.audioDevices.values()); - else - audioDevices = []; - - return ( -
-
- - - - - - - - -
+ handleChangeMode(mode.value)} + />
- ); - } -} +
+ ); +}; Settings.propTypes = { diff --git a/app/lib/redux/reducers/me.js b/app/lib/redux/reducers/me.js index 0b8db12..a651583 100644 --- a/app/lib/redux/reducers/me.js +++ b/app/lib/redux/reducers/me.js @@ -22,7 +22,9 @@ const initialState = raiseHand : false, raiseHandInProgress : false, restartIceInProgress : false, - picture : null + picture : null, + selectedWebcam : null, + selectedAudioDevice : null }; const me = (state = initialState, action) => @@ -49,6 +51,16 @@ const me = (state = initialState, action) => }; } + case 'CHANGE_WEBCAM': + { + return { ...state, selectedWebcam: action.payload.deviceId }; + } + + case 'CHANGE_AUDIO_DEVICE': + { + return { ...state, selectedAudioDevice: action.payload.deviceId }; + } + case 'SET_MEDIA_CAPABILITIES': { const { canSendMic, canSendWebcam } = action.payload;