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

app/src/RoomClient.js

@@ -171,6 +171,9 @@ export default class RoomClient
 		else
 			this._maxSpotlights = mobileLastN;
 
+		if (store.getState().settings.lastN !== this._maxSpotlights)
+			this._maxSpotlights = store.getState().settings.lastN;
+
 		// Manager of spotlight
 		this._spotlights = null;
 
@@ -823,6 +826,14 @@ export default class RoomClient
 		}
 	}
 
+	changeMaxSpotlights(maxSpotlights)
+	{
+		this._spotlights.maxSpotlights = maxSpotlights;
+
+		store.dispatch(
+			settingsActions.setLastN(maxSpotlights));
+	}
+
 	// Updated consumers based on spotlights
 	async updateSpotlights(spotlights)
 	{

app/src/Spotlights.js

@@ -198,4 +198,19 @@ export default class Spotlights extends EventEmitter
 
 		return true;
 	}
+
+	get maxSpotlights()
+	{
+		return this._maxSpotlights;
+	}
+
+	set maxSpotlights(maxSpotlights)
+	{
+		const oldMaxSpotlights = this._maxSpotlights;
+
+		this._maxSpotlights = maxSpotlights;
+
+		if (oldMaxSpotlights !== this._maxSpotlights)
+			this._spotlightsUpdated();
+	}
 }

app/src/actions/settingsActions.js

@@ -26,3 +26,14 @@ export const toggleAdvancedMode = () =>
 	({
 		type : 'TOGGLE_ADVANCED_MODE'
 	});
+
+export const toggleStickyAppBar = () =>
+	({
+		type : 'TOGGLE_STICKY_APPBAR'
+	});
+
+export const setLastN = (lastN) =>
+	({
+		type    : 'SET_LAST_N',
+		payload : { lastN }
+	});

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} />
 
+				{ room.lockDialogOpen &&
 					<LockDialog />
+				}
 
+				{ 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
 };

app/src/reducers/settings.js

@@ -4,7 +4,8 @@ const initialState =
 	selectedWebcam      : null,
 	selectedAudioDevice : null,
 	advancedMode        : false,
-	resolution          : 'high' // low, medium, high, veryhigh, ultra
+	resolution          : 'medium', // low, medium, high, veryhigh, ultra
+	lastN               : 4
 };
 
 const settings = (state = initialState, action) =>
@@ -35,6 +36,20 @@ const settings = (state = initialState, action) =>
 			return { ...state, advancedMode };
 		}
 
+		case 'SET_LAST_N':
+		{
+			const { lastN } = action.payload;
+
+			return { ...state, lastN };
+		}
+
+		case 'TOGGLE_STICKY_APPBAR':
+		{
+			const stickyAppBar = !state.stickyAppBar;
+
+			return { ...state, stickyAppBar };
+		}
+
 		case 'SET_VIDEO_RESOLUTION':
 		{
 			const { resolution } = action.payload;