From cab3032f8fd9c38bb1548c076b653aba0fccce4c Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Thu, 19 Jul 2018 15:07:33 +0200
Subject: [PATCH] Add some very basic styling to the Filmstrip

---
 app/lib/components/Filmstrip/index.jsx | 24 ++++++++++---------
 app/stylus/components/Filmstrip.styl   | 32 ++++++++++++++++++++++++++
 app/stylus/components/Peer.styl        |  4 +++-
 app/stylus/index.styl                  |  1 +
 4 files changed, 49 insertions(+), 12 deletions(-)
 create mode 100644 app/stylus/components/Filmstrip.styl

diff --git a/app/lib/components/Filmstrip/index.jsx b/app/lib/components/Filmstrip/index.jsx
index 9266368..baa5f75 100644
--- a/app/lib/components/Filmstrip/index.jsx
+++ b/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}
diff --git a/app/stylus/components/Filmstrip.styl b/app/stylus/components/Filmstrip.styl
new file mode 100644
index 0000000..fd59280
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/stylus/components/Peer.styl b/app/stylus/components/Peer.styl
index 5a9e762..7d26715 100644
--- a/app/stylus/components/Peer.styl
+++ b/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 {
diff --git a/app/stylus/index.styl b/app/stylus/index.styl
index 94e08b8..5e67e46 100644
--- a/app/stylus/index.styl
+++ b/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