Add basic skeleton for a Filmstrip view

app/lib/components/Filmstrip/index.jsx

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import * as appPropTypes from '../appPropTypes';
+import Peer from '../Peer';
+
+class Filmstrip extends Component
+{
+	state = {
+		selectedPeerName : null
+	};
+
+	handleSelectPeer = (selectedPeerName) =>
+	{
+		this.setState({
+			selectedPeerName
+		});
+	};
+
+	render()
+	{
+		const { activeSpeakerName, peers, advancedMode } = this.props;
+
+		// Find the name of the peer which is currently speaking. This is either
+		// the latest active speaker, or the manually selected peer.
+		const activePeerName = this.state.selectedPeerName || activeSpeakerName;
+
+		// Find the remainding peer names, which will be shown in the filmstrip.
+		const remaindingPeerNames = Object.keys(peers).filter((peerName) =>
+			peerName !== activePeerName);
+
+		return (
+			<div>
+				{peers[activePeerName] && (
+					<div>
+						<Peer
+							advancedMode={advancedMode}
+							name={activePeerName}
+						/>
+					</div>
+				)}
+
+				<div>
+					{remaindingPeerNames.map((peerName) => (
+						<div
+							key={peerName}
+							onClick={() => this.handleSelectPeer(peerName)}
+						>
+							<Peer
+								advancedMode={advancedMode}
+								name={peerName}
+							/>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	}
+}
+
+Filmstrip.propTypes = {
+	activeSpeakerName : PropTypes.string,
+	advancedMode      : PropTypes.bool,
+	peers             : appPropTypes.peers
+};
+
+const mapStateToProps = (state) =>
+	({
+		activeSpeakerName : state.room.activeSpeakerName,
+		peers             : state.peers
+	});
+
+export default connect(
+	mapStateToProps
+)(Filmstrip);

app/lib/components/Peers.jsx

@@ -82,8 +82,7 @@ class Peers extends React.Component
 		const {
 			advancedMode,
 			activeSpeakerName,
-			peers,
-			toolAreaOpen
+			peers
 		} = this.props;
 
 		const style =
@@ -108,7 +107,6 @@ class Peers extends React.Component
 										advancedMode={advancedMode}
 										name={peer.name}
 										style={style}
-										toolAreaOpen={toolAreaOpen}
 									/>
 								</div>
 							</Appear>
@@ -125,8 +123,7 @@ Peers.propTypes =
 		advancedMode      : PropTypes.bool,
 		peers             : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
 		boxes             : PropTypes.number,
-		activeSpeakerName : PropTypes.string,
-		toolAreaOpen      : PropTypes.bool
+		activeSpeakerName : PropTypes.string
 	};
 
 const mapStateToProps = (state) =>
@@ -139,8 +136,7 @@ const mapStateToProps = (state) =>
 	return {
 		peers,
 		boxes,
-		activeSpeakerName : state.room.activeSpeakerName,
-		toolAreaOpen      : state.toolarea.toolAreaOpen
+		activeSpeakerName : state.room.activeSpeakerName
 	};
 };
 

app/lib/components/Room.jsx

@@ -17,6 +17,7 @@ import FullScreenView from './FullScreenView';
 import Draggable from 'react-draggable';
 import { idle } from '../utils';
 import Sidebar from './Sidebar';
+import Filmstrip from './Filmstrip';
 
 // Hide toolbars after 10 seconds of inactivity.
 const TIMEOUT = 10 * 1000;
@@ -121,9 +122,12 @@ class Room extends React.Component
 							</div>
 						</div>
 
+						<Filmstrip advancedMode={room.advancedMode} />
+						{false && (
 							<Peers
 								advancedMode={room.advancedMode}
 							/>
+						)}
 
 						<Draggable handle='.me-container' bounds='body' cancel='.display-name'>
 							<div