Force Filmstrip video to take as much space as possible

app/lib/components/Filmstrip.jsx

@@ -1,15 +1,92 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import ResizeObserver from 'resize-observer-polyfill';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import Peer from './Peer';
 
 class Filmstrip extends Component
 {
+	constructor(props)
+	{
+		super(props);
+
+		this.activePeerContainer = React.createRef();
+	}
+
 	state = {
-		selectedPeerName : null
+		selectedPeerName : null,
+		width            : 400
 	};
 
+	// Find the name of the peer which is currently speaking. This is either
+	// the latest active speaker, or the manually selected peer.
+	getActivePeerName = () =>
+		this.state.selectedPeerName || this.props.activeSpeakerName;
+
+	isSharingCamera = (peerName) => this.props.peers[peerName] &&
+		this.props.peers[peerName].consumers.some((consumer) =>
+			this.props.consumers[consumer].source === 'screen');
+
+	getRatio = () =>
+	{
+		let ratio = 4 / 3;
+
+		if (this.isSharingCamera(this.getActivePeerName())) 
+		{
+			ratio *= 2;
+		}
+
+		return ratio;
+	};
+
+	updateDimensions = () =>
+	{
+		const container = this.activePeerContainer.current;
+
+		if (container)
+		{
+			const ratio = this.getRatio();
+
+			let width = container.clientWidth;
+
+			if (width / ratio > container.clientHeight) 
+			{
+				width = container.clientHeight * ratio;
+			}
+			
+			this.setState({
+				width
+			});
+		}
+	};
+
+	componentDidMount()
+	{
+		this.updateDimensions();
+	}
+
+	componentDidMount()
+	{
+		window.addEventListener('resize', this.updateDimensions);
+		const observer = new ResizeObserver(this.updateDimensions);
+
+		observer.observe(this.activePeerContainer.current);
+	}
+
+	componentWillUnmount()
+	{
+		window.removeEventListener('resize', this.updateDimensions);
+	}
+
+	componentDidUpdate(prevProps)
+	{
+		if (prevProps !== this.props)
+		{
+			this.updateDimensions();
+		}
+	}
+
 	handleSelectPeer = (selectedPeerName) =>
 	{
 		this.setState((oldState) => ({
@@ -22,22 +99,26 @@ class Filmstrip extends Component
 	{
 		const { activeSpeakerName, peers, advancedMode } = this.props;
 
-		// Find the name of the peer which is currently speaking. This is either
+		const activePeerName = this.getActivePeerName();
-		// the latest active speaker, or the manually selected peer.
-		const activePeerName = this.state.selectedPeerName || activeSpeakerName;
 
 		return (
 			<div data-component='Filmstrip'>
+				<div className='active-peer-container' ref={this.activePeerContainer}>
 					{peers[activePeerName] && (
-					<div className='active-peer'>
+						<div
+							className='active-peer'
+							style={{ width: this.state.width, height: this.state.width / this.getRatio() }}
+						>
 							<Peer
 								advancedMode={advancedMode}
 								name={activePeerName}
 							/>
 						</div>
 					)}
+				</div>
 
 				<div className='filmstrip'>
+					<div className='filmstrip-content'>
 						{Object.keys(peers).map((peerName) => (
 							<div
 								key={peerName}
@@ -57,6 +138,7 @@ class Filmstrip extends Component
 						))}
 					</div>
 				</div>
+			</div>
 		);
 	}
 }
@@ -64,13 +146,15 @@ class Filmstrip extends Component
 Filmstrip.propTypes = {
 	activeSpeakerName : PropTypes.string,
 	advancedMode      : PropTypes.bool,
-	peers             : PropTypes.object.isRequired
+	peers             : PropTypes.object.isRequired,
+	consumers         : PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state) =>
 	({
 		activeSpeakerName : state.room.activeSpeakerName,
-		peers             : state.peers
+		peers             : state.peers,
+		consumers         : state.consumers
 	});
 
 export default connect(

app/stylus/components/Filmstrip.styl

@@ -4,31 +4,38 @@
   align-items: center;
   height: 100%;
 
+  > .active-peer-container {
+    width: 100%;
+    height: 80vh;
+    display: flex;
+    justify-content: center;
+
     > .active-peer {
-    width: 95vmin;
+      width: 100%;
-    padding: 10vmin 1vmin 1vmin 1vmin;
+      padding: 5vmin 1vmin 1vmin 1vmin;
 
       > [data-component='Peer'] {
         border: 5px solid rgba(255, 255, 255, 0.15);
         box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
       }
     }
+  }
 
   > .filmstrip {
     display: flex;
     background: rgba(0, 0, 0 , 0.5);
     width: 100%;
     overflow-x: auto;
-    padding: 1vmin 0;
+    height: 20vh;
-    margin-top: auto;
+    align-items: center;
 
     > .film {
-      height: 15vmin;
+      height: 18vh;
       flex-shrink: 0;     
-      padding-left: 1vmin;
+      padding-left: 1vh;  
 
       &:last-child {
-        padding-right: 1vmin;
+        padding-right: 1vh;
       }
 
       > .film-content {
@@ -37,11 +44,11 @@
         border: 1px solid rgba(255,255,255,0.15);
 
         > [data-component='Peer'] {
-          max-width: 15vmin * (4 / 3);
+          max-width: 17vh * (4 / 3);
           cursor: pointer;
 
           &.screen {
-            max-width: 15vmin * (2 * 4 / 3);
+            max-width: 17vh * (2 * 4 / 3);
             border: 0;
           }
         }