Film strip view almost working again.

app/src/components/MeetingViews/Democratic.js

@@ -7,12 +7,10 @@ import {
 	spotlightsLengthSelector
 } from '../Selectors';
 import PropTypes from 'prop-types';
-import debounce from 'lodash/debounce';
 import { withStyles } from '@material-ui/core/styles';
 import Peer from '../Containers/Peer';
 import Me from '../Containers/Me';
 import HiddenPeers from '../Containers/HiddenPeers';
-import ResizeObserver from 'resize-observer-polyfill';
 
 const RATIO = 1.334;
 const PADDING_V = 50;
@@ -43,16 +41,17 @@ class Democratic extends React.PureComponent
 	{
 		super(props);
 
-		this.state = {
-			peerWidth  : 400,
-			peerHeight : 300
-		};
+		this.state = {};
+
+		this.resizeTimeout = null;
 
 		this.peersRef = React.createRef();
 	}
 
-	updateDimensions = debounce(() =>
+	updateDimensions = () =>
 	{
+		console.log('updateDimensions');
+
 		if (!this.peersRef.current)
 		{
 			return;
@@ -93,14 +92,21 @@ class Democratic extends React.PureComponent
 				peerHeight : 0.9 * y
 			});
 		}
-	}, 200);
+	};
 
 	componentDidMount()
 	{
-		window.addEventListener('resize', this.updateDimensions);
-		const observer = new ResizeObserver(this.updateDimensions);
+		// window.resize event listener
+		window.addEventListener('resize', () =>
+		{
+			// clear the timeout
+			clearTimeout(this.resizeTimeout);
 
-		observer.observe(this.peersRef.current);
+			// start timing for event "completion"
+			this.resizeTimeout = setTimeout(() => this.updateDimensions(), 250);
+		});
+
+		this.updateDimensions();
 	}
 
 	componentWillUnmount()
@@ -108,9 +114,10 @@ class Democratic extends React.PureComponent
 		window.removeEventListener('resize', this.updateDimensions);
 	}
 
-	componentDidUpdate()
+	componentDidUpdate(prevProps)
 	{
-		this.updateDimensions();
+		if (prevProps !== this.props)
+			this.updateDimensions();
 	}
 
 	render()
@@ -125,14 +132,15 @@ class Democratic extends React.PureComponent
 
 		const style =
 		{
-			'width'  : this.state.peerWidth,
-			'height' : this.state.peerHeight
+			'width'  : this.state.peerWidth ? this.state.peerWidth : 0,
+			'height' : this.state.peerHeight ? this.state.peerHeight : 0
 		};
 
 		return (
 			<div className={classes.root} ref={this.peersRef}>
 				<Me
 					advancedMode={advancedMode}
+					spacing={6}
 					style={style}
 				/>
 				{ spotlightsPeers.map((peer) =>
@@ -142,6 +150,7 @@ class Democratic extends React.PureComponent
 							key={peer.id}
 							advancedMode={advancedMode}
 							id={peer.id}
+							spacing={6}
 							style={style}
 						/>
 					);

app/src/components/MeetingViews/Filmstrip.js

@@ -1,89 +1,53 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ResizeObserver from 'resize-observer-polyfill';
 import { connect } from 'react-redux';
-import debounce from 'lodash/debounce';
 import { withStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
+import {
+	spotlightsLengthSelector
+} from '../Selectors';
 import { withRoomContext } from '../../RoomContext';
+import Me from '../Containers/Me';
 import Peer from '../Containers/Peer';
+import SpeakerPeer from '../Containers/SpeakerPeer';
 import HiddenPeers from '../Containers/HiddenPeers';
+import Grid from '@material-ui/core/Grid';
 
 const styles = () =>
 	({
 		root :
 		{
-			display       : 'flex',
-			flexDirection : 'column',
-			alignItems    : 'center',
-			height        : '100%',
-			width         : '100%'
+			height              : '100%',
+			width               : '100%',
+			display             : 'grid',
+			gridTemplateColumns : '1fr',
+			gridTemplateRows    : '1.6fr minmax(0, 0.4fr)'
 		},
-		activePeerContainer :
+		speaker :
 		{
-			width          : '100%',
-			height         : '80vh',
+			gridArea       : '1 / 1 / 2 / 2',
 			display        : 'flex',
 			justifyContent : 'center',
-			alignItems     : 'center'
-		},
-		activePeer :
-		{
-			width     : '100%',
-			border    : '5px solid rgba(255, 255, 255, 0.15)',
-			boxShadow : '0px 5px 12px 2px rgba(17, 17, 17, 0.5)',
-			marginTop : 60
+			alignItems     : 'center',
+			paddingTop     : 40
 		},
 		filmStrip :
 		{
-			display    : 'flex',
-			background : 'rgba(0, 0, 0 , 0.5)',
-			width      : '100%',
-			overflowX  : 'auto',
-			height     : '20vh',
-			alignItems : 'center'
+			gridArea : '2 / 1 / 3 / 2'
 		},
-		filmStripContent :
+		filmItem :
 		{
-			margin     : '0 auto',
-			display    : 'flex',
-			height     : '100%',
-			alignItems : 'center'
-		},
-		film :
-		{
-			height      : '18vh',
-			flexShrink  : 0,
-			paddingLeft : '1vh',
-			'& .active' :
-			{
-				borderColor : 'var(--active-speaker-border-color)'
-			},
+			display      : 'flex',
+			marginLeft   : '6px',
+			border       : 'var(--peer-border)',
 			'&.selected' :
 			{
 				borderColor : 'var(--selected-peer-border-color)'
 			},
-			'&:last-child' :
+			'&.active' :
 			{
-				paddingRight : '1vh'
+				opacity : '0.6'
 			}
-		},
-		filmContent :
-		{
-			height      : '100%',
-			width       : '100%',
-			border      : '1px solid rgba(255,255,255,0.15)',
-			maxWidth    : 'calc(18vh * (4 / 3))',
-			cursor      : 'pointer',
-			'& .screen' :
-			{
-				maxWidth : 'calc(18vh * (2 * 4 / 3))',
-				border   : 0
-			}
-		},
-		hiddenPeers :
-		{
-
 		}
 	});
 
@@ -93,12 +57,13 @@ class Filmstrip extends React.PureComponent
 	{
 		super(props);
 
+		this.resizeTimeout = null;
+
 		this.activePeerContainer = React.createRef();
 	}
 
 	state = {
-		lastSpeaker : null,
-		width       : 400
+		lastSpeaker : null
 	};
 
 	// Find the name of the peer which is currently speaking. This is either
@@ -106,17 +71,24 @@ class Filmstrip extends React.PureComponent
 	// person has spoken yet, the first peer in the list of peers.
 	getActivePeerId = () =>
 	{
-		if (this.props.selectedPeerId)
+		const {
+			selectedPeerId,
+			peers
+		} = this.props;
+
+		const { lastSpeaker } = this.state;
+
+		if (selectedPeerId && peers[selectedPeerId])
 		{
 			return this.props.selectedPeerId;
 		}
 
-		if (this.state.lastSpeaker)
+		if (lastSpeaker && peers[lastSpeaker])
 		{
 			return this.state.lastSpeaker;
 		}
 
-		const peerIds = Object.keys(this.props.peers);
+		const peerIds = Object.keys(peers);
 
 		if (peerIds.length > 0)
 		{
@@ -128,45 +100,47 @@ class Filmstrip extends React.PureComponent
 		this.props.peers[peerId].consumers.some((consumer) =>
 			this.props.consumers[consumer].source === 'screen');
 
-	getRatio = () =>
-	{
-		let ratio = 4 / 3;
-
-		if (this.isSharingCamera(this.getActivePeerId()))
-		{
-			ratio *= 2;
-		}
-
-		return ratio;
-	};
-
-	updateDimensions = debounce(() =>
+	updateDimensions = () =>
 	{
 		const container = this.activePeerContainer.current;
 
 		if (container)
 		{
-			const ratio = this.getRatio();
+			let width = (container.clientWidth - 100);
 
-			let width = container.clientWidth;
+			let height = (width / 4) * 3;
 
-			if (width / ratio > (container.clientHeight - 100))
+			if (this.isSharingCamera(this.getActivePeerId()))
 			{
-				width = (container.clientHeight - 100) * ratio;
+				width /= 2;
+				height = (width / 4) * 3;
+			}
+
+			if (height > (container.clientHeight - 60))
+			{
+				height = (container.clientHeight - 60);
+				width = (height / 3) * 4;
 			}
 
 			this.setState({
-				width
+				width,
+				height
 			});
 		}
-	}, 200);
+	};
 
 	componentDidMount()
 	{
-		window.addEventListener('resize', this.updateDimensions);
-		const observer = new ResizeObserver(this.updateDimensions);
+		// window.resize event listener
+		window.addEventListener('resize', () =>
+		{
+			// clear the timeout
+			clearTimeout(this.resizeTimeout);
+
+			// start timing for event "completion"
+			this.resizeTimeout = setTimeout(() => this.updateDimensions(), 250);
+		});
 
-		observer.observe(this.activePeerContainer.current);
 		this.updateDimensions();
 	}
 
@@ -175,19 +149,28 @@ class Filmstrip extends React.PureComponent
 		window.removeEventListener('resize', this.updateDimensions);
 	}
 
+	componentWillUpdate(nextProps)
+	{
+		if (nextProps !== this.props)
+		{
+			if (
+				nextProps.activeSpeakerId != null &&
+				nextProps.activeSpeakerId !== this.props.myId
+			)
+			{
+				// eslint-disable-next-line react/no-did-update-set-state
+				this.setState({
+					lastSpeaker : nextProps.activeSpeakerId
+				});
+			}
+		}
+	}
+
 	componentDidUpdate(prevProps)
 	{
 		if (prevProps !== this.props)
 		{
 			this.updateDimensions();
-
-			if (this.props.activeSpeakerName !== this.props.myName)
-			{
-				// eslint-disable-next-line react/no-did-update-set-state
-				this.setState({
-					lastSpeaker : this.props.activeSpeakerName
-				});
-			}
 		}
 	}
 
@@ -196,6 +179,7 @@ class Filmstrip extends React.PureComponent
 		const {
 			roomClient,
 			peers,
+			myId,
 			advancedMode,
 			spotlights,
 			spotlightsLength,
@@ -204,48 +188,67 @@ class Filmstrip extends React.PureComponent
 
 		const activePeerId = this.getActivePeerId();
 
+		const speakerStyle =
+		{
+			width  : this.state.width,
+			height : this.state.height
+		};
+
+		const peerStyle =
+		{
+			'width'  : '24vmin',
+			'height' : '18vmin'
+		};
+
 		return (
 			<div className={classes.root}>
-				<div className={classes.activePeerContainer} ref={this.activePeerContainer}>
+				<div className={classes.speaker} ref={this.activePeerContainer}>
 					{ peers[activePeerId] ?
-						<div
-							className={classes.activePeer}
-							style={{
-								width  : this.state.width,
-								height : this.state.width / this.getRatio()
-							}}
-						>
-							<Peer
-								advancedMode={advancedMode}
-								name={activePeerId}
-							/>
-						</div>
+						<SpeakerPeer
+							advancedMode={advancedMode}
+							id={activePeerId}
+							style={speakerStyle}
+						/>
 						:null
 					}
 				</div>
 
 				<div className={classes.filmStrip}>
-					<div className={classes.filmStripContent}>
+					<Grid container justify='center' spacing={0}>
+						<Grid item>
+							<div
+								className={classnames(classes.filmItem, {
+									active : myId === activePeerId
+								})}
+							>
+								<Me
+									advancedMode={advancedMode}
+									style={peerStyle}
+								/>
+							</div>
+						</Grid>
+
 						{ Object.keys(peers).map((peerId) =>
 						{
 							if (spotlights.find((spotlightsElement) => spotlightsElement === peerId))
 							{
 								return (
-									<div
-										key={peerId}
-										onClick={() => roomClient.setSelectedPeer(peerId)}
-										className={classnames(classes.film, {
-											selected : this.props.selectedPeerId === peerId,
-											active   : this.state.lastSpeaker === peerId
-										})}
-									>
-										<div className={classes.filmContent}>
+									<Grid key={peerId} item>
+										<div
+											key={peerId}
+											onClick={() => roomClient.setSelectedPeer(peerId)}
+											className={classnames(classes.filmItem, {
+												selected : this.props.selectedPeerId === peerId,
+												active   : peerId === activePeerId
+											})}
+										>
 											<Peer
 												advancedMode={advancedMode}
-												name={peerId}
+												id={peerId}
+												style={peerStyle}
 											/>
 										</div>
-									</div>
+									</Grid>
 								);
 							}
 							else
@@ -253,7 +256,7 @@ class Filmstrip extends React.PureComponent
 								return ('');
 							}
 						})}
-					</div>
+					</Grid>
 				</div>
 				<div className={classes.hiddenPeers}>
 					{ spotlightsLength<Object.keys(peers).length ?
@@ -263,41 +266,52 @@ class Filmstrip extends React.PureComponent
 						:null
 					}
 				</div>
-
 			</div>
 		);
 	}
 }
 
 Filmstrip.propTypes = {
-	roomClient        : PropTypes.any.isRequired,
-	activeSpeakerName : PropTypes.string,
-	advancedMode      : PropTypes.bool,
-	peers             : PropTypes.object.isRequired,
-	consumers         : PropTypes.object.isRequired,
-	myName            : PropTypes.string.isRequired,
-	selectedPeerId  : PropTypes.string,
-	spotlightsLength  : PropTypes.number,
-	spotlights        : PropTypes.array.isRequired,
-	classes           : PropTypes.object.isRequired
+	roomClient       : PropTypes.any.isRequired,
+	activeSpeakerId  : PropTypes.string,
+	advancedMode     : PropTypes.bool,
+	peers            : PropTypes.object.isRequired,
+	consumers        : PropTypes.object.isRequired,
+	myId             : PropTypes.string.isRequired,
+	selectedPeerId   : PropTypes.string,
+	spotlightsLength : PropTypes.number,
+	spotlights       : PropTypes.array.isRequired,
+	classes          : PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state) =>
 {
-	const spotlightsLength = state.room.spotlights ? state.room.spotlights.length : 0;
-
 	return {
-		activeSpeakerName : state.room.activeSpeakerName,
-		selectedPeerId  : state.room.selectedPeerId,
-		peers             : state.peers,
-		consumers         : state.consumers,
-		myName            : state.me.name,
-		spotlights        : state.room.spotlights,
-		spotlightsLength
+		activeSpeakerId  : state.room.activeSpeakerId,
+		selectedPeerId   : state.room.selectedPeerId,
+		peers            : state.peers,
+		consumers        : state.consumers,
+		myId             : state.me.id,
+		spotlights       : state.room.spotlights,
+		spotlightsLength : spotlightsLengthSelector(state)
 	};
 };
 
 export default withRoomContext(connect(
 	mapStateToProps,
-	undefined
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.room.activeSpeakerId === next.room.activeSpeakerId &&
+				prev.room.selectedPeerId === next.room.selectedPeerId &&
+				prev.peers === next.peers &&
+				prev.consumers === next.consumers &&
+				prev.room.spotlights === next.room.spotlights &&
+				prev.me.id === next.me.id
+			);
+		}
+	}
 )(withStyles(styles)(Filmstrip)));