From 130ed19f13ad6e42675e9b289b1459a3bc6e2ad1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Sat, 2 May 2020 21:57:53 +0200
Subject: [PATCH] Settings split into tabs.

---
 app/src/actions/roomActions.js                |   8 +-
 app/src/components/Controls/TopBar.js         |   2 +-
 .../components/Settings/AdvancedSettings.js   | 114 +++++
 .../components/Settings/AppearenceSettings.js | 132 ++++++
 app/src/components/Settings/MediaSettings.js  | 284 ++++++++++++
 app/src/components/Settings/Settings.js       | 432 +++---------------
 app/src/reducers/room.js                      |   8 +
 app/src/translations/cn.json                  |   3 +
 app/src/translations/cs.json                  |   3 +
 app/src/translations/de.json                  |   3 +
 app/src/translations/dk.json                  |   3 +
 app/src/translations/el.json                  |   3 +
 app/src/translations/en.json                  |   3 +
 app/src/translations/es.json                  |   3 +
 app/src/translations/fr.json                  |   3 +
 app/src/translations/hr.json                  |   3 +
 app/src/translations/hu.json                  |   3 +
 app/src/translations/it.json                  |   3 +
 app/src/translations/nb.json                  |   3 +
 app/src/translations/pl.json                  |   3 +
 app/src/translations/pt.json                  |   3 +
 app/src/translations/ro.json                  |   3 +
 app/src/translations/tr.json                  |   3 +
 app/src/translations/uk.json                  |   3 +
 24 files changed, 663 insertions(+), 368 deletions(-)
 create mode 100644 app/src/components/Settings/AdvancedSettings.js
 create mode 100644 app/src/components/Settings/AppearenceSettings.js
 create mode 100644 app/src/components/Settings/MediaSettings.js

diff --git a/app/src/actions/roomActions.js b/app/src/actions/roomActions.js
index ac97179..ba9d2dc 100644
--- a/app/src/actions/roomActions.js
+++ b/app/src/actions/roomActions.js
@@ -52,12 +52,18 @@ export const setJoinByAccessCode = (joinByAccessCode) =>
 		payload : { joinByAccessCode }
 	});
 
-export const setSettingsOpen = ({ settingsOpen }) =>
+export const setSettingsOpen = (settingsOpen) =>
 	({
 		type    : 'SET_SETTINGS_OPEN',
 		payload : { settingsOpen }
 	});
 
+export const setSettingsTab = (tab) =>
+	({
+		type    : 'SET_SETTINGS_TAB',
+		payload : { tab }
+	});
+
 export const setLockDialogOpen = ({ lockDialogOpen }) =>
 	({
 		type    : 'SET_LOCK_DIALOG_OPEN',
diff --git a/app/src/components/Controls/TopBar.js b/app/src/components/Controls/TopBar.js
index 7f4be52..9b7ae92 100644
--- a/app/src/components/Controls/TopBar.js
+++ b/app/src/components/Controls/TopBar.js
@@ -427,7 +427,7 @@ const mapDispatchToProps = (dispatch) =>
 		},
 		setSettingsOpen : (settingsOpen) =>
 		{
-			dispatch(roomActions.setSettingsOpen({ settingsOpen }));
+			dispatch(roomActions.setSettingsOpen(settingsOpen));
 		},
 		setLockDialogOpen : (lockDialogOpen) =>
 		{
diff --git a/app/src/components/Settings/AdvancedSettings.js b/app/src/components/Settings/AdvancedSettings.js
new file mode 100644
index 0000000..131395e
--- /dev/null
+++ b/app/src/components/Settings/AdvancedSettings.js
@@ -0,0 +1,114 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import { withRoomContext } from '../../RoomContext';
+import * as settingsActions from '../../actions/settingsActions';
+import PropTypes from 'prop-types';
+import { useIntl, FormattedMessage } from 'react-intl';
+import MenuItem from '@material-ui/core/MenuItem';
+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';
+
+const styles = (theme) =>
+	({
+		setting :
+		{
+			padding : theme.spacing(2)
+		},
+		formControl :
+		{
+			display : 'flex'
+		}
+	});
+
+const AdvancedSettings = ({
+	roomClient,
+	settings,
+	onToggleAdvancedMode,
+	classes
+}) =>
+{
+	const intl = useIntl();
+
+	return (
+		<React.Fragment>
+			<FormControlLabel
+				className={classes.setting}
+				control={<Checkbox checked={settings.advancedMode} onChange={onToggleAdvancedMode} value='advancedMode' />}
+				label={intl.formatMessage({
+					id             : 'settings.advancedMode',
+					defaultMessage : 'Advanced mode'
+				})}
+			/>
+			{ !window.config.lockLastN &&
+				<form className={classes.setting} autoComplete='off'>
+					<FormControl className={classes.formControl}>
+						<Select
+							value={settings.lastN || ''}
+							onChange={(event) =>
+							{
+								if (event.target.value)
+									roomClient.changeMaxSpotlights(event.target.value);
+							}}
+							name='Last N'
+							autoWidth
+							className={classes.selectEmpty}
+						>
+							{ Array.from(
+								{ length: window.config.maxLastN || 10 },
+								(_, i) => i + 1
+							).map((lastN) =>
+							{
+								return (
+									<MenuItem key={lastN} value={lastN}>
+										{lastN}
+									</MenuItem>
+								);
+							})}
+						</Select>
+						<FormHelperText>
+							<FormattedMessage
+								id='settings.lastn'
+								defaultMessage='Number of visible videos'
+							/>
+						</FormHelperText>
+					</FormControl>
+				</form>
+			}
+		</React.Fragment>
+	);
+};
+
+AdvancedSettings.propTypes =
+{
+	roomClient           : PropTypes.any.isRequired,
+	settings             : PropTypes.object.isRequired,
+	onToggleAdvancedMode : PropTypes.func.isRequired,
+	classes              : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) =>
+	({
+		settings : state.settings
+	});
+
+const mapDispatchToProps = {
+	onToggleAdvancedMode : settingsActions.toggleAdvancedMode
+};
+
+export default withRoomContext(connect(
+	mapStateToProps,
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.settings === next.settings
+			);
+		}
+	}
+)(withStyles(styles)(AdvancedSettings)));
\ No newline at end of file
diff --git a/app/src/components/Settings/AppearenceSettings.js b/app/src/components/Settings/AppearenceSettings.js
new file mode 100644
index 0000000..71f250a
--- /dev/null
+++ b/app/src/components/Settings/AppearenceSettings.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import * as appPropTypes from '../appPropTypes';
+import { withStyles } from '@material-ui/core/styles';
+import * as roomActions from '../../actions/roomActions';
+import * as settingsActions from '../../actions/settingsActions';
+import PropTypes from 'prop-types';
+import { useIntl, FormattedMessage } from 'react-intl';
+import MenuItem from '@material-ui/core/MenuItem';
+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';
+
+const styles = (theme) =>
+	({
+		setting :
+		{
+			padding : theme.spacing(2)
+		},
+		formControl :
+		{
+			display : 'flex'
+		}
+	});
+
+const AppearenceSettings = ({
+	room,
+	settings,
+	onTogglePermanentTopBar,
+	handleChangeMode,
+	classes
+}) =>
+{
+	const intl = useIntl();
+
+	const modes = [ {
+		value : 'democratic',
+		label : intl.formatMessage({
+			id             : 'label.democratic',
+			defaultMessage : 'Democratic view'
+		})
+	}, {
+		value : 'filmstrip',
+		label : intl.formatMessage({
+			id             : 'label.filmstrip',
+			defaultMessage : 'Filmstrip view'
+		})
+	} ];
+
+	return (
+		<React.Fragment>
+			<form className={classes.setting} autoComplete='off'>
+				<FormControl className={classes.formControl}>
+					<Select
+						value={room.mode || ''}
+						onChange={(event) =>
+						{
+							if (event.target.value)
+								handleChangeMode(event.target.value);
+						}}
+						name={intl.formatMessage({
+							id             : 'settings.layout',
+							defaultMessage : 'Room layout'
+						})}
+						autoWidth
+						className={classes.selectEmpty}
+					>
+						{ modes.map((mode, index) =>
+						{
+							return (
+								<MenuItem key={index} value={mode.value}>
+									{mode.label}
+								</MenuItem>
+							);
+						})}
+					</Select>
+					<FormHelperText>
+						<FormattedMessage
+							id='settings.selectRoomLayout'
+							defaultMessage='Select room layout'
+						/>
+					</FormHelperText>
+				</FormControl>
+			</form>
+			<FormControlLabel
+				className={classes.setting}
+				control={<Checkbox checked={settings.permanentTopBar} onChange={onTogglePermanentTopBar} value='permanentTopBar' />}
+				label={intl.formatMessage({
+					id             : 'settings.permanentTopBar',
+					defaultMessage : 'Permanent top bar'
+				})}
+			/>
+		</React.Fragment>
+	);
+};
+
+AppearenceSettings.propTypes =
+{
+	room                    : appPropTypes.Room.isRequired,
+	settings                : PropTypes.object.isRequired,
+	onTogglePermanentTopBar : PropTypes.func.isRequired,
+	handleChangeMode        : PropTypes.func.isRequired,
+	classes                 : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) =>
+	({
+		room     : state.room,
+		settings : state.settings
+	});
+
+const mapDispatchToProps = {
+	onTogglePermanentTopBar : settingsActions.togglePermanentTopBar,
+	handleChangeMode        : roomActions.setDisplayMode
+};
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.room === next.room &&
+				prev.settings === next.settings
+			);
+		}
+	}
+)(withStyles(styles)(AppearenceSettings));
\ No newline at end of file
diff --git a/app/src/components/Settings/MediaSettings.js b/app/src/components/Settings/MediaSettings.js
new file mode 100644
index 0000000..fa9728b
--- /dev/null
+++ b/app/src/components/Settings/MediaSettings.js
@@ -0,0 +1,284 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import * as appPropTypes from '../appPropTypes';
+import { withStyles } from '@material-ui/core/styles';
+import { withRoomContext } from '../../RoomContext';
+import PropTypes from 'prop-types';
+import { useIntl, FormattedMessage } from 'react-intl';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const styles = (theme) =>
+	({
+		setting :
+		{
+			padding : theme.spacing(2)
+		},
+		formControl :
+		{
+			display : 'flex'
+		}
+	});
+
+const MediaSettings = ({
+	roomClient,
+	me,
+	settings,
+	classes
+}) =>
+{
+	const intl = useIntl();
+	
+	const resolutions = [ {
+		value : 'low',
+		label : intl.formatMessage({
+			id             : 'label.low',
+			defaultMessage : 'Low'
+		})
+	},
+	{
+		value : 'medium',
+		label : intl.formatMessage({
+			id             : 'label.medium',
+			defaultMessage : 'Medium'
+		})
+	},
+	{
+		value : 'high',
+		label : intl.formatMessage({
+			id             : 'label.high',
+			defaultMessage : 'High (HD)'
+		})
+	},
+	{
+		value : 'veryhigh',
+		label : intl.formatMessage({
+			id             : 'label.veryHigh',
+			defaultMessage : 'Very high (FHD)'
+		})
+	},
+	{
+		value : 'ultra',
+		label : intl.formatMessage({
+			id             : 'label.ultra',
+			defaultMessage : 'Ultra (UHD)'
+		})
+	} ];
+
+	let webcams;
+
+	if (me.webcamDevices)
+		webcams = Object.values(me.webcamDevices);
+	else
+		webcams = [];
+
+	let audioDevices;
+
+	if (me.audioDevices)
+		audioDevices = Object.values(me.audioDevices);
+	else
+		audioDevices = [];
+		
+	let audioOutputDevices;
+
+	if (me.audioOutputDevices)
+		audioOutputDevices = Object.values(me.audioOutputDevices);
+	else
+		audioOutputDevices = [];
+
+	return (
+		<React.Fragment>
+			<form className={classes.setting} autoComplete='off'>
+				<FormControl className={classes.formControl}>
+					<Select
+						value={settings.selectedWebcam || ''}
+						onChange={(event) =>
+						{
+							if (event.target.value)
+								roomClient.changeWebcam(event.target.value);
+						}}
+						displayEmpty
+						name={intl.formatMessage({
+							id             : 'settings.camera',
+							defaultMessage : 'Camera'
+						})}
+						autoWidth
+						className={classes.selectEmpty}
+						disabled={webcams.length === 0 || me.webcamInProgress}
+					>
+						{ webcams.map((webcam, index) =>
+						{
+							return (
+								<MenuItem key={index} value={webcam.deviceId}>{webcam.label}</MenuItem>
+							);
+						})}
+					</Select>
+					<FormHelperText>
+						{ webcams.length > 0 ?
+							intl.formatMessage({
+								id             : 'settings.selectCamera',
+								defaultMessage : 'Select video device'
+							})
+							:
+							intl.formatMessage({
+								id             : 'settings.cantSelectCamera',
+								defaultMessage : 'Unable to select video device'
+							})
+						}
+					</FormHelperText>
+				</FormControl>
+			</form>
+			<form className={classes.setting} autoComplete='off'>
+				<FormControl className={classes.formControl}>
+					<Select
+						value={settings.selectedAudioDevice || ''}
+						onChange={(event) =>
+						{
+							if (event.target.value)
+								roomClient.changeAudioDevice(event.target.value);
+						}}
+						displayEmpty
+						name={intl.formatMessage({
+							id             : 'settings.audio',
+							defaultMessage : 'Audio device'
+						})}
+						autoWidth
+						className={classes.selectEmpty}
+						disabled={audioDevices.length === 0 || me.audioInProgress}
+					>
+						{ audioDevices.map((audio, index) =>
+						{
+							return (
+								<MenuItem key={index} value={audio.deviceId}>{audio.label}</MenuItem>
+							);
+						})}
+					</Select>
+					<FormHelperText>
+						{ audioDevices.length > 0 ?
+							intl.formatMessage({
+								id             : 'settings.selectAudio',
+								defaultMessage : 'Select audio device'
+							})
+							:
+							intl.formatMessage({
+								id             : 'settings.cantSelectAudio',
+								defaultMessage : 'Unable to select audio device'
+							})
+						}
+					</FormHelperText>
+				</FormControl>
+			</form>
+			{ 'audioOutputSupportedBrowsers' in window.config &&
+				window.config.audioOutputSupportedBrowsers.includes(me.browser.name) &&
+				<form className={classes.setting} autoComplete='off'>
+					<FormControl className={classes.formControl}>
+						<Select
+							value={settings.selectedAudioOutputDevice || ''}
+							onChange={(event) =>
+							{
+								if (event.target.value)
+									roomClient.changeAudioOutputDevice(event.target.value);
+							}}
+							displayEmpty
+							name={intl.formatMessage({
+								id             : 'settings.audioOutput',
+								defaultMessage : 'Audio output device'
+							})}
+							autoWidth
+							className={classes.selectEmpty}
+							disabled={audioOutputDevices.length === 0 || me.audioOutputInProgress}
+						>
+							{ audioOutputDevices.map((audioOutput, index) =>
+							{
+								return (
+									<MenuItem
+										key={index}
+										value={audioOutput.deviceId}
+									>
+										{audioOutput.label}
+									</MenuItem>
+								);
+							})}
+						</Select>
+						<FormHelperText>
+							{ audioOutputDevices.length > 0 ?
+								intl.formatMessage({
+									id             : 'settings.selectAudioOutput',
+									defaultMessage : 'Select audio output device'
+								})
+								:
+								intl.formatMessage({
+									id             : 'settings.cantSelectAudioOutput',
+									defaultMessage : 'Unable to select audio output device'
+								})
+							}
+						</FormHelperText>
+					</FormControl>
+				</form>
+			}
+			<form className={classes.setting} autoComplete='off'>
+				<FormControl className={classes.formControl}>
+					<Select
+						value={settings.resolution || ''}
+						onChange={(event) =>
+						{
+							if (event.target.value)
+								roomClient.changeVideoResolution(event.target.value);
+						}}
+						name='Video resolution'
+						autoWidth
+						className={classes.selectEmpty}
+					>
+						{ resolutions.map((resolution, index) =>
+						{
+							return (
+								<MenuItem key={index} value={resolution.value}>
+									{resolution.label}
+								</MenuItem>
+							);
+						})}
+					</Select>
+					<FormHelperText>
+						<FormattedMessage
+							id='settings.resolution'
+							defaultMessage='Select your video resolution'
+						/>
+					</FormHelperText>
+				</FormControl>
+			</form>
+		</React.Fragment>
+	);
+};
+
+MediaSettings.propTypes =
+{
+	roomClient : PropTypes.any.isRequired,
+	me         : appPropTypes.Me.isRequired,
+	settings   : PropTypes.object.isRequired,
+	classes    : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) =>
+{
+	return {
+		me       : state.me,
+		settings : state.settings
+	};
+};
+
+export default withRoomContext(connect(
+	mapStateToProps,
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.me === next.me &&
+				prev.settings === next.settings
+			);
+		}
+	}
+)(withStyles(styles)(MediaSettings)));
\ No newline at end of file
diff --git a/app/src/components/Settings/Settings.js b/app/src/components/Settings/Settings.js
index 064aa2f..6633829 100644
--- a/app/src/components/Settings/Settings.js
+++ b/app/src/components/Settings/Settings.js
@@ -1,22 +1,25 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import * as appPropTypes from '../appPropTypes';
 import { withStyles } from '@material-ui/core/styles';
-import { withRoomContext } from '../../RoomContext';
 import * as roomActions from '../../actions/roomActions';
-import * as settingsActions from '../../actions/settingsActions';
 import PropTypes from 'prop-types';
 import { useIntl, FormattedMessage } from 'react-intl';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import MediaSettings from './MediaSettings';
+import AppearenceSettings from './AppearenceSettings';
+import AdvancedSettings from './AdvancedSettings';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogActions from '@material-ui/core/DialogActions';
 import Button from '@material-ui/core/Button';
-import MenuItem from '@material-ui/core/MenuItem';
-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';
+
+const tabs =
+[
+	'media',
+	'appearence',
+	'advanced'
+];
 
 const styles = (theme) =>
 	({
@@ -43,106 +46,27 @@ const styles = (theme) =>
 				width : '90vw'
 			}
 		},
-		setting :
+		tabsHeader :
 		{
-			padding : theme.spacing(2)
-		},
-		formControl :
-		{
-			display : 'flex'
+			flexGrow : 1
 		}
 	});
 
 const Settings = ({
-	roomClient,
-	room,
-	me,
-	settings,
-	onToggleAdvancedMode,
-	onTogglePermanentTopBar,
+	currentSettingsTab,
+	settingsOpen,
 	handleCloseSettings,
-	handleChangeMode,
+	setSettingsTab,
 	classes
 }) =>
 {
 	const intl = useIntl();
 
-	const modes = [ {
-		value : 'democratic',
-		label : intl.formatMessage({
-			id             : 'label.democratic',
-			defaultMessage : 'Democratic view'
-		})
-	}, {
-		value : 'filmstrip',
-		label : intl.formatMessage({
-			id             : 'label.filmstrip',
-			defaultMessage : 'Filmstrip view'
-		})
-	} ];
-	
-	const resolutions = [ {
-		value : 'low',
-		label : intl.formatMessage({
-			id             : 'label.low',
-			defaultMessage : 'Low'
-		})
-	},
-	{
-		value : 'medium',
-		label : intl.formatMessage({
-			id             : 'label.medium',
-			defaultMessage : 'Medium'
-		})
-	},
-	{
-		value : 'high',
-		label : intl.formatMessage({
-			id             : 'label.high',
-			defaultMessage : 'High (HD)'
-		})
-	},
-	{
-		value : 'veryhigh',
-		label : intl.formatMessage({
-			id             : 'label.veryHigh',
-			defaultMessage : 'Very high (FHD)'
-		})
-	},
-	{
-		value : 'ultra',
-		label : intl.formatMessage({
-			id             : 'label.ultra',
-			defaultMessage : 'Ultra (UHD)'
-		})
-	} ];
-
-	let webcams;
-
-	if (me.webcamDevices)
-		webcams = Object.values(me.webcamDevices);
-	else
-		webcams = [];
-
-	let audioDevices;
-
-	if (me.audioDevices)
-		audioDevices = Object.values(me.audioDevices);
-	else
-		audioDevices = [];
-		
-	let audioOutputDevices;
-
-	if (me.audioOutputDevices)
-		audioOutputDevices = Object.values(me.audioOutputDevices);
-	else
-		audioOutputDevices = [];
-
 	return (
 		<Dialog
 			className={classes.root}
-			open={room.settingsOpen}
-			onClose={() => handleCloseSettings({ settingsOpen: false })}
+			open={settingsOpen}
+			onClose={() => handleCloseSettings(false)}
 			classes={{
 				paper : classes.dialogPaper
 			}}
@@ -153,254 +77,40 @@ const Settings = ({
 					defaultMessage='Settings'
 				/>
 			</DialogTitle>
-			<form className={classes.setting} autoComplete='off'>
-				<FormControl className={classes.formControl}>
-					<Select
-						value={settings.selectedWebcam || ''}
-						onChange={(event) =>
-						{
-							if (event.target.value)
-								roomClient.changeWebcam(event.target.value);
-						}}
-						displayEmpty
-						name={intl.formatMessage({
-							id             : 'settings.camera',
-							defaultMessage : 'Camera'
-						})}
-						autoWidth
-						className={classes.selectEmpty}
-						disabled={webcams.length === 0 || me.webcamInProgress}
-					>
-						{ webcams.map((webcam, index) =>
-						{
-							return (
-								<MenuItem key={index} value={webcam.deviceId}>{webcam.label}</MenuItem>
-							);
-						})}
-					</Select>
-					<FormHelperText>
-						{ webcams.length > 0 ?
-							intl.formatMessage({
-								id             : 'settings.selectCamera',
-								defaultMessage : 'Select video device'
-							})
-							:
-							intl.formatMessage({
-								id             : 'settings.cantSelectCamera',
-								defaultMessage : 'Unable to select video device'
-							})
-						}
-					</FormHelperText>
-				</FormControl>
-			</form>
-			<form className={classes.setting} autoComplete='off'>
-				<FormControl className={classes.formControl}>
-					<Select
-						value={settings.selectedAudioDevice || ''}
-						onChange={(event) =>
-						{
-							if (event.target.value)
-								roomClient.changeAudioDevice(event.target.value);
-						}}
-						displayEmpty
-						name={intl.formatMessage({
-							id             : 'settings.audio',
-							defaultMessage : 'Audio device'
-						})}
-						autoWidth
-						className={classes.selectEmpty}
-						disabled={audioDevices.length === 0 || me.audioInProgress}
-					>
-						{ audioDevices.map((audio, index) =>
-						{
-							return (
-								<MenuItem key={index} value={audio.deviceId}>{audio.label}</MenuItem>
-							);
-						})}
-					</Select>
-					<FormHelperText>
-						{ audioDevices.length > 0 ?
-							intl.formatMessage({
-								id             : 'settings.selectAudio',
-								defaultMessage : 'Select audio device'
-							})
-							:
-							intl.formatMessage({
-								id             : 'settings.cantSelectAudio',
-								defaultMessage : 'Unable to select audio device'
-							})
-						}
-					</FormHelperText>
-				</FormControl>
-			</form>
-			{ 'audioOutputSupportedBrowsers' in window.config &&
-				window.config.audioOutputSupportedBrowsers.includes(me.browser.name) &&
-				<form className={classes.setting} autoComplete='off'>
-					<FormControl className={classes.formControl}>
-						<Select
-							value={settings.selectedAudioOutputDevice || ''}
-							onChange={(event) =>
-							{
-								if (event.target.value)
-									roomClient.changeAudioOutputDevice(event.target.value);
-							}}
-							displayEmpty
-							name={intl.formatMessage({
-								id             : 'settings.audioOutput',
-								defaultMessage : 'Audio output device'
-							})}
-							autoWidth
-							className={classes.selectEmpty}
-							disabled={audioOutputDevices.length === 0 || me.audioOutputInProgress}
-						>
-							{ audioOutputDevices.map((audioOutput, index) =>
-							{
-								return (
-									<MenuItem
-										key={index}
-										value={audioOutput.deviceId}
-									>
-										{audioOutput.label}
-									</MenuItem>
-								);
-							})}
-						</Select>
-						<FormHelperText>
-							{ audioOutputDevices.length > 0 ?
-								intl.formatMessage({
-									id             : 'settings.selectAudioOutput',
-									defaultMessage : 'Select audio output device'
-								})
-								:
-								intl.formatMessage({
-									id             : 'settings.cantSelectAudioOutput',
-									defaultMessage : 'Unable to select audio output device'
-								})
-							}
-						</FormHelperText>
-					</FormControl>
-				</form>
-			}
-			<form className={classes.setting} autoComplete='off'>
-				<FormControl className={classes.formControl}>
-					<Select
-						value={settings.resolution || ''}
-						onChange={(event) =>
-						{
-							if (event.target.value)
-								roomClient.changeVideoResolution(event.target.value);
-						}}
-						name='Video resolution'
-						autoWidth
-						className={classes.selectEmpty}
-					>
-						{ resolutions.map((resolution, index) =>
-						{
-							return (
-								<MenuItem key={index} value={resolution.value}>
-									{resolution.label}
-								</MenuItem>
-							);
-						})}
-					</Select>
-					<FormHelperText>
-						<FormattedMessage
-							id='settings.resolution'
-							defaultMessage='Select your video resolution'
-						/>
-					</FormHelperText>
-				</FormControl>
-			</form>
-			<form className={classes.setting} autoComplete='off'>
-				<FormControl className={classes.formControl}>
-					<Select
-						value={room.mode || ''}
-						onChange={(event) =>
-						{
-							if (event.target.value)
-								handleChangeMode(event.target.value);
-						}}
-						name={intl.formatMessage({
-							id             : 'settings.layout',
-							defaultMessage : 'Room layout'
-						})}
-						autoWidth
-						className={classes.selectEmpty}
-					>
-						{ modes.map((mode, index) =>
-						{
-							return (
-								<MenuItem key={index} value={mode.value}>
-									{mode.label}
-								</MenuItem>
-							);
-						})}
-					</Select>
-					<FormHelperText>
-						<FormattedMessage
-							id='settings.selectRoomLayout'
-							defaultMessage='Select room layout'
-						/>
-					</FormHelperText>
-				</FormControl>
-			</form>
-			<FormControlLabel
-				className={classes.setting}
-				control={<Checkbox checked={settings.advancedMode} onChange={onToggleAdvancedMode} value='advancedMode' />}
-				label={intl.formatMessage({
-					id             : 'settings.advancedMode',
-					defaultMessage : 'Advanced mode'
-				})}
-			/>
-			{ settings.advancedMode &&
-				<React.Fragment>
-					{ !window.config.lockLastN &&
-						<form className={classes.setting} autoComplete='off'>
-							<FormControl className={classes.formControl}>
-								<Select
-									value={settings.lastN || ''}
-									onChange={(event) =>
-									{
-										if (event.target.value)
-											roomClient.changeMaxSpotlights(event.target.value);
-									}}
-									name='Last N'
-									autoWidth
-									className={classes.selectEmpty}
-								>
-									{ Array.from(
-										{ length: window.config.maxLastN || 10 },
-										(_, i) => i + 1
-									).map((lastN) =>
-									{
-										return (
-											<MenuItem key={lastN} value={lastN}>
-												{lastN}
-											</MenuItem>
-										);
-									})}
-								</Select>
-								<FormHelperText>
-									<FormattedMessage
-										id='settings.lastn'
-										defaultMessage='Number of visible videos'
-									/>
-								</FormHelperText>
-							</FormControl>
-						</form>
+			<Tabs
+				className={classes.tabsHeader}
+				value={tabs.indexOf(currentSettingsTab)}
+				onChange={(event, value) => setSettingsTab(tabs[value])}
+				indicatorColor='primary'
+				textColor='primary'
+				variant='fullWidth'
+			>
+				<Tab
+					label={
+						intl.formatMessage({
+							id             : 'label.media',
+							defaultMessage : 'Media'
+						})
 					}
-					<FormControlLabel
-						className={classes.setting}
-						control={<Checkbox checked={settings.permanentTopBar} onChange={onTogglePermanentTopBar} value='permanentTopBar' />}
-						label={intl.formatMessage({
-							id             : 'settings.permanentTopBar',
-							defaultMessage : 'Permanent top bar'
-						})}
-					/>
-				</React.Fragment>
-			}
+				/>
+				<Tab
+					label={intl.formatMessage({
+						id             : 'label.appearence',
+						defaultMessage : 'Appearence'
+					})}
+				/>
+				<Tab
+					label={intl.formatMessage({
+						id             : 'label.advanced',
+						defaultMessage : 'Advanced'
+					})}
+				/>
+			</Tabs>
+			{currentSettingsTab === 'media' && <MediaSettings />}
+			{currentSettingsTab === 'appearence' && <AppearenceSettings />}
+			{currentSettingsTab === 'advanced' && <AdvancedSettings />}
 			<DialogActions>
-				<Button onClick={() => handleCloseSettings({ settingsOpen: false })} color='primary'>
+				<Button onClick={() => handleCloseSettings(false)} color='primary'>
 					<FormattedMessage
 						id='label.close'
 						defaultMessage='Close'
@@ -413,34 +123,25 @@ const Settings = ({
 
 Settings.propTypes =
 {
-	roomClient              : PropTypes.any.isRequired,
-	me                      : appPropTypes.Me.isRequired,
-	room                    : appPropTypes.Room.isRequired,
-	settings                : PropTypes.object.isRequired,
-	onToggleAdvancedMode    : PropTypes.func.isRequired,
-	onTogglePermanentTopBar : PropTypes.func.isRequired,
-	handleChangeMode        : PropTypes.func.isRequired,
-	handleCloseSettings     : PropTypes.func.isRequired,
-	classes                 : PropTypes.object.isRequired
+	currentSettingsTab  : PropTypes.string.isRequired,
+	settingsOpen        : PropTypes.bool.isRequired,
+	handleCloseSettings : PropTypes.func.isRequired,
+	setSettingsTab      : PropTypes.func.isRequired,
+	classes             : PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state) =>
-{
-	return {
-		me       : state.me,
-		room     : state.room,
-		settings : state.settings
-	};
-};
+	({
+		currentSettingsTab : state.room.currentSettingsTab,
+		settingsOpen       : state.room.settingsOpen
+	});
 
 const mapDispatchToProps = {
-	onToggleAdvancedMode    : settingsActions.toggleAdvancedMode,
-	onTogglePermanentTopBar : settingsActions.togglePermanentTopBar,
-	handleChangeMode        : roomActions.setDisplayMode,
-	handleCloseSettings     : roomActions.setSettingsOpen
+	handleCloseSettings : roomActions.setSettingsOpen,
+	setSettingsTab      : roomActions.setSettingsTab
 };
 
-export default withRoomContext(connect(
+export default connect(
 	mapStateToProps,
 	mapDispatchToProps,
 	null,
@@ -448,10 +149,9 @@ export default withRoomContext(connect(
 		areStatesEqual : (next, prev) =>
 		{
 			return (
-				prev.me === next.me &&
-				prev.room === next.room &&
-				prev.settings === next.settings
+				prev.room.currentSettingsTab === next.room.currentSettingsTab &&
+				prev.room.settingsOpen === next.room.settingsOpen
 			);
 		}
 	}
-)(withStyles(styles)(Settings)));
\ No newline at end of file
+)(withStyles(styles)(Settings));
\ No newline at end of file
diff --git a/app/src/reducers/room.js b/app/src/reducers/room.js
index 54c4011..08fa664 100644
--- a/app/src/reducers/room.js
+++ b/app/src/reducers/room.js
@@ -20,6 +20,7 @@ const initialState =
 	selectedPeerId             : null,
 	spotlights                 : [],
 	settingsOpen               : false,
+	currentSettingsTab         : 'media', // media, appearence, advanced
 	lockDialogOpen             : false,
 	joined                     : false,
 	muteAllInProgress          : false,
@@ -113,6 +114,13 @@ const room = (state = initialState, action) =>
 			return { ...state, settingsOpen };
 		}
 
+		case 'SET_SETTINGS_TAB':
+		{
+			const { tab } = action.payload;
+
+			return { ...state, currentSettingsTab: tab };
+		}
+
 		case 'SET_ROOM_ACTIVE_SPEAKER':
 		{
 			const { peerId } = action.payload;
diff --git a/app/src/translations/cn.json b/app/src/translations/cn.json
index 39c140e..7862ce5 100644
--- a/app/src/translations/cn.json
+++ b/app/src/translations/cn.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "非常高 (FHD)",
 	"label.ultra": "超高 (UHD)",
 	"label.close": "关闭",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "设置",
 	"settings.camera": "视频设备",
diff --git a/app/src/translations/cs.json b/app/src/translations/cs.json
index 01bb98f..69405a0 100644
--- a/app/src/translations/cs.json
+++ b/app/src/translations/cs.json
@@ -98,6 +98,9 @@
 	"label.veryHigh": "Velmi vysoké (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Zavřít",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Nastavení",
 	"settings.camera": "Kamera",
diff --git a/app/src/translations/de.json b/app/src/translations/de.json
index 54d7e03..ee7cb8d 100644
--- a/app/src/translations/de.json
+++ b/app/src/translations/de.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Sehr hoch (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Schließen",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Einstellungen",
 	"settings.camera": "Kamera",
diff --git a/app/src/translations/dk.json b/app/src/translations/dk.json
index b475816..a4deb8f 100644
--- a/app/src/translations/dk.json
+++ b/app/src/translations/dk.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Meget høj (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Luk",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Indstillinger",
 	"settings.camera": "Kamera",
diff --git a/app/src/translations/el.json b/app/src/translations/el.json
index 8a93b44..c17a9fc 100644
--- a/app/src/translations/el.json
+++ b/app/src/translations/el.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Πολύ υψηλή (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Κλείσιμο",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Ρυθμίσεις",
 	"settings.camera": "Κάμερα",
diff --git a/app/src/translations/en.json b/app/src/translations/en.json
index c2c814f..ae7adc8 100644
--- a/app/src/translations/en.json
+++ b/app/src/translations/en.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Very high (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Close",
+	"label.media": "Media",
+	"label.appearence": "Appearence",
+	"label.advanced": "Advanced",
 
 	"settings.settings": "Settings",
 	"settings.camera": "Camera",
diff --git a/app/src/translations/es.json b/app/src/translations/es.json
index e3cd91f..601e843 100644
--- a/app/src/translations/es.json
+++ b/app/src/translations/es.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Muy alta (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Cerrar",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Ajustes",
 	"settings.camera": "Cámara",
diff --git a/app/src/translations/fr.json b/app/src/translations/fr.json
index f0f4c03..eeff440 100644
--- a/app/src/translations/fr.json
+++ b/app/src/translations/fr.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Très Haute Définition (FHD)",
 	"label.ultra": "Ultra Haute Définition",
 	"label.close": "Fermer",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Paramètres",
 	"settings.camera": "Caméra",
diff --git a/app/src/translations/hr.json b/app/src/translations/hr.json
index 198e7b9..64f0496 100644
--- a/app/src/translations/hr.json
+++ b/app/src/translations/hr.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Vrlo visoka (FHD)",
 	"label.ultra": "Ultra visoka (UHD)",
 	"label.close": "Zatvori",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings":  "Postavke",
 	"settings.camera": "Kamera",
diff --git a/app/src/translations/hu.json b/app/src/translations/hu.json
index 6e1b8b2..fb5b2b3 100644
--- a/app/src/translations/hu.json
+++ b/app/src/translations/hu.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Nagyon magas (FHD)",
 	"label.ultra": "Ultra magas (UHD)",
 	"label.close": "Bezár",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Beállítások",
 	"settings.camera": "Kamera",
diff --git a/app/src/translations/it.json b/app/src/translations/it.json
index 3554a5f..bb7dc00 100644
--- a/app/src/translations/it.json
+++ b/app/src/translations/it.json
@@ -98,6 +98,9 @@
 	"label.veryHigh": "Molto alta (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Chiudi",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Impostazioni",
 	"settings.camera": "Videocamera",
diff --git a/app/src/translations/nb.json b/app/src/translations/nb.json
index d164132..3c57ada 100644
--- a/app/src/translations/nb.json
+++ b/app/src/translations/nb.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Veldig høy (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Lukk",
+	"label.media": "Media",
+	"label.appearence": "Utseende",
+	"label.advanced": "Avansert",
 
 	"settings.settings": "Innstillinger",
 	"settings.camera": "Kamera",
diff --git a/app/src/translations/pl.json b/app/src/translations/pl.json
index 0f3ff78..7599da8 100644
--- a/app/src/translations/pl.json
+++ b/app/src/translations/pl.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Bardzo wysoka (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Zamknij",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Ustawienia",
 	"settings.camera": "Kamera",
diff --git a/app/src/translations/pt.json b/app/src/translations/pt.json
index 8ba5f23..3a12919 100644
--- a/app/src/translations/pt.json
+++ b/app/src/translations/pt.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Muito alta (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Fechar",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Definições",
 	"settings.camera": "Camera",
diff --git a/app/src/translations/ro.json b/app/src/translations/ro.json
index d644f14..42124e3 100644
--- a/app/src/translations/ro.json
+++ b/app/src/translations/ro.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Rezoluție foarte înaltă (FHD)",
 	"label.ultra": "Rezoluție ultra înaltă (UHD)",
 	"label.close": "Închide",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Setări",
 	"settings.camera": "Cameră video",
diff --git a/app/src/translations/tr.json b/app/src/translations/tr.json
index cbca7c8..bd2ba0f 100644
--- a/app/src/translations/tr.json
+++ b/app/src/translations/tr.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Çok Yüksek (FHD)",
 	"label.ultra": "Ultra (UHD)",
 	"label.close": "Kapat",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Ayarlar",
 	"settings.camera": "Kamera",
diff --git a/app/src/translations/uk.json b/app/src/translations/uk.json
index 60c569d..9e916d0 100644
--- a/app/src/translations/uk.json
+++ b/app/src/translations/uk.json
@@ -99,6 +99,9 @@
 	"label.veryHigh": "Дуже високий (FHD)",
 	"label.ultra": "Ультра (UHD)",
 	"label.close": "Закрити",
+	"label.media": null,
+	"label.appearence": null,
+	"label.advanced": null,
 
 	"settings.settings": "Налаштування",
 	"settings.camera": "Камера",