From acb035c9528e20233cf8464977de68ed1c6523aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Thu, 12 Apr 2018 11:42:10 +0200
Subject: [PATCH] Added basic support for screen layout

---
 app/lib/components/Peer.jsx | 95 +++++++++++++++++++++++++------------
 app/stylus/index.styl       |  1 +
 2 files changed, 65 insertions(+), 31 deletions(-)

diff --git a/app/lib/components/Peer.jsx b/app/lib/components/Peer.jsx
index 61ed633..66536eb 100644
--- a/app/lib/components/Peer.jsx
+++ b/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 (
-		<div data-component='Peer'>
-			<div className='indicators'>
-				{!micEnabled ?
-					<div className='icon mic-off' />
-					:null
-				}
-				{!videoVisible ?
-					<div className='icon webcam-off' />
-					:null
-				}
+	let screenProfile;
+
+	if (screenConsumer)
+		screenProfile = screenConsumer.profile;
+
+	if (screenVisible && screenConsumer.supported)
+	{
+		return (
+			<div data-component='Peer'>
+				<PeerScreenView
+					videoTrack={screenConsumer ? screenConsumer.track : null}
+					videoVisible={screenVisible}
+					videoProfile={screenProfile}
+					videoCodec={screenConsumer ? screenConsumer.codec : null}
+				/>
 			</div>
-
-			{videoVisible && !webcamConsumer.supported ?
-				<div className='incompatible-video'>
-					<p>incompatible video</p>
+		);
+	}
+	else
+	{
+		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
-				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>
-	);
+				{videoVisible && !webcamConsumer.supported ?
+					<div className='incompatible-video'>
+						<p>incompatible video</p>
+					</div>
+					:null
+				}
+
+				<PeerView
+					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>
+		);
+	}
 };
 
 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
 	};
 };
 
diff --git a/app/stylus/index.styl b/app/stylus/index.styl
index f73898b..db3084e 100644
--- a/app/stylus/index.styl
+++ b/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';
 }