Ensure sidebar settings state is not reset on sidebar toggle

app/lib/components/Settings.jsx

@@ -14,49 +14,13 @@ 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]
-	};
-
-	handleChangeWebcam = (webcam) =>
-	{
-		this.props.handleChangeWebcam(webcam.value);
-
-		this.setState({
-			selectedCamera : webcam
-		});
-	}
-
-	handleChangeAudioDevice = (device) =>
-	{
-		this.props.handleChangeAudioDevice(device.value);
-
-		this.setState({
-			selectedAudioDevice : device
-		});
-	}
-	
-	handleChangeMode = (mode) =>
-	{
-		this.setState({
-			selectedMode : mode
-		});
-
-		this.props.handleChangeMode(mode.value);
-	};
-
-	render()
-	{	
-		const {
-			room,
-			me,
-			onToggleAdvancedMode
-		} = this.props;
-
 	let webcams;
 	let webcamText;
 
@@ -89,16 +53,16 @@ class Settings extends React.Component
 				<Dropdown
 					disabled={!me.canChangeWebcam}
 					options={webcams}
-						value={this.state.selectedCamera}
+					value={findOption(webcams, me.selectedWebcam)}
-						onChange={this.handleChangeWebcam}
+					onChange={(webcam) => handleChangeWebcam(webcam.value)}
 					placeholder={webcamText}
 				/>
 			
 				<Dropdown
 					disabled={!me.canChangeAudioDevice}
 					options={audioDevices}
-						value={this.state.selectedAudioDevice}
+					value={findOption(audioDevices, me.selectedAudioDevice)}
-						onChange={this.handleChangeAudioDevice}
+					onChange={(device) => handleChangeAudioDevice(device.value)}
 					placeholder={audioDevicesText}
 				/>
 
@@ -112,14 +76,13 @@ class Settings extends React.Component
 
 				<Dropdown
 					options={modes}
-						value={this.state.selectedMode}
+					value={findOption(modes, room.mode)}
-						onChange={this.handleChangeMode}
+					onChange={(mode) => handleChangeMode(mode.value)}
 				/>
 			</div>
 		</div>
 	);
-	}
+};
-}
 
 Settings.propTypes =
 {

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;