Add some very basic styling to the Filmstrip

app/lib/components/Filmstrip/index.jsx

@@ -1,6 +1,7 @@
 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';
 
@@ -12,9 +13,10 @@ class Filmstrip extends Component
 
 	handleSelectPeer = (selectedPeerName) =>
 	{
-		this.setState({
-			selectedPeerName
-		});
+		this.setState((oldState) => ({
+			selectedPeerName : oldState.selectedPeerName === selectedPeerName ?
+				null : selectedPeerName
+		}));
 	};
 
 	render()
@@ -25,14 +27,10 @@ class Filmstrip extends Component
 		// 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>
+			<div data-component='Filmstrip'>
 				{peers[activePeerName] && (
-					<div>
+					<div className='active-peer'>
 						<Peer
 							advancedMode={advancedMode}
 							name={activePeerName}
@@ -40,11 +38,15 @@ class Filmstrip extends Component
 					</div>
 				)}
 
-				<div>
-					{remaindingPeerNames.map((peerName) => (
+				<div className='filmstrip'>
+					{Object.keys(peers).map((peerName) => (
 						<div
 							key={peerName}
 							onClick={() => this.handleSelectPeer(peerName)}
+							className={classnames('film', {
+								selected : this.state.selectedPeerName === peerName,
+								active   : activeSpeakerName === peerName
+							})}
 						>
 							<Peer
 								advancedMode={advancedMode}

app/stylus/components/Filmstrip.styl

@@ -0,0 +1,32 @@
+[data-component='Filmstrip'] {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+
+  > .active-peer {
+    width: 95vmin;
+    padding: 10vmin 1vmin 1vmin 1vmin;
+  }
+
+  > .filmstrip {
+    display: flex;
+    padding: 0.5vmin;
+    cursor: pointer;
+
+    > .film {
+      height: 15vmin;
+      max-width: 15vmin * (2 * 4 / 3);
+      margin: 1vmin;
+
+      &.active {
+        border: 5px solid white;
+      }
+
+      &.selected {
+        border: 5px solid pink;
+      }
+    }
+  }
+}

app/stylus/components/Peer.styl

@@ -22,13 +22,15 @@
 
 	> .view-container {
 		position: relative;
-
+		flex-grow: 1;
+		
 		&.webcam {
 			order: 2;
 		}
 
 		&.screen {
 			order: 1;
+			max-width: 50%;
 		}
 
 		> .controls {

app/stylus/index.styl

@@ -50,6 +50,7 @@ body {
 	@import './components/ParticipantList';
 	@import './components/FullScreenView';
 	@import './components/FullView';
+	@import './components/Filmstrip';
 }
 
 // Hack to detect in JS the current media query