Add mode switch (democratic, filmstrip) to settings

app/lib/components/Filmstrip.jsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import * as appPropTypes from './appPropTypes';
 import Peer from './Peer';
 
 class Filmstrip extends Component
@@ -65,7 +64,7 @@ class Filmstrip extends Component
 Filmstrip.propTypes = {
 	activeSpeakerName : PropTypes.string,
 	advancedMode      : PropTypes.bool,
-	peers             : appPropTypes.peers
+	peers             : PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state) =>

app/lib/components/Peers.jsx

@@ -14,14 +14,22 @@ class Peers extends React.Component
 	constructor(props)
 	{
 		super(props);
+
 		this.state = {
 			peerWidth  : 400,
 			peerHeight : 300
 		};
+
+		this.peersRef = React.createRef();
 	}
 
 	updateDimensions = () =>
 	{
+		if (!this.peersRef.current) 
+		{
+			return;
+		}
+
 		const n = this.props.boxes;
 
 		if (n === 0)
@@ -29,8 +37,8 @@ class Peers extends React.Component
 			return;
 		}
 
-		const width = this.refs.peers.clientWidth;
-		const height = this.refs.peers.clientHeight;
+		const width = this.peersRef.current.clientWidth;
+		const height = this.peersRef.current.clientHeight;
 
 		let x, y, space;
 
@@ -64,7 +72,7 @@ class Peers extends React.Component
 		window.addEventListener('resize', this.updateDimensions);
 		const observer = new ResizeObserver(this.updateDimensions);
 
-		observer.observe(this.refs.peers);
+		observer.observe(this.peersRef.current);
 	}
 
 	componentWillUnmount()
@@ -92,7 +100,7 @@ class Peers extends React.Component
 		};
 
 		return (
-			<div data-component='Peers' ref='peers'>
+			<div data-component='Peers' ref={this.peersRef}>
 				{
 					peers.map((peer) =>
 					{

app/lib/components/Room.jsx

@@ -65,6 +65,11 @@ class Room extends React.Component
 			onRoomLinkCopy
 		} = this.props;
 
+		const View = {
+			filmstrip  : Filmstrip,
+			democratic : Peers
+		}[room.mode];
+
 		return (
 			<Appear duration={300}>
 				<div data-component='Room'>
@@ -122,12 +127,7 @@ class Room extends React.Component
 							</div>
 						</div>
 
-						<Filmstrip advancedMode={room.advancedMode} />
-						{false && (
-							<Peers
-								advancedMode={room.advancedMode}
-							/>
-						)}
+						<View advancedMode={room.advancedMode} />
 
 						<Draggable handle='.me-container' bounds='body' cancel='.display-name'>
 							<div

app/lib/components/Settings.jsx

@@ -6,31 +6,49 @@ import * as stateActions from '../redux/stateActions';
 import PropTypes from 'prop-types';
 import Dropdown from 'react-dropdown';
 
+const modes = [ {
+	value : 'democratic',
+	label : 'Democratic view'
+}, {
+	value : 'filmstrip',
+	label : 'Filmstrip view'
+} ];
+
 class Settings extends React.Component
 {
 	state = {
-		selectedCamera: null,
-		selectedAudioDevice: null
+		selectedCamera      : null,
+		selectedAudioDevice : null,
+		selectedMode        : modes[0]
 	};
 
 	handleChangeWebcam = (webcam) =>
 	{
-		this.props.handleChangeWebcam(webcam);
+		this.props.handleChangeWebcam(webcam.value);
 
 		this.setState({
-			selectedCamera: webcam
+			selectedCamera : webcam
 		});
 	}
 
 	handleChangeAudioDevice = (device) =>
 	{
-		this.props.handleChangeAudioDevice(device);
+		this.props.handleChangeAudioDevice(device.value);
 
 		this.setState({
-			selectedAudioDevice: device
+			selectedAudioDevice : device
 		});
 	}
 	
+	handleChangeMode = (mode) =>
+	{
+		this.setState({
+			selectedMode : mode
+		});
+
+		this.props.handleChangeMode(mode.value);
+	};
+
 	render()
 	{	
 		const {
@@ -75,6 +93,7 @@ class Settings extends React.Component
 						onChange={this.handleChangeWebcam}
 						placeholder={webcamText}
 					/>
+				
 					<Dropdown
 						disabled={!me.canChangeAudioDevice}
 						options={audioDevices}
@@ -82,6 +101,7 @@ class Settings extends React.Component
 						onChange={this.handleChangeAudioDevice}
 						placeholder={audioDevicesText}
 					/>
+
 					<input
 						id='room-mode'
 						type='checkbox'
@@ -89,6 +109,12 @@ class Settings extends React.Component
 						onChange={onToggleAdvancedMode}
 					/>
 					<label htmlFor='room-mode'>Advanced mode</label>
+
+					<Dropdown
+						options={modes}
+						value={this.state.selectedMode}
+						onChange={this.handleChangeMode}
+					/>
 				</div>
 			</div>
 		);
@@ -101,7 +127,8 @@ Settings.propTypes =
 	room                    : appPropTypes.Room.isRequired,
 	handleChangeWebcam      : PropTypes.func.isRequired,
 	handleChangeAudioDevice : PropTypes.func.isRequired,
-	onToggleAdvancedMode    : PropTypes.func.isRequired
+	onToggleAdvancedMode    : PropTypes.func.isRequired,
+	handleChangeMode        : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) =>
@@ -112,22 +139,11 @@ const mapStateToProps = (state) =>
 	};
 };
 
-const mapDispatchToProps = (dispatch) =>
-{
-	return {
-		handleChangeWebcam : (device) =>
-		{
-			dispatch(requestActions.changeWebcam(device.value));
-		},
-		handleChangeAudioDevice : (device) =>
-		{
-			dispatch(requestActions.changeAudioDevice(device.value));
-		},
-		onToggleAdvancedMode : () =>
-		{
-			dispatch(stateActions.toggleAdvancedMode());
-		}
-	};
+const mapDispatchToProps = {
+	handleChangeWebcam      : requestActions.changeWebcam,
+	handleChangeAudioDevice : requestActions.changeAudioDevice,
+	onToggleAdvancedMode    : stateActions.toggleAdvancedMode,
+	handleChangeMode        : stateActions.setDisplayMode
 };
 
 const SettingsContainer = connect(

app/lib/redux/reducers/room.js

@@ -6,7 +6,8 @@ const initialState =
 	showSettings       : false,
 	advancedMode       : false,
 	fullScreenConsumer : null, // ConsumerID
-	toolbarsVisible    : true
+	toolbarsVisible    : true,
+	mode               : 'democratic'
 };
 
 const room = (state = initialState, action) =>
@@ -65,6 +66,10 @@ const room = (state = initialState, action) =>
 
 			return { ...state, toolbarsVisible };
 		}
+
+		case 'SET_DISPLAY_MODE':
+			return { ...state, mode: action.payload.mode };
+
 		default:
 			return state;
 	}

app/lib/redux/stateActions.js

@@ -93,6 +93,12 @@ export const toggleAdvancedMode = () =>
 	};
 };
 
+export const setDisplayMode = (mode) =>
+	({
+		type    : 'SET_DISPLAY_MODE',
+		payload : { mode }
+	});
+
 export const setAudioOnlyState = (enabled) =>
 {
 	return {