advanced audio settings as collapsed list

app/src/actions/settingsActions.js

@@ -53,12 +53,6 @@ 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',

app/src/components/Settings/MediaSettings.js

@@ -12,9 +12,15 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Select from '@material-ui/core/Select';
-import Checkbox from '@material-ui/core/Checkbox';
 import Slider from '@material-ui/core/Slider';
 import Typography from '@material-ui/core/Typography';
+import Collapse from '@material-ui/core/Collapse';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import Switch from '@material-ui/core/Switch';
 
 const NoiseSlider = withStyles(
 	{
@@ -52,6 +58,19 @@ const styles = (theme) => ({
 	{
 		height : theme.spacing(3)
 	},
+	root : {
+		width           : '100%',
+		backgroundColor : theme.palette.background.paper
+	},
+	switchLabel : {
+		justifyContent : 'space-between',
+		flex           : 'auto',
+		display        : 'flex'
+	},
+	nested : {
+		paddingLeft : theme.spacing(2),
+		display     : 'block'
+	},
 	formControl :
 	{
 		display : 'flex'
@@ -59,7 +78,6 @@ const styles = (theme) => ({
 });
 
 const MediaSettings = ({
-	setShowAdvancedAudio,
 	setEchoCancellation,
 	setAutoGainControl,
 	setNoiseSuppression,
@@ -130,6 +148,13 @@ const MediaSettings = ({
 	else
 		audioOutputDevices = [];
 
+	const [ open, setOpen ] = React.useState(true);
+
+	const advancedAudioSettings = () =>
+	{
+		setOpen(!open);
+	};
+
 	return (
 		<React.Fragment>
 			<form className={classes.setting} autoComplete='off'>
@@ -288,83 +313,94 @@ const MediaSettings = ({
 					</FormControl>
 				</form>
 			}
-			<form className={classes.setting} autoComplete='off'>
+			<List className={classes.root} component='nav'>
-				<FormControlLabel
+				<ListItem button onClick={advancedAudioSettings}>
-					className={classes.setting}
+					<ListItemText primary={intl.formatMessage({
-					control={
-						<Checkbox checked={settings.showAdvancedAudio} onChange={
-							(event) =>
-							{
-								setShowAdvancedAudio(event.target.checked);
-							}}
-						/>}
-					label={intl.formatMessage({
 						id             : 'settings.showAdvancedAudio',
 						defaultMessage : 'Show advanced audio settings'
 					})}
 					/>
-			</form>
+					{open ? <ExpandLess /> : <ExpandMore />}
-			{settings.showAdvancedAudio ?
+				</ListItem>
-				<form className={classes.setting} autoComplete='off'>
+				<Collapse in={!open} timeout='auto'>
+					<List component='div'>
+						<ListItem className={classes.nested}>
 							<FormControlLabel
-						className={classes.setting}
+								className={classnames(classes.setting, classes.switchLabel)}
 								control={
-							<Checkbox checked={settings.echoCancellation} onChange={
+									<Switch color='secondary'
+										checked={settings.echoCancellation}
+										onChange={
 											(event) =>
 											{
 												setEchoCancellation(event.target.checked);
 												roomClient.changeAudioDevice(settings.selectedAudioDevice);
 											}}
 									/>}
+								labelPlacement='start'
 								label={intl.formatMessage({
 									id             : 'settings.echoCancellation',
 									defaultMessage : 'Echo cancellation'
 								})}
 							/>
+						</ListItem>
+						<ListItem className={classes.nested}>
 							<FormControlLabel
-						className={classes.setting}
+								className={classnames(classes.setting, classes.switchLabel)}
 								control={
-							<Checkbox checked={settings.autoGainControl} onChange={
+									<Switch color='secondary'
+										checked={settings.autoGainControl} onChange={
 											(event) =>
 											{
 												setAutoGainControl(event.target.checked);
 												roomClient.changeAudioDevice(settings.selectedAudioDevice);
 											}}
 									/>}
+								labelPlacement='start'
 								label={intl.formatMessage({
 									id             : 'settings.autoGainControl',
 									defaultMessage : 'Auto gain control'
 								})}
 							/>
+						</ListItem>
+						<ListItem className={classes.nested}>
 							<FormControlLabel
-						className={classes.setting}
+								className={classnames(classes.setting, classes.switchLabel)}
 								control={
-							<Checkbox checked={settings.noiseSuppression} onChange={
+									<Switch color='secondary'
+										checked={settings.noiseSuppression} onChange={
 											(event) =>
 											{
 												setNoiseSuppression(event.target.checked);
 												roomClient.changeAudioDevice(settings.selectedAudioDevice);
 											}}
 									/>}
+								labelPlacement='start'
 								label={intl.formatMessage({
 									id             : 'settings.noiseSuppression',
 									defaultMessage : 'Noise suppression'
 								})}
 							/>
+						</ListItem>
+						<ListItem className={classes.nested}>
 							<FormControlLabel
-						className={classes.setting}
+								className={classnames(classes.setting, classes.switchLabel)}
 								control={
-							<Checkbox checked={settings.voiceActivatedUnmute} onChange={
+									<Switch color='secondary'
+										checked={settings.voiceActivatedUnmute} onChange={
 											(event) =>
 											{
 												setVoiceActivatedUnmute(event.target.checked);
 											}}
 									/>}
+								labelPlacement='start'
 								label={intl.formatMessage({
 									id             : 'settings.voiceActivatedUnmute',
 									defaultMessage : 'Voice activated unmute'
 								})}
 							/>
+						</ListItem>
+						<ListItem className={classes.nested}>
 							<div className={classes.margin} />
 							<Typography gutterBottom>
 								{
@@ -385,12 +421,13 @@ const MediaSettings = ({
 									{
 										roomClient._setNoiseThreshold(value);
 									}}
-						marks={[ { value: volume, label: 'level' } ]}
+								marks={[ { value: volume, label: volume+'dB' } ]}
 							/>
 							<div className={classes.margin} />
-				</form>
+						</ListItem>
-				: null
+					</List>
-			}
+				</Collapse>
+			</List>
 		</React.Fragment>
 	);
 };
@@ -398,7 +435,6 @@ const MediaSettings = ({
 MediaSettings.propTypes =
 {
 	roomClient              : PropTypes.any.isRequired,
-	setShowAdvancedAudio    : PropTypes.func.isRequired,
 	setEchoCancellation     : PropTypes.func.isRequired,
 	setAutoGainControl      : PropTypes.func.isRequired,
 	setNoiseSuppression     : PropTypes.func.isRequired,
@@ -419,7 +455,6 @@ const mapStateToProps = (state) =>
 };
 
 const mapDispatchToProps = {
-	setShowAdvancedAudio    : settingsActions.setShowAdvancedAudio,
 	setEchoCancellation     : settingsActions.setEchoCancellation,
 	setAutoGainControl      : settingsActions.setAutoGainControl,
 	setNoiseSuppression     : settingsActions.setNoiseSuppression,

app/src/reducers/settings.js

@@ -7,7 +7,6 @@ const initialState =
 	sampleRate           : 48000,
 	channelCount         : 1,
 	volume               : 1.0,
-	showAdvancedAudio    : false,
 	autoGainControl      : false,
 	echoCancellation     : true,
 	noiseSuppression     : true,
@@ -80,12 +79,6 @@ 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':
 		{