Make lastN configurable, max, and lock. Fixes #225

app/public/config/config.example.js

@@ -1,9 +1,9 @@
 // eslint-disable-next-line
 var config =
 {
-	loginEnabled     : false,
+	loginEnabled    : false,
-	developmentPort  : 3443,
+	developmentPort : 3443,
-	productionPort   : 443,
+	productionPort  : 443,
 
 	/**
 	 * If defaultResolution is set, it will override user settings when joining:
@@ -25,6 +25,7 @@ var config =
 		{ scaleResolutionDownBy: 2 },
 		{ scaleResolutionDownBy: 1 }
 	],
+
 	/**
 	 * White listing browsers that support audio output device selection.
 	 * It is not yet fully implemented in Firefox.
@@ -43,6 +44,10 @@ var config =
 	},
 	lastN       : 4,
 	mobileLastN : 1,
+	// Highest number of speakers user can select
+	maxLastN    : 5,
+	// If truthy, users can NOT change number of speakers visible
+	lockLastN   : false,
 	background  : 'images/background.jpg',
 	// Add file and uncomment for adding logo to appbar
 	// logo       : 'images/logo.svg',

app/src/components/Settings/Settings.js

@@ -355,36 +355,41 @@ const Settings = ({
 			/>
 			{ settings.advancedMode &&
 				<React.Fragment>
-					<form className={classes.setting} autoComplete='off'>
+					{ window.config && !window.config.lockLastN &&
-						<FormControl className={classes.formControl}>
+						<form className={classes.setting} autoComplete='off'>
-							<Select
+							<FormControl className={classes.formControl}>
-								value={settings.lastN || ''}
+								<Select
-								onChange={(event) =>
+									value={settings.lastN || ''}
-								{
+									onChange={(event) =>
-									if (event.target.value)
+									{
-										roomClient.changeMaxSpotlights(event.target.value);
+										if (event.target.value)
-								}}
+											roomClient.changeMaxSpotlights(event.target.value);
-								name='Last N'
+									}}
-								autoWidth
+									name='Last N'
-								className={classes.selectEmpty}
+									autoWidth
-							>
+									className={classes.selectEmpty}
-								{ [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ].map((lastN) =>
+								>
-								{
+									{ Array.from(
-									return (
+										{ length: window.config.maxLastN || 10 },
-										<MenuItem key={lastN} value={lastN}>
+										(_, i) => i + 1
-											{lastN}
+									).map((lastN) =>
-										</MenuItem>
+									{
-									);
+										return (
-								})}
+											<MenuItem key={lastN} value={lastN}>
-							</Select>
+												{lastN}
-							<FormHelperText>
+											</MenuItem>
-								<FormattedMessage
+										);
-									id='settings.lastn'
+									})}
-									defaultMessage='Number of visible videos'
+								</Select>
-								/>
+								<FormHelperText>
-							</FormHelperText>
+									<FormattedMessage
-						</FormControl>
+										id='settings.lastn'
-					</form>
+										defaultMessage='Number of visible videos'
+									/>
+								</FormHelperText>
+							</FormControl>
+						</form>
+					}
 					<FormControlLabel
 						className={classes.setting}
 						control={<Checkbox checked={settings.permanentTopBar} onChange={onTogglePermanentTopBar} value='permanentTopBar' />}