New screenview done for now.

app/lib/components/Peer.jsx

@@ -18,7 +18,8 @@ const Peer = (props) =>
 		onMuteMic,
 		onUnmuteMic,
 		onDisableWebcam,
-		onEnableWebcam
+		onEnableWebcam,
+		style
 	} = props;
 
 	const micEnabled = (
@@ -50,7 +51,12 @@ const Peer = (props) =>
 		screenProfile = screenConsumer.profile;
 
 	return (
-		<div data-component='Peer'>
+		<div
+			data-component='Peer'
+			className={classnames({
+				screen : screenConsumer
+			})}
+		>
 			<div className='controls'>
 				<div
 					className={classnames('button', 'mic', {
@@ -87,25 +93,29 @@ const Peer = (props) =>
 				:null
 			}
 
-			<PeerView
-				advancedMode={advancedMode}
-				peer={peer}
-				audioTrack={micConsumer ? micConsumer.track : null}
-				videoTrack={webcamConsumer ? webcamConsumer.track : null}
-				videoVisible={videoVisible}
-				videoProfile={videoProfile}
-				audioCodec={micConsumer ? micConsumer.codec : null}
-				videoCodec={webcamConsumer ? webcamConsumer.codec : null}
-			/>
+			<div className={classnames('view-container', 'webcam')} style={style}>
+				<PeerView
+					advancedMode={advancedMode}
+					peer={peer}
+					audioTrack={micConsumer ? micConsumer.track : null}
+					videoTrack={webcamConsumer ? webcamConsumer.track : null}
+					videoVisible={videoVisible}
+					videoProfile={videoProfile}
+					audioCodec={micConsumer ? micConsumer.codec : null}
+					videoCodec={webcamConsumer ? webcamConsumer.codec : null}
+				/>
+			</div>
 
 			{screenConsumer ?
-				<ScreenView
-					advancedMode={advancedMode}
-					screenTrack={screenConsumer ? screenConsumer.track : null}
-					screenVisible={screenVisible}
-					screenProfile={screenProfile}
-					screenCodec={screenConsumer ? screenConsumer.codec : null}
-				/>
+				<div className={classnames('view-container', 'screen')} style={style}>
+					<ScreenView
+						advancedMode={advancedMode}
+						screenTrack={screenConsumer ? screenConsumer.track : null}
+						screenVisible={screenVisible}
+						screenProfile={screenProfile}
+						screenCodec={screenConsumer ? screenConsumer.codec : null}
+					/>
+				</div>
 				:null
 			}
 		</div>
@@ -114,15 +124,17 @@ const Peer = (props) =>
 
 Peer.propTypes =
 {
-	advancedMode    : PropTypes.bool,
-	peer            : appPropTypes.Peer.isRequired,
-	micConsumer     : appPropTypes.Consumer,
-	webcamConsumer  : appPropTypes.Consumer,
-	screenConsumer  : appPropTypes.Consumer,
-	onMuteMic       : PropTypes.func.isRequired,
-	onUnmuteMic     : PropTypes.func.isRequired,
-	onEnableWebcam  : PropTypes.func.isRequired,
-	onDisableWebcam : PropTypes.func.isRequired
+	advancedMode     : PropTypes.bool,
+	peer             : appPropTypes.Peer.isRequired,
+	micConsumer      : appPropTypes.Consumer,
+	webcamConsumer   : appPropTypes.Consumer,
+	screenConsumer   : appPropTypes.Consumer,
+	onMuteMic        : PropTypes.func.isRequired,
+	onUnmuteMic      : PropTypes.func.isRequired,
+	onEnableWebcam   : PropTypes.func.isRequired,
+	onDisableWebcam  : PropTypes.func.isRequired,
+	streamDimensions : PropTypes.object,
+	style            : PropTypes.object
 };
 
 const mapStateToProps = (state, { name }) =>

app/lib/components/PeerView.jsx

@@ -40,6 +40,7 @@ export default class PeerView extends React.Component
 		const {
 			isMe,
 			peer,
+			advancedMode,
 			videoVisible,
 			videoProfile,
 			audioCodec,
@@ -56,24 +57,27 @@ export default class PeerView extends React.Component
 		return (
 			<div data-component='PeerView'>
 				<div className='info'>
-					<div className={classnames('media', { 'is-me': isMe })}>
-						<div className='box'>
-							{audioCodec ?
-								<p className='codec'>{audioCodec}</p>
-								:null
-							}
+					{advancedMode ?
+						<div className={classnames('media', { 'is-me': isMe })}>
+							<div className='box'>
+								{audioCodec ?
+									<p className='codec'>{audioCodec}</p>
+									:null
+								}
 
-							{videoCodec ?
-								<p className='codec'>{videoCodec} {videoProfile}</p>
-								:null
-							}
+								{videoCodec ?
+									<p className='codec'>{videoCodec} {videoProfile}</p>
+									:null
+								}
 
-							{(videoVisible && videoWidth !== null) ?
-								<p className='resolution'>{videoWidth}x{videoHeight}</p>
-								:null
-							}
+								{(videoVisible && videoWidth !== null) ?
+									<p className='resolution'>{videoWidth}x{videoHeight}</p>
+									:null
+								}
+							</div>
 						</div>
-					</div>
+						:null
+					}
 
 					<div className={classnames('peer', { 'is-me': isMe })}>
 						{isMe ?
@@ -97,14 +101,17 @@ export default class PeerView extends React.Component
 							</span>
 						}
 
-						<div className='row'>
-							<span
-								className={classnames('device-icon', peer.device.flag)}
-							/>
-							<span className='device-version'>
-								{peer.device.name} {Math.floor(peer.device.version) || null}
-							</span>
-						</div>
+						{advancedMode ?
+							<div className='row'>
+								<span
+									className={classnames('device-icon', peer.device.flag)}
+								/>
+								<span className='device-version'>
+									{peer.device.name} {Math.floor(peer.device.version) || null}
+								</span>
+							</div>
+							:null
+						}
 					</div>
 				</div>
 
@@ -250,6 +257,7 @@ PeerView.propTypes =
 	isMe : PropTypes.bool,
 	peer : PropTypes.oneOfType(
 		[ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
+	advancedMode        : PropTypes.bool,
 	audioTrack          : PropTypes.any,
 	videoTrack          : PropTypes.any,
 	videoVisible        : PropTypes.bool.isRequired,

app/lib/components/Peers.jsx

@@ -13,7 +13,7 @@ class Peers extends React.Component
 		super(props);
 		this.state = {
 			peerWidth  : 400,
-			peerHeight : 300,
+			peerHeight : 300, 
 			ratio      : 1.334
 		};
 	}
@@ -25,7 +25,7 @@ class Peers extends React.Component
 
 	updateDimensions(props = this.props)
 	{
-		const n = props.peers ? props.peers.length : 0;
+		const n = props.videoStreams ? props.videoStreams : 0;
 
 		if (n == 0)
 		{
@@ -74,7 +74,7 @@ class Peers extends React.Component
 
 	componentWillReceiveProps(nextProps)
 	{
-		if (nextProps.peers)
+		if (nextProps.videoStreams)
 			this.updateDimensions(nextProps);
 	}
 
@@ -86,11 +86,11 @@ class Peers extends React.Component
 			peers
 		} = this.props;
 
-		const style =
-			{
-				'width'  : this.state.peerWidth,
-				'height' : this.state.peerHeight
-			};
+		const style = 
+		{
+			'width'  : this.state.peerWidth,
+			'height' : this.state.peerHeight
+		};
 
 		return (
 			<div data-component='Peers' ref='peers'>
@@ -102,11 +102,12 @@ class Peers extends React.Component
 								<div
 									className={classnames('peer-container', {
 										'active-speaker' : peer.name === activeSpeakerName
-									})} style={style}
+									})}
 								>
 									<Peer
 										advancedMode={advancedMode}
 										name={peer.name}
+										style={style}
 									/>
 								</div>
 							</Appear>
@@ -122,15 +123,23 @@ Peers.propTypes =
 {
 	advancedMode      : PropTypes.bool,
 	peers             : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
+	videoStreams      : PropTypes.any,
 	activeSpeakerName : PropTypes.string
 };
 
 const mapStateToProps = (state) =>
 {
 	const peersArray = Object.values(state.peers);
+	const videoStreamsArray = Object.values(state.consumers);
+	const videoStreams =
+		videoStreamsArray.filter((consumer) =>
+		{
+			return (consumer.source === 'webcam' || consumer.source === 'screen');
+		}).length;
 
 	return {
 		peers             : peersArray,
+		videoStreams      : videoStreams,
 		activeSpeakerName : state.room.activeSpeakerName
 	};
 };