Updated film strip. Added it back to settings.

app/src/components/Containers/Peer.js

@@ -53,6 +53,8 @@ const styles = (theme) =>
 		viewContainer :
 		{
 			position   : 'relative',
+			width      : '100%',
+			height     : '100%',
 			'&.webcam' :
 			{
 				order : 2
@@ -164,9 +166,10 @@ const Peer = (props) =>
 
 	const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
-	const spacingStyle =
+	const rootStyle =
 	{
-		'margin' : spacing
+		'margin' : spacing,
+		...style
 	};
 
 	return (
@@ -199,9 +202,9 @@ const Peer = (props) =>
 						setHover(false);
 					}, 2000);
 				}}
-				style={spacingStyle}
+				style={rootStyle}
 			>
-				<div className={classnames(classes.viewContainer)} style={style}>
+				<div className={classnames(classes.viewContainer)}>
 					{ !videoVisible ?
 						<div className={classes.videoInfo}>
 							<p>this video is paused</p>
@@ -319,16 +322,17 @@ const Peer = (props) =>
 							setHover(false);
 						}, 2000);
 					}}
+					style={rootStyle}
 				>
 					{ !screenVisible ?
-						<div className={classes.videoInfo} style={style}>
+						<div className={classes.videoInfo}>
 							<p>this video is paused</p>
 						</div>
 						:null
 					}
 
 					{ screenVisible ?
-						<div className={classnames(classes.viewContainer)} style={style}>
+						<div className={classnames(classes.viewContainer)}>
 							<div
 								className={classnames(classes.controls, screenHover ? 'hover' : null)}
 								onMouseOver={() => setScreenHover(true)}

app/src/components/MeetingViews/Filmstrip.js

@@ -4,7 +4,8 @@ import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
 import {
-	spotlightsLengthSelector
+	spotlightsLengthSelector,
+	videoBoxesSelector
 } from '../Selectors';
 import { withRoomContext } from '../../RoomContext';
 import Me from '../Containers/Me';
@@ -60,6 +61,8 @@ class Filmstrip extends React.PureComponent
 		this.resizeTimeout = null;
 
 		this.activePeerContainer = React.createRef();
+
+		this.filmStripContainer = React.createRef();
 	}
 
 	state = {
@@ -102,31 +105,53 @@ class Filmstrip extends React.PureComponent
 
 	updateDimensions = () =>
 	{
-		const container = this.activePeerContainer.current;
+		const newState = {};
 
-		if (container)
+		const speaker = this.activePeerContainer.current;
+
+		if (speaker)
 		{
-			let width = (container.clientWidth - 100);
+			let speakerWidth = (speaker.clientWidth - 100);
 
-			let height = (width / 4) * 3;
+			let speakerHeight = (speakerWidth / 4) * 3;
 	
 			if (this.isSharingCamera(this.getActivePeerId()))
 			{
-				width /= 2;
-				height = (width / 4) * 3;
+				speakerWidth /= 2;
+				speakerHeight = (speakerWidth / 4) * 3;
 			}
 	
-			if (height > (container.clientHeight - 60))
+			if (speakerHeight > (speaker.clientHeight - 60))
 			{
-				height = (container.clientHeight - 60);
-				width = (height / 3) * 4;
+				speakerHeight = (speaker.clientHeight - 60);
+				speakerWidth = (speakerHeight / 3) * 4;
+			}
+
+			newState.speakerWidth = speakerWidth;
+			newState.speakerHeight = speakerHeight;
+		}
+
+		const filmStrip = this.filmStripContainer.current;
+
+		if (filmStrip)
+		{
+			let filmStripHeight = filmStrip.clientHeight - 10;
+
+			let filmStripWidth = (filmStripHeight / 3) * 4;
+	
+			if (filmStripWidth * this.props.boxes > (filmStrip.clientWidth - 50))
+			{
+				filmStripWidth = (filmStrip.clientWidth - 50) / this.props.boxes;
+				filmStripHeight = (filmStripWidth / 4) * 3;
+			}
+
+			newState.filmStripWidth = filmStripWidth;
+			newState.filmStripHeight = filmStripHeight;
 		}
 
 		this.setState({
-				width,
-				height
+			...newState
 		});
-		}
 	};
 
 	componentDidMount()
@@ -190,14 +215,14 @@ class Filmstrip extends React.PureComponent
 
 		const speakerStyle =
 		{
-			width  : this.state.width,
-			height : this.state.height
+			width  : this.state.speakerWidth,
+			height : this.state.speakerHeight
 		};
 
 		const peerStyle =
 		{
-			'width'  : '24vmin',
-			'height' : '18vmin'
+			width  : this.state.filmStripWidth,
+			height : this.state.filmStripHeight
 		};
 
 		return (
@@ -213,7 +238,7 @@ class Filmstrip extends React.PureComponent
 					}
 				</div>
 
-				<div className={classes.filmStrip}>
+				<div className={classes.filmStrip} ref={this.filmStripContainer}>
 					<Grid container justify='center' spacing={0}>
 						<Grid item>
 							<div
@@ -258,7 +283,7 @@ class Filmstrip extends React.PureComponent
 						})}
 					</Grid>
 				</div>
-				<div className={classes.hiddenPeers}>
+
 				{ spotlightsLength<Object.keys(peers).length ?
 					<HiddenPeers
 						hiddenPeersCount={Object.keys(peers).length-spotlightsLength}
@@ -266,7 +291,6 @@ class Filmstrip extends React.PureComponent
 					:null
 				}
 			</div>
-			</div>
 		);
 	}
 }
@@ -281,6 +305,7 @@ Filmstrip.propTypes = {
 	selectedPeerId   : PropTypes.string,
 	spotlightsLength : PropTypes.number,
 	spotlights       : PropTypes.array.isRequired,
+	boxes            : PropTypes.number,
 	classes          : PropTypes.object.isRequired
 };
 
@@ -293,7 +318,8 @@ const mapStateToProps = (state) =>
 		consumers        : state.consumers,
 		myId             : state.me.id,
 		spotlights       : state.room.spotlights,
-		spotlightsLength : spotlightsLengthSelector(state)
+		spotlightsLength : spotlightsLengthSelector(state),
+		boxes            : videoBoxesSelector(state),
 	};
 };
 

app/src/components/Settings/Settings.js

@@ -51,13 +51,13 @@ const styles = (theme) =>
 		}
 	});
 
-/* const modes = [ {
+const modes = [ {
 	value : 'democratic',
 	label : 'Democratic view'
 }, {
 	value : 'filmstrip',
 	label : 'Filmstrip view'
-} ]; */
+} ];
 
 const resolutions = [ {
 	value : 'low',
@@ -87,6 +87,7 @@ const Settings = ({
 	settings,
 	onToggleAdvancedMode,
 	handleCloseSettings,
+	handleChangeMode,
 	classes
 }) =>
 {
@@ -203,6 +204,33 @@ const Settings = ({
 					</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='Room layout'
+						autoWidth
+						className={classes.selectEmpty}
+					>
+						{ modes.map((mode, index) =>
+						{
+							return (
+								<MenuItem key={index} value={mode.value}>
+									{mode.label}
+								</MenuItem>
+							);
+						})}
+					</Select>
+					<FormHelperText>
+						Select room layout
+					</FormHelperText>
+				</FormControl>
+			</form>
 			<FormControlLabel
 				className={classes.setting}
 				control={<Checkbox checked={settings.advancedMode} onChange={onToggleAdvancedMode} value='advancedMode' />}
@@ -241,7 +269,7 @@ const mapStateToProps = (state) =>
 const mapDispatchToProps = {
 	onToggleAdvancedMode : stateActions.toggleAdvancedMode,
 	handleChangeMode     : stateActions.setDisplayMode,
-	handleCloseSettings  : stateActions.setSettingsOpen
+	handleCloseSettings  : stateActions.setSettingsOpen,
 };
 
 export default withRoomContext(connect(