Added basic support for screen layout

app/lib/components/Peer.jsx

@@ -2,13 +2,15 @@ import React from 'react';
 import { connect } from 'react-redux';
 import * as appPropTypes from './appPropTypes';
 import PeerView from './PeerView';
+import PeerScreenView from './PeerScreenView';
 
 const Peer = (props) =>
 {
 	const {
 		peer,
 		micConsumer,
-		webcamConsumer
+		webcamConsumer,
+		screenConsumer
 	} = props;
 
 	const micEnabled = (
@@ -23,49 +25,77 @@ const Peer = (props) =>
 		!webcamConsumer.remotelyPaused
 	);
 
+	const screenVisible = (
+		Boolean(screenConsumer) &&
+		!screenConsumer.locallyPaused &&
+		!screenConsumer.remotelyPaused
+	);
+
 	let videoProfile;
 
 	if (webcamConsumer)
 		videoProfile = webcamConsumer.profile;
 
-	return (
+	let screenProfile;
-		<div data-component='Peer'>
+
-			<div className='indicators'>
+	if (screenConsumer)
-				{!micEnabled ?
+		screenProfile = screenConsumer.profile;
-					<div className='icon mic-off' />
+
-					:null
+	if (screenVisible && screenConsumer.supported)
-				}
+	{
-				{!videoVisible ?
+		return (
-					<div className='icon webcam-off' />
+			<div data-component='Peer'>
-					:null
+				<PeerScreenView
-				}
+					videoTrack={screenConsumer ? screenConsumer.track : null}
+					videoVisible={screenVisible}
+					videoProfile={screenProfile}
+					videoCodec={screenConsumer ? screenConsumer.codec : null}
+				/>
 			</div>
-
+		);
-			{videoVisible && !webcamConsumer.supported ?
+	}
-				<div className='incompatible-video'>
+	else
-					<p>incompatible video</p>
+	{
+		return (
+			<div data-component='Peer'>
+				<div className='indicators'>
+					{!micEnabled ?
+						<div className='icon mic-off' />
+						:null
+					}
+					{!videoVisible ?
+						<div className='icon webcam-off' />
+						:null
+					}
 				</div>
-				:null
-			}
 
-			<PeerView
+				{videoVisible && !webcamConsumer.supported ?
-				peer={peer}
+					<div className='incompatible-video'>
-				audioTrack={micConsumer ? micConsumer.track : null}
+						<p>incompatible video</p>
-				videoTrack={webcamConsumer ? webcamConsumer.track : null}
+					</div>
-				videoVisible={videoVisible}
+					:null
-				videoProfile={videoProfile}
+				}
-				audioCodec={micConsumer ? micConsumer.codec : null}
+
-				videoCodec={webcamConsumer ? webcamConsumer.codec : null}
+				<PeerView
-			/>
+					peer={peer}
-		</div>
+					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>
+		);
+	}
 };
 
 Peer.propTypes =
 {
 	peer           : appPropTypes.Peer.isRequired,
 	micConsumer    : appPropTypes.Consumer,
-	webcamConsumer : appPropTypes.Consumer
+	webcamConsumer : appPropTypes.Consumer,
+	screenConsumer : appPropTypes.Consumer
 };
 
 const mapStateToProps = (state, { name }) =>
@@ -77,11 +107,14 @@ const mapStateToProps = (state, { name }) =>
 		consumersArray.find((consumer) => consumer.source === 'mic');
 	const webcamConsumer =
 		consumersArray.find((consumer) => consumer.source === 'webcam');
+	const screenConsumer =
+		consumersArray.find((consumer) => consumer.source === 'screen');
 
 	return {
 		peer,
 		micConsumer,
-		webcamConsumer
+		webcamConsumer,
+		screenConsumer
 	};
 };
 

app/stylus/index.styl

@@ -40,6 +40,7 @@ body {
 	@import './components/Peers';
 	@import './components/Peer';
 	@import './components/PeerView';
+	@import './components/PeerScreenView';
 	@import './components/Notifications';
 	@import './components/Chat';
 }