Added advanced options for sticky app bar, lastn. Optimized some component rendering.

app/src/components/Controls/TopBar.js

@@ -116,6 +116,7 @@ const TopBar = (props) =>
 		roomClient,
 		room,
 		lobbyPeers,
+		stickyAppBar,
 		myPicture,
 		loggedIn,
 		loginEnabled,
@@ -165,7 +166,7 @@ const TopBar = (props) =>
 	return (
 		<AppBar
 			position='fixed'
-			className={room.toolbarsVisible ? classes.show : classes.hide}
+			className={room.toolbarsVisible || stickyAppBar ? classes.show : classes.hide}
 		>
 			<Toolbar>
 				<PulsingBadge
@@ -331,6 +332,7 @@ TopBar.propTypes =
 	roomClient         : PropTypes.object.isRequired,
 	room               : appPropTypes.Room.isRequired,
 	lobbyPeers         : PropTypes.array,
+	stickyAppBar       : PropTypes.bool,
 	myPicture          : PropTypes.string,
 	loggedIn           : PropTypes.bool.isRequired,
 	loginEnabled       : PropTypes.bool.isRequired,
@@ -350,7 +352,7 @@ const mapStateToProps = (state) =>
 	({
 		room         : state.room,
 		lobbyPeers   : lobbyPeersKeySelector(state),
-		advancedMode : state.settings.advancedMode,
+		stickyAppBar : state.settings.stickyAppBar,
 		loggedIn     : state.me.loggedIn,
 		loginEnabled : state.me.loginEnabled,
 		myPicture    : state.me.picture,
@@ -388,6 +390,7 @@ export default withRoomContext(connect(
 			return (
 				prev.room === next.room &&
 				prev.lobbyPeers === next.lobbyPeers &&
+				prev.settings.stickyAppBar === next.settings.stickyAppBar &&
 				prev.me.loggedIn === next.me.loggedIn &&
 				prev.me.loginEnabled === next.me.loginEnabled &&
 				prev.me.picture === next.me.picture &&

app/src/components/MeetingViews/Democratic.js

@@ -71,7 +71,7 @@ class Democratic extends React.PureComponent
 
 		const width = this.peersRef.current.clientWidth - PADDING_H;
 		const height = this.peersRef.current.clientHeight -
-			(this.props.toolbarsVisible ? PADDING_V : PADDING_H);
+			(this.props.toolbarsVisible || this.props.stickyAppBar ? PADDING_V : PADDING_H);
 
 		let x, y, space;
 
@@ -134,6 +134,7 @@ class Democratic extends React.PureComponent
 			spotlightsPeers,
 			spotlightsLength,
 			toolbarsVisible,
+			stickyAppBar,
 			classes
 		} = this.props;
 
@@ -147,7 +148,7 @@ class Democratic extends React.PureComponent
 			<div
 				className={classnames(
 					classes.root,
-					toolbarsVisible ? classes.showingToolBar : classes.hiddenToolBar
+					toolbarsVisible || stickyAppBar ? classes.showingToolBar : classes.hiddenToolBar
 				)}
 				ref={this.peersRef}
 			>
@@ -186,6 +187,7 @@ Democratic.propTypes =
 	spotlightsLength : PropTypes.number,
 	spotlightsPeers  : PropTypes.array.isRequired,
 	toolbarsVisible  : PropTypes.bool.isRequired,
+	stickyAppBar     : PropTypes.bool,
 	classes          : PropTypes.object.isRequired
 };
 
@@ -196,7 +198,8 @@ const mapStateToProps = (state) =>
 		boxes            : videoBoxesSelector(state),
 		spotlightsPeers  : spotlightPeersSelector(state),
 		spotlightsLength : spotlightsLengthSelector(state),
-		toolbarsVisible  : state.room.toolbarsVisible
+		toolbarsVisible  : state.room.toolbarsVisible,
+		stickyAppBar     : state.settings.stickyAppBar
 	};
 };
 
@@ -212,7 +215,8 @@ export default connect(
 				prev.producers === next.producers &&
 				prev.consumers === next.consumers &&
 				prev.room.spotlights === next.room.spotlights &&
-				prev.room.toolbarsVisible === next.room.toolbarsVisible
+				prev.room.toolbarsVisible === next.room.toolbarsVisible &&
+				prev.settings.stickyAppBar === next.settings.stickyAppBar
 			);
 		}
 	}

app/src/components/Room.js

@@ -197,9 +197,13 @@ class Room extends React.PureComponent
 
 				<View advancedMode={advancedMode} />
 
-				<LockDialog />
+				{ room.lockDialogOpen &&
+					<LockDialog />
+				}
 
-				<Settings />
+				{ room.settingsOpen &&
+					<Settings />
+				}
 			</div>
 		);
 	}

app/src/components/Settings/Settings.js

@@ -59,6 +59,7 @@ const Settings = ({
 	me,
 	settings,
 	onToggleAdvancedMode,
+	onToggleStickyAppBar,
 	handleCloseSettings,
 	handleChangeMode,
 	classes
@@ -296,6 +297,48 @@ const Settings = ({
 					defaultMessage : 'Advanced mode'
 				})}
 			/>
+			{ settings.advancedMode &&
+				<React.Fragment>
+					<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}
+							>
+								{ [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ].map((lastN) =>
+								{
+									return (
+										<MenuItem key={lastN} value={lastN}>
+											{lastN}
+										</MenuItem>
+									);
+								})}
+							</Select>
+							<FormHelperText>
+								<FormattedMessage
+									id='settings.lastn'
+									defaultMessage='Select the amount of speakers visible'
+								/>
+							</FormHelperText>
+						</FormControl>
+					</form>
+					<FormControlLabel
+						className={classes.setting}
+						control={<Checkbox checked={settings.stickyAppBar} onChange={onToggleStickyAppBar} value='stickyAppBar' />}
+						label={intl.formatMessage({
+							id             : 'settings.stickyAppBar',
+							defaultMessage : 'Sticky App Bar'
+						})}
+					/>
+				</React.Fragment>
+			}
 			<DialogActions>
 				<Button onClick={() => handleCloseSettings({ settingsOpen: false })} color='primary'>
 					<FormattedMessage
@@ -315,6 +358,7 @@ Settings.propTypes =
 	room                 : appPropTypes.Room.isRequired,
 	settings             : PropTypes.object.isRequired,
 	onToggleAdvancedMode : PropTypes.func.isRequired,
+	onToggleStickyAppBar : PropTypes.func.isRequired,
 	handleChangeMode     : PropTypes.func.isRequired,
 	handleCloseSettings  : PropTypes.func.isRequired,
 	classes              : PropTypes.object.isRequired
@@ -331,6 +375,7 @@ const mapStateToProps = (state) =>
 
 const mapDispatchToProps = {
 	onToggleAdvancedMode : settingsActions.toggleAdvancedMode,
+	onToggleStickyAppBar : settingsActions.toggleStickyAppBar,
 	handleChangeMode     : roomActions.setDisplayMode,
 	handleCloseSettings  : roomActions.setSettingsOpen
 };