Fix to state check. Fix to missing display name on missing producer.

app/src/components/Containers/Me.js

@@ -13,7 +13,6 @@ const styles = () =>
 	({
 		root :
 		{
-			display            : 'flex',
 			flexDirection      : 'row',
 			margin             : 6,
 			flex               : '0 0 auto',
@@ -32,8 +31,6 @@ const styles = () =>
 		viewContainer :
 		{
 			position   : 'relative',
-			width      : 'var(--me-width)',
-			height     : 'var(--me-height)',
 			'&.webcam' :
 			{
 				order : 2

app/src/components/Containers/Peer.js

@@ -54,7 +54,6 @@ const styles = (theme) =>
 		viewContainer :
 		{
 			position   : 'relative',
-			flexGrow   : 1,
 			'&.webcam' :
 			{
 				order : 2
@@ -86,14 +85,15 @@ const styles = (theme) =>
 		},
 		videoInfo :
 		{
-			top            : 0,
-			bottom         : 0,
-			left           : 0,
-			right          : 0,
+			position        : 'absolute',
+			width           : '100%',
+			height          : '100%',
+			backgroundColor : 'rgba(0, 0, 0, 0.3)',
 			display         : 'flex',
-			flexDirection  : 'column',
 			justifyContent  : 'center',
 			alignItems      : 'center',
+			padding         : '0.4vmin',
+			zIndex          : 21,
 			'& p'           :
 			{
 				padding       : '6px 12px',
@@ -195,22 +195,22 @@ const Peer = (props) =>
 					}, 2000);
 				}}
 			>
+				<div className={classnames(classes.viewContainer)} style={style}>
 					{ videoVisible && !webcamConsumer.supported ?
-					<div className={classes.videoInfo} style={style}>
+						<div className={classes.videoInfo}>
 							<p>incompatible video</p>
 						</div>
 						:null
 					}
 
 					{ !videoVisible ?
-					<div className={classes.videoInfo} style={style}>
+						<div className={classes.videoInfo}>
 							<p>this video is paused</p>
 						</div>
 						:null
 					}
 
 					{ videoVisible && webcamConsumer.supported ?
-					<div className={classnames(classes.viewContainer)} style={style}>
 						<div
 							className={classnames(classes.controls, webcamHover ? 'hover' : null)}
 							onMouseOver={() => setWebcamHover(true)}
@@ -281,6 +281,8 @@ const Peer = (props) =>
 								<FullScreenIcon />
 							</Fab>
 						</div>
+						:null
+					}
 
 					<VideoView
 						advancedMode={advancedMode}
@@ -295,8 +297,6 @@ const Peer = (props) =>
 						<Volume name={peer.name} />
 					</VideoView>
 				</div>
-					:null
-				}
 			</div>
 
 			{ screenConsumer ?

app/src/components/MeetingViews/Democratic.js

@@ -188,7 +188,7 @@ export default connect(
 				prev.peers === next.peers &&
 				prev.producers === next.producers &&
 				prev.consumers === next.consumers &&
-				prev.spotlights === next.spotlights
+				prev.room.spotlights === next.room.spotlights
 			);
 		}
 	}