Started work on settings dialog. Possible to switch camera.

app/lib/components/Me.jsx

@@ -35,8 +35,7 @@ class Me extends React.Component
 			onMuteMic,
 			onUnmuteMic,
 			onEnableWebcam,
-			onDisableWebcam,
-			onChangeWebcam
+			onDisableWebcam
 		} = this.props;
 
 		let micState;
@@ -59,13 +58,6 @@ class Me extends React.Component
 		else
 			webcamState = 'off';
 
-		let changeWebcamState;
-
-		if (Boolean(webcamProducer) && me.canChangeWebcam)
-			changeWebcamState = 'on';
-		else
-			changeWebcamState = 'unsupported';
-
 		const videoVisible = (
 			Boolean(webcamProducer) &&
 			!webcamProducer.locallyPaused &&
@@ -104,13 +96,6 @@ class Me extends React.Component
 								webcamState === 'on' ? onDisableWebcam() : onEnableWebcam();
 							}}
 						/>
-
-						<div
-							className={classnames('button', 'change-webcam', changeWebcamState, {
-								disabled : me.webcamInProgress
-							})}
-							onClick={() => onChangeWebcam()}
-						/>
 					</div>
 					:null
 				}
@@ -179,8 +164,7 @@ Me.propTypes =
 	onMuteMic           : PropTypes.func.isRequired,
 	onUnmuteMic         : PropTypes.func.isRequired,
 	onEnableWebcam      : PropTypes.func.isRequired,
-	onDisableWebcam     : PropTypes.func.isRequired,
-	onChangeWebcam      : PropTypes.func.isRequired
+	onDisableWebcam     : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) =>
@@ -209,8 +193,7 @@ const mapDispatchToProps = (dispatch) =>
 		onMuteMic       : () => dispatch(requestActions.muteMic()),
 		onUnmuteMic     : () => dispatch(requestActions.unmuteMic()),
 		onEnableWebcam  : () => dispatch(requestActions.enableWebcam()),
-		onDisableWebcam : () => dispatch(requestActions.disableWebcam()),
-		onChangeWebcam  : () => dispatch(requestActions.changeWebcam())
+		onDisableWebcam : () => dispatch(requestActions.disableWebcam())
 	};
 };
 

app/lib/components/Room.jsx

@@ -5,12 +5,14 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import ClipboardButton from 'react-clipboard.js';
 import * as appPropTypes from './appPropTypes';
+import * as stateActions from '../redux/stateActions';
 import * as requestActions from '../redux/requestActions';
 import { Appear } from './transitions';
 import Me from './Me';
 import Peers from './Peers';
 import Notifications from './Notifications';
 import ChatWidget from './ChatWidget';
+import Settings from './Settings';
 
 class Room extends React.Component
 {
@@ -24,6 +26,7 @@ class Room extends React.Component
 			onRoomLinkCopy,
 			onSetAudioMode,
 			onRestartIce,
+			onToggleSettings,
 			onShareScreen,
 			onUnShareScreen,
 			onNeedExtension,
@@ -158,6 +161,16 @@ class Room extends React.Component
 							onClick={() => onRestartIce()}
 						/>
 
+						<div
+							className={classnames('button', 'settings', {
+								on  : room.showSettings,
+								off : !room.showSettings
+							})}
+							data-tip='Open settings'
+							data-type='dark'
+							onClick={() => onToggleSettings()}
+						/>
+
 						<div
 							className={classnames('button', 'raise-hand', {
 								on       : me.raiseHand,
@@ -176,6 +189,10 @@ class Room extends React.Component
 						/>
 					</div>
 
+					<Settings
+						onToggleSettings={onToggleSettings}
+					/>
+
 					<ReactTooltip
 						effect='solid'
 						delayShow={100}
@@ -189,18 +206,19 @@ class Room extends React.Component
 
 Room.propTypes =
 {
-	room            : appPropTypes.Room.isRequired,
-	me              : appPropTypes.Me.isRequired,
-	amActiveSpeaker : PropTypes.bool.isRequired,
-	screenProducer  : appPropTypes.Producer,
-	onRoomLinkCopy  : PropTypes.func.isRequired,
-	onSetAudioMode  : PropTypes.func.isRequired,
-	onRestartIce    : PropTypes.func.isRequired,
-	onShareScreen   : PropTypes.func.isRequired,
-	onUnShareScreen : PropTypes.func.isRequired,
-	onNeedExtension : PropTypes.func.isRequired,
-	onToggleHand 	  : PropTypes.func.isRequired,
-	onLeaveMeeting  : PropTypes.func.isRequired
+	room             : appPropTypes.Room.isRequired,
+	me               : appPropTypes.Me.isRequired,
+	amActiveSpeaker  : PropTypes.bool.isRequired,
+	screenProducer   : appPropTypes.Producer,
+	onRoomLinkCopy   : PropTypes.func.isRequired,
+	onSetAudioMode   : PropTypes.func.isRequired,
+	onRestartIce     : PropTypes.func.isRequired,
+	onShareScreen    : PropTypes.func.isRequired,
+	onUnShareScreen  : PropTypes.func.isRequired,
+	onNeedExtension  : PropTypes.func.isRequired,
+	onToggleSettings : PropTypes.func.isRequired,
+	onToggleHand     : PropTypes.func.isRequired,
+	onLeaveMeeting   : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) =>
@@ -238,6 +256,10 @@ const mapDispatchToProps = (dispatch) =>
 		{
 			dispatch(requestActions.restartIce());
 		},
+		onToggleSettings : () =>
+		{
+			dispatch(stateActions.toggleSettings());
+		},
 		onToggleHand : (enable) =>
 		{
 			if (enable)

app/lib/components/Settings.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import * as appPropTypes from './appPropTypes';
+import * as requestActions from '../redux/requestActions';
+import PropTypes from 'prop-types';
+import Dropdown from 'react-dropdown';
+
+class Settings extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+	}
+
+	render()
+	{
+		const {
+			room,
+			me,
+			handleChangeWebcam,
+			onToggleSettings
+		} = this.props;
+
+		if (!room.showSettings)
+			return null;
+
+		const webcams = Object.values(me.webcamDevices);
+
+		return (
+			<div data-component='Settings'>
+				<div className='dialog'>
+					<div className='header'>
+						<span>Settings</span>
+					</div>
+					<div className='settings'>
+						<Dropdown
+							disabled={!me.canChangeWebcam}
+							options={webcams}
+							onChange={handleChangeWebcam}
+							value={webcams[0]}
+							placeholder='No other cameras detected'
+						/>
+					</div>
+					<div className='footer'>
+						<span
+							className='button'
+							onClick={() => onToggleSettings()}
+						>
+							Close
+						</span>
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
+
+Settings.propTypes =
+{
+	me                 : appPropTypes.Me.isRequired,
+	room               : appPropTypes.Room.isRequired,
+	onToggleSettings   : PropTypes.func.isRequired,
+	handleChangeWebcam : PropTypes.func.isRequired
+};
+
+const mapStateToProps = (state) =>
+{
+	return {
+		me   : state.me,
+		room : state.room
+	};
+};
+
+const mapDispatchToProps = (dispatch) =>
+{
+	return {
+		handleChangeWebcam : (device) =>
+		{
+			dispatch(requestActions.changeWebcam(device.value));
+		}
+	};
+};
+
+const SettingsContainer = connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(Settings);
+
+export default SettingsContainer;