Film strip view almost working again.

app/src/components/Containers/Me.js

@@ -14,7 +14,6 @@ const styles = () =>
 		root :
 		{
 			flexDirection      : 'row',
-			margin             : 6,
 			flex               : '0 0 auto',
 			boxShadow          : 'var(--peer-shadow)',
 			border             : 'var(--peer-border)',
@@ -49,6 +48,7 @@ const Me = (props) =>
 		me,
 		settings,
 		activeSpeaker,
+		spacing,
 		style,
 		advancedMode,
 		micProducer,
@@ -69,6 +69,11 @@ const Me = (props) =>
 		!screenProducer.remotelyPaused
 	);
 
+	const spacingStyle =
+	{
+		'margin' : spacing
+	};
+
 	return (
 		<React.Fragment>
 			<div
@@ -78,6 +83,7 @@ const Me = (props) =>
 						activeSpeaker ? 'active-speaker' : null
 					)
 				}
+				style={spacingStyle}
 			>
 				<div className={classnames(classes.viewContainer, 'webcam')} style={style}>
 					<VideoView
@@ -128,6 +134,7 @@ Me.propTypes =
 	micProducer    : appPropTypes.Producer,
 	webcamProducer : appPropTypes.Producer,
 	screenProducer : appPropTypes.Producer,
+	spacing        : PropTypes.number,
 	style          : PropTypes.object,
 	classes        : PropTypes.object.isRequired
 };

app/src/components/Containers/Peer.js

@@ -21,7 +21,6 @@ const styles = (theme) =>
 		root :
 		{
 			flex               : '0 0 auto',
-			margin             : 6,
 			boxShadow          : 'var(--peer-shadow)',
 			border             : 'var(--peer-border)',
 			touchAction        : 'none',
@@ -128,6 +127,7 @@ const Peer = (props) =>
 		screenConsumer,
 		toggleConsumerFullscreen,
 		toggleConsumerWindow,
+		spacing,
 		style,
 		windowConsumer,
 		classes,
@@ -164,6 +164,11 @@ const Peer = (props) =>
 
 	const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
+	const spacingStyle =
+	{
+		'margin' : spacing
+	};
+
 	return (
 		<React.Fragment>
 			<div
@@ -194,6 +199,7 @@ const Peer = (props) =>
 						setHover(false);
 					}, 2000);
 				}}
+				style={spacingStyle}
 			>
 				<div className={classnames(classes.viewContainer)} style={style}>
 					{ !videoVisible ?
@@ -406,6 +412,7 @@ Peer.propTypes =
 	screenConsumer           : appPropTypes.Consumer,
 	windowConsumer           : PropTypes.string,
 	activeSpeaker            : PropTypes.bool,
+	spacing                  : PropTypes.number,
 	style                    : PropTypes.object,
 	toggleConsumerFullscreen : PropTypes.func.isRequired,
 	toggleConsumerWindow     : PropTypes.func.isRequired,

app/src/components/Containers/SpeakerPeer.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { makePeerConsumerSelector } from '../Selectors';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import * as appPropTypes from '../appPropTypes';
+import { withStyles } from '@material-ui/core/styles';
+import VideoView from '../VideoContainers/VideoView';
+import Volume from './Volume';
+
+const styles = () =>
+	({
+		root :
+		{
+			flex               : '0 0 auto',
+			boxShadow          : 'var(--peer-shadow)',
+			border             : 'var(--peer-border)',
+			touchAction        : 'none',
+			backgroundColor    : 'var(--peer-bg-color)',
+			backgroundImage    : 'var(--peer-empty-avatar)',
+			backgroundPosition : 'bottom',
+			backgroundSize     : 'auto 85%',
+			backgroundRepeat   : 'no-repeat',
+			'&.webcam'         :
+			{
+				order : 2
+			},
+			'&.screen' :
+			{
+				order : 1
+			}
+		},
+		viewContainer :
+		{
+			position   : 'relative',
+			'&.webcam' :
+			{
+				order : 2
+			},
+			'&.screen' :
+			{
+				order : 1
+			}
+		},
+		videoInfo :
+		{
+			position        : 'absolute',
+			width           : '100%',
+			height          : '100%',
+			backgroundColor : 'rgba(0, 0, 0, 0.3)',
+			display         : 'flex',
+			justifyContent  : 'center',
+			alignItems      : 'center',
+			padding         : '0.4vmin',
+			zIndex          : 21,
+			'& p'           :
+			{
+				padding       : '6px 12px',
+				borderRadius  : 6,
+				userSelect    : 'none',
+				pointerEvents : 'none',
+				fontSize      : 20,
+				color         : 'rgba(255, 255, 255, 0.55)'
+			}
+		}
+	});
+
+const SpeakerPeer = (props) =>
+{
+	const {
+		advancedMode,
+		peer,
+		micConsumer,
+		webcamConsumer,
+		screenConsumer,
+		spacing,
+		style,
+		classes
+	} = props;
+
+	const videoVisible = (
+		Boolean(webcamConsumer) &&
+		!webcamConsumer.locallyPaused &&
+		!webcamConsumer.remotelyPaused
+	);
+
+	const screenVisible = (
+		Boolean(screenConsumer) &&
+		!screenConsumer.locallyPaused &&
+		!screenConsumer.remotelyPaused
+	);
+
+	let videoProfile;
+
+	if (webcamConsumer)
+		videoProfile = webcamConsumer.profile;
+
+	let screenProfile;
+
+	if (screenConsumer)
+		screenProfile = screenConsumer.profile;
+
+	const spacingStyle =
+	{
+		'margin' : spacing
+	};
+
+	return (
+		<React.Fragment>
+			<div
+				className={
+					classnames(
+						classes.root,
+						'webcam'
+					)
+				}
+				style={spacingStyle}
+			>
+				<div className={classnames(classes.viewContainer)} style={style}>
+					{ !videoVisible ?
+						<div className={classes.videoInfo}>
+							<p>this video is paused</p>
+						</div>
+						:null
+					}
+
+					<VideoView
+						advancedMode={advancedMode}
+						peer={peer}
+						displayName={peer.displayName}
+						showPeerInfo
+						videoTrack={webcamConsumer ? webcamConsumer.track : null}
+						videoVisible={videoVisible}
+						videoProfile={videoProfile}
+						audioCodec={micConsumer ? micConsumer.codec : null}
+						videoCodec={webcamConsumer ? webcamConsumer.codec : null}
+					>
+						<Volume id={peer.id} />
+					</VideoView>
+				</div>
+			</div>
+
+			{ screenConsumer ?
+				<div
+					className={classnames(classes.root, 'screen')}
+				>
+					{ !screenVisible ?
+						<div className={classes.videoInfo} style={style}>
+							<p>this video is paused</p>
+						</div>
+						:null
+					}
+
+					{ screenVisible ?
+						<div className={classnames(classes.viewContainer)} style={style}>
+							<VideoView
+								advancedMode={advancedMode}
+								videoContain
+								videoTrack={screenConsumer ? screenConsumer.track : null}
+								videoVisible={screenVisible}
+								videoProfile={screenProfile}
+								videoCodec={screenConsumer ? screenConsumer.codec : null}
+							/>
+						</div>
+						:null
+					}
+				</div>
+				:null
+			}
+		</React.Fragment>
+	);
+};
+
+SpeakerPeer.propTypes =
+{
+	advancedMode   : PropTypes.bool,
+	peer           : appPropTypes.Peer,
+	micConsumer    : appPropTypes.Consumer,
+	webcamConsumer : appPropTypes.Consumer,
+	screenConsumer : appPropTypes.Consumer,
+	spacing        : PropTypes.number,
+	style          : PropTypes.object,
+	classes        : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state, props) =>
+{
+	const getPeerConsumers = makePeerConsumerSelector();
+
+	return {
+		peer : state.peers[props.id],
+		...getPeerConsumers(state, props)
+	};
+};
+
+export default connect(
+	mapStateToProps,
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.peers === next.peers &&
+				prev.consumers === next.consumers &&
+				prev.room.activeSpeakerId === next.room.activeSpeakerId
+			);
+		}
+	}
+)(withStyles(styles, { withTheme: true })(SpeakerPeer));