lint; clean up; advanced audio settings switch

app/src/actions/settingsActions.js

@@ -53,6 +53,12 @@ export const toggleShowNotifications = () =>
 		type : 'TOGGLE_SHOW_NOTIFICATIONS'
 	});
 
+export const setShowAdvancedAudio = (showAdvancedAudio) =>
+	({
+		type    : 'SET_SHOW_ADVANCED_AUDIO',
+		payload : { showAdvancedAudio }
+	});
+
 export const setEchoCancellation = (echoCancellation) =>
 	({
 		type    : 'SET_ECHO_CANCELLATION',
@@ -73,14 +79,14 @@ export const setNoiseSuppression = (noiseSuppression) =>
 
 export const setVoiceActivatedUnmute = (voiceActivatedUnmute) =>
 	({
-		type: 'SET_VOICE_ACTIVATED_UNMUTE',
+		type    : 'SET_VOICE_ACTIVATED_UNMUTE',
-		payload: { voiceActivatedUnmute }
+		payload : { voiceActivatedUnmute }
 	});
 
 export const setNoiseThreshold = (noiseThreshold) =>
 	({
-		type: 'SET_NOISE_THRESHOLD',
+		type    : 'SET_NOISE_THRESHOLD',
-		payload: { noiseThreshold }
+		payload : { noiseThreshold }
 	});
 
 export const setDefaultAudio = (audio) =>
@@ -89,21 +95,6 @@ export const setDefaultAudio = (audio) =>
 		payload : { audio }
 	});
 
-export const toggleEchoCancellation = () =>
-	({
-		type : 'TOGGLE_ECHO_CANCELLATION'
-	});
-
-export const toggleAutoGainControl = () =>
-	({
-		type : 'TOGGLE_AUTO_GAIN_CONTROL'
-	});
-
-export const toggleNoiseSuppression = () =>
-	({
-		type : 'TOGGLE_NOISE_SUPPRESSION'
-	});
-
 export const toggleHiddenControls = () =>
 	({
 		type : 'TOGGLE_HIDDEN_CONTROLS'

app/src/components/Containers/Me.js

@@ -494,8 +494,10 @@ const Me = (props) =>
 											>
 												{ micState === 'on' ?
 													<MicIcon
-														color={me.isAutoMuted && settings.voiceActivatedUnmute ? 'secondary' : 'primary'}
+														color={me.isAutoMuted && settings.voiceActivatedUnmute ?
-														style={me.isAutoMuted && settings.voiceActivatedUnmute ? { opacity: noiseVolume }  
+															'secondary' : 'primary'}
+														style={me.isAutoMuted && settings.voiceActivatedUnmute ?
+															{ opacity: noiseVolume }
 															: { opacity: 1 }}
 													/>
 													:

app/src/components/Settings/MediaSettings.js

@@ -59,6 +59,7 @@ const styles = (theme) => ({
 });
 
 const MediaSettings = ({
+	setShowAdvancedAudio,
 	setEchoCancellation,
 	setAutoGainControl,
 	setNoiseSuppression,
@@ -291,86 +292,105 @@ const MediaSettings = ({
 				<FormControlLabel
 					className={classes.setting}
 					control={
-						<Checkbox checked={settings.echoCancellation} onChange={
+						<Checkbox checked={settings.showAdvancedAudio} onChange={
 							(event) => 
 							{
-								setEchoCancellation(event.target.checked);
+								setShowAdvancedAudio(event.target.checked);
-								roomClient.changeAudioDevice(settings.selectedAudioDevice);
 							}}
 						/>}
 					label={intl.formatMessage({
-						id             : 'settings.echoCancellation',
+						id             : 'settings.showAdvancedAudio',
-						defaultMessage : 'Echo cancellation'
+						defaultMessage : 'Show advanced audio settings'
 					})}
 				/>
-				<FormControlLabel
-					className={classes.setting}
-					control={
-						<Checkbox checked={settings.autoGainControl} onChange={
-							(event) => 
-							{
-								setAutoGainControl(event.target.checked);
-								roomClient.changeAudioDevice(settings.selectedAudioDevice);
-							}}
-						/>}
-					label={intl.formatMessage({
-						id             : 'settings.autoGainControl',
-						defaultMessage : 'Auto gain control'
-					})}
-				/>
-				<FormControlLabel
-					className={classes.setting}
-					control={
-						<Checkbox checked={settings.noiseSuppression} onChange={
-							(event) => 
-							{
-								setNoiseSuppression(event.target.checked);
-								roomClient.changeAudioDevice(settings.selectedAudioDevice);
-							}}
-						/>}
-					label={intl.formatMessage({
-						id             : 'settings.noiseSuppression',
-						defaultMessage : 'Noise suppression'
-					})}
-				/>
-				<FormControlLabel
-					className={classes.setting}
-					control={
-						<Checkbox checked={settings.voiceActivatedUnmute} onChange={
-							(event) => 
-							{
-								setVoiceActivatedUnmute(event.target.checked);
-							}}
-						/>}
-					label={intl.formatMessage({
-						id             : 'settings.voiceActivatedUnmute',
-						defaultMessage : 'Voice activated unmute'
-					})}
-				/>
-				<div className={classes.margin} />
-				<Typography gutterBottom>
-					{
-						intl.formatMessage({
-							id             : 'settings.noiseThreshold',
-							defaultMessage : 'Noise threshold:'
-						})
-					}
-				</Typography>
-				<NoiseSlider className={classnames(classes.slider, classnames.setting)} 
-					key={'noise-threshold-slider'}
-					min={-100}
-					value={settings.noiseThreshold}
-					max={0} 
-					valueLabelDisplay={'off'}
-					onChange={
-						(event, value) =>
-						{
-							roomClient._setNoiseThreshold(value);
-						}}
-					marks={[ { value: volume, label: 'level' } ]}  
-				/>
-				<div className={classes.margin} />
 			</form>
+			{settings.showAdvancedAudio ?
+				<form className={classes.setting} autoComplete='off'>
+					<FormControlLabel
+						className={classes.setting}
+						control={
+							<Checkbox checked={settings.echoCancellation} onChange={
+								(event) => 
+								{
+									setEchoCancellation(event.target.checked);
+									roomClient.changeAudioDevice(settings.selectedAudioDevice);
+								}}
+							/>}
+						label={intl.formatMessage({
+							id             : 'settings.echoCancellation',
+							defaultMessage : 'Echo cancellation'
+						})}
+					/>
+					<FormControlLabel
+						className={classes.setting}
+						control={
+							<Checkbox checked={settings.autoGainControl} onChange={
+								(event) => 
+								{
+									setAutoGainControl(event.target.checked);
+									roomClient.changeAudioDevice(settings.selectedAudioDevice);
+								}}
+							/>}
+						label={intl.formatMessage({
+							id             : 'settings.autoGainControl',
+							defaultMessage : 'Auto gain control'
+						})}
+					/>
+					<FormControlLabel
+						className={classes.setting}
+						control={
+							<Checkbox checked={settings.noiseSuppression} onChange={
+								(event) => 
+								{
+									setNoiseSuppression(event.target.checked);
+									roomClient.changeAudioDevice(settings.selectedAudioDevice);
+								}}
+							/>}
+						label={intl.formatMessage({
+							id             : 'settings.noiseSuppression',
+							defaultMessage : 'Noise suppression'
+						})}
+					/>
+					<FormControlLabel
+						className={classes.setting}
+						control={
+							<Checkbox checked={settings.voiceActivatedUnmute} onChange={
+								(event) => 
+								{
+									setVoiceActivatedUnmute(event.target.checked);
+								}}
+							/>}
+						label={intl.formatMessage({
+							id             : 'settings.voiceActivatedUnmute',
+							defaultMessage : 'Voice activated unmute'
+						})}
+					/>
+					<div className={classes.margin} />
+					<Typography gutterBottom>
+						{
+							intl.formatMessage({
+								id             : 'settings.noiseThreshold',
+								defaultMessage : 'Noise threshold:'
+							})
+						}
+					</Typography>
+					<NoiseSlider className={classnames(classes.slider, classnames.setting)} 
+						key={'noise-threshold-slider'}
+						min={-100}
+						value={settings.noiseThreshold}
+						max={0} 
+						valueLabelDisplay={'off'}
+						onChange={
+							(event, value) =>
+							{
+								roomClient._setNoiseThreshold(value);
+							}}
+						marks={[ { value: volume, label: 'level' } ]}  
+					/>
+					<div className={classes.margin} />
+				</form>
+				: null
+			}
 		</React.Fragment>
 	);
 };
@@ -378,6 +398,7 @@ const MediaSettings = ({
 MediaSettings.propTypes =
 {
 	roomClient              : PropTypes.any.isRequired,
+	setShowAdvancedAudio    : PropTypes.func.isRequired,
 	setEchoCancellation     : PropTypes.func.isRequired,
 	setAutoGainControl      : PropTypes.func.isRequired,
 	setNoiseSuppression     : PropTypes.func.isRequired,
@@ -398,9 +419,10 @@ const mapStateToProps = (state) =>
 };
 
 const mapDispatchToProps = {
+	setShowAdvancedAudio    : settingsActions.setShowAdvancedAudio,
 	setEchoCancellation     : settingsActions.setEchoCancellation,
-	setAutoGainControl      : settingsActions.toggleAutoGainControl,
+	setAutoGainControl      : settingsActions.setAutoGainControl,
-	setNoiseSuppression     : settingsActions.toggleNoiseSuppression,
+	setNoiseSuppression     : settingsActions.setNoiseSuppression,
 	setVoiceActivatedUnmute : settingsActions.setVoiceActivatedUnmute
 };
 

app/src/reducers/settings.js

@@ -7,6 +7,7 @@ const initialState =
 	sampleRate           : 48000,
 	channelCount         : 1,
 	volume               : 1.0,
+	showAdvancedAudio    : false,
 	autoGainControl      : false,
 	echoCancellation     : true,
 	noiseSuppression     : true,
@@ -79,6 +80,12 @@ const settings = (state = initialState, action) =>
 
 			return { ...state, volume };
 		}
+		case 'SET_SHOW_ADVANCED_AUDIO':
+		{
+			const { showAdvancedAudio } = action.payload;
+
+			return { ...state, showAdvancedAudio };
+		}
 
 		case 'SET_AUTO_GAIN_CONTROL':
 		{
@@ -122,27 +129,6 @@ const settings = (state = initialState, action) =>
 			return { ...state, audio };
 		}
 
-		case 'TOGGLE_AUTO_GAIN_CONTROL':
-		{
-			const autoGainControl = !state.autoGainControl;
-
-			return { ...state, autoGainControl };
-		}
-
-		case 'TOGGLE_ECHO_CANCELLATION':
-		{
-			const echoCancellation = !state.echoCancellation;
-
-			return { ...state, echoCancellation };
-		}
-
-		case 'TOGGLE_NOISE_SUPPRESSION':
-		{
-			const noiseSuppression = !state.noiseSuppression;
-
-			return { ...state, noiseSuppression };
-		}
-
 		case 'SET_SAMPLE_SIZE':
 		{
 			const { sampleSize } = action.payload;