From 1250396ba74358c377744cce725c2def930c2a5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Fri, 13 Apr 2018 09:54:59 +0200
Subject: [PATCH 1/4] Fixed bug in screen sharing, and added support for
 showing cam video at the same time as screen sharing

---
 app/lib/components/Peer.jsx               |  77 +++++------
 app/lib/components/PeerScreenView.jsx     | 160 ----------------------
 app/lib/components/PeerView.jsx           | 124 +++++++++++++----
 app/stylus/components/PeerScreenView.styl | 146 --------------------
 app/stylus/components/PeerView.styl       |  38 ++++-
 app/stylus/index.styl                     |   1 -
 6 files changed, 159 insertions(+), 387 deletions(-)
 delete mode 100644 app/lib/components/PeerScreenView.jsx
 delete mode 100644 app/stylus/components/PeerScreenView.styl

diff --git a/app/lib/components/Peer.jsx b/app/lib/components/Peer.jsx
index 66536eb..09c4fa2 100644
--- a/app/lib/components/Peer.jsx
+++ b/app/lib/components/Peer.jsx
@@ -2,7 +2,6 @@ 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) =>
 {
@@ -41,53 +40,41 @@ const Peer = (props) =>
 	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>
-		);
-	}
-	else
-	{
-		return (
-			<div data-component='Peer'>
-				<div className='indicators'>
-					{!micEnabled ?
-						<div className='icon mic-off' />
-						:null
-					}
-					{!videoVisible ?
-						<div className='icon webcam-off' />
-						:null
-					}
-				</div>
-
-				{videoVisible && !webcamConsumer.supported ?
-					<div className='incompatible-video'>
-						<p>incompatible video</p>
-					</div>
+	return (
+		<div data-component='Peer'>
+			<div className='indicators'>
+				{!micEnabled ?
+					<div className='icon mic-off' />
+					:null
+				}
+				{!videoVisible ?
+					<div className='icon webcam-off' />
 					: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}
+				screenTrack={screenConsumer ? screenConsumer.track : null}
+				videoVisible={videoVisible}
+				videoProfile={videoProfile}
+				screenVisible={screenVisible}
+				screenProfile={screenProfile}
+				audioCodec={micConsumer ? micConsumer.codec : null}
+				videoCodec={webcamConsumer ? webcamConsumer.codec : null}
+				screenCodec={screenConsumer ? screenConsumer.codec : null}
+			/>
+		</div>
+	);
 };
 
 Peer.propTypes =
diff --git a/app/lib/components/PeerScreenView.jsx b/app/lib/components/PeerScreenView.jsx
deleted file mode 100644
index 62672aa..0000000
--- a/app/lib/components/PeerScreenView.jsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import Spinner from 'react-spinner';
-
-export default class PeerScreenView extends React.Component
-{
-	constructor(props)
-	{
-		super(props);
-
-		this.state =
-		{
-			videoWidth  : null,
-			videoHeight : null
-		};
-
-		// Latest received video track.
-		// @type {MediaStreamTrack}
-		this._videoTrack = null;
-
-		// Periodic timer for showing video resolution.
-		this._videoResolutionTimer = null;
-	}
-
-	render()
-	{
-		const {
-			isMe,
-			videoVisible,
-			videoProfile,
-			videoCodec
-		} = this.props;
-
-		const {
-			videoWidth,
-			videoHeight
-		} = this.state;
-
-		return (
-			<div data-component='PeerScreenView'>
-				<div className='info'>
-					<div className={classnames('media', { 'is-me': isMe })}>
-						<div className='box'>
-							{videoCodec ?
-								<p className='codec'>{videoCodec} {videoProfile}</p>
-								:null
-							}
-
-							{(videoVisible && videoWidth !== null) ?
-								<p className='resolution'>{videoWidth}x{videoHeight}</p>
-								:null
-							}
-						</div>
-					</div>
-				</div>
-
-				<video
-					ref='video'
-					className={classnames({
-						hidden  : !videoVisible,
-						'is-me' : isMe,
-						loading : videoProfile === 'none'
-					})}
-					autoPlay
-					muted={isMe}
-				/>
-
-				{videoProfile === 'none' ?
-					<div className='spinner-container'>
-						<Spinner />
-					</div>
-					:null
-				}
-			</div>
-		);
-	}
-
-	componentDidMount()
-	{
-		const { videoTrack } = this.props;
-
-		this._setTracks(videoTrack);
-	}
-
-	componentWillUnmount()
-	{
-		clearInterval(this._videoResolutionTimer);
-	}
-
-	componentWillReceiveProps(nextProps)
-	{
-		const { videoTrack } = nextProps;
-
-		this._setTracks(videoTrack);
-	}
-
-	_setTracks(videoTrack)
-	{
-		if (this._videoTrack === videoTrack)
-			return;
-
-		this._videoTrack = videoTrack;
-
-		clearInterval(this._videoResolutionTimer);
-		this._hideVideoResolution();
-
-		const { video } = this.refs;
-
-		if (videoTrack)
-		{
-			const stream = new MediaStream;
-
-			if (videoTrack)
-				stream.addTrack(videoTrack);
-
-			video.srcObject = stream;
-
-			if (videoTrack)
-				this._showVideoResolution();
-		}
-		else
-		{
-			video.srcObject = null;
-		}
-	}
-
-	_showVideoResolution()
-	{
-		this._videoResolutionTimer = setInterval(() =>
-		{
-			const { videoWidth, videoHeight } = this.state;
-			const { video } = this.refs;
-
-			// Don't re-render if nothing changed.
-			if (video.videoWidth === videoWidth && video.videoHeight === videoHeight)
-				return;
-
-			this.setState(
-				{
-					videoWidth  : video.videoWidth,
-					videoHeight : video.videoHeight
-				});
-		}, 1000);
-	}
-
-	_hideVideoResolution()
-	{
-		this.setState({ videoWidth: null, videoHeight: null });
-	}
-}
-
-PeerScreenView.propTypes =
-{
-	isMe         : PropTypes.bool,
-	videoTrack   : PropTypes.any,
-	videoVisible : PropTypes.bool.isRequired,
-	videoProfile : PropTypes.string,
-	videoCodec   : PropTypes.string
-};
diff --git a/app/lib/components/PeerView.jsx b/app/lib/components/PeerView.jsx
index 840badd..e4f4572 100644
--- a/app/lib/components/PeerView.jsx
+++ b/app/lib/components/PeerView.jsx
@@ -14,9 +14,11 @@ export default class PeerView extends React.Component
 
 		this.state =
 		{
-			volume      : 0, // Integer from 0 to 10.,
-			videoWidth  : null,
-			videoHeight : null
+			volume       : 0, // Integer from 0 to 10.,
+			videoWidth   : null,
+			videoHeight  : null,
+			screenWidth  : null,
+			screenHeight : null
 		};
 
 		// Latest received video track.
@@ -27,6 +29,10 @@ export default class PeerView extends React.Component
 		// @type {MediaStreamTrack}
 		this._videoTrack = null;
 
+		// Latest received screen track.
+		// @type {MediaStreamTrack}
+		this._screenTrack = null;
+
 		// Hark instance.
 		// @type {Object}
 		this._hark = null;
@@ -42,37 +48,60 @@ export default class PeerView extends React.Component
 			peer,
 			videoVisible,
 			videoProfile,
+			screenVisible,
+			screenProfile,
 			audioCodec,
 			videoCodec,
+			screenCodec,
 			onChangeDisplayName
 		} = this.props;
 
 		const {
 			volume,
 			videoWidth,
-			videoHeight
+			videoHeight,
+			screenWidth,
+			screenHeight
 		} = this.state;
 
 		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
-							}
+						{screenVisible ?
+							<div className='box'>
+								{audioCodec ?
+									<p className='codec'>{audioCodec}</p>
+									:null
+								}
 
-							{videoCodec ?
-								<p className='codec'>{videoCodec} {videoProfile}</p>
-								:null
-							}
+								{screenCodec ?
+									<p className='codec'>{screenCodec} {screenProfile}</p>
+									:null
+								}
 
-							{(videoVisible && videoWidth !== null) ?
-								<p className='resolution'>{videoWidth}x{videoHeight}</p>
-								:null
-							}
-						</div>
+								{(screenVisible && screenWidth !== null) ?
+									<p className='resolution'>{screenWidth}x{screenHeight}</p>
+									:null
+								}
+							</div>
+							:<div className='box'>
+								{audioCodec ?
+									<p className='codec'>{audioCodec}</p>
+									:null
+								}
+
+								{videoCodec ?
+									<p className='codec'>{videoCodec} {videoProfile}</p>
+									:null
+								}
+
+								{(videoVisible && videoWidth !== null) ?
+									<p className='resolution'>{videoWidth}x{videoHeight}</p>
+									:null
+								}
+							</div>
+						}
 					</div>
 
 					<div className={classnames('peer', { 'is-me': isMe })}>
@@ -111,19 +140,35 @@ export default class PeerView extends React.Component
 				<video
 					ref='video'
 					className={classnames({
-						hidden  : !videoVisible,
+						hidden  : !videoVisible && !screenVisible,
 						'is-me' : isMe,
-						loading : videoProfile === 'none'
+						loading : videoProfile === 'none' && screenProfile === 'none'
 					})}
 					autoPlay
 					muted={isMe}
 				/>
 
+				{screenVisible ?
+					<div className='minivideo'>
+						<video
+							ref='minivideo'
+							className={classnames({
+								hidden  : !videoVisible,
+								'is-me' : isMe,
+								loading : videoProfile === 'none'
+							})}
+							autoPlay
+							muted={isMe}
+						/>
+					</div>
+					:null
+				}
+
 				<div className='volume-container'>
 					<div className={classnames('bar', `level${volume}`)} />
 				</div>
 
-				{videoProfile === 'none' ?
+				{videoProfile === 'none' && screenProfile === 'none' ?
 					<div className='spinner-container'>
 						<Spinner />
 					</div>
@@ -135,9 +180,9 @@ export default class PeerView extends React.Component
 
 	componentDidMount()
 	{
-		const { audioTrack, videoTrack } = this.props;
+		const { audioTrack, videoTrack, screenTrack } = this.props;
 
-		this._setTracks(audioTrack, videoTrack);
+		this._setTracks(audioTrack, videoTrack, screenTrack);
 	}
 
 	componentWillUnmount()
@@ -150,18 +195,21 @@ export default class PeerView extends React.Component
 
 	componentWillReceiveProps(nextProps)
 	{
-		const { audioTrack, videoTrack } = nextProps;
+		const { audioTrack, videoTrack, screenTrack } = nextProps;
 
-		this._setTracks(audioTrack, videoTrack);
+		this._setTracks(audioTrack, videoTrack, screenTrack);
 	}
 
-	_setTracks(audioTrack, videoTrack)
+	_setTracks(audioTrack, videoTrack, screenTrack)
 	{
-		if (this._audioTrack === audioTrack && this._videoTrack === videoTrack)
+		if (this._audioTrack === audioTrack &&
+			this._videoTrack === videoTrack &&
+			this._screenTrack === screenTrack)
 			return;
 
 		this._audioTrack = audioTrack;
 		this._videoTrack = videoTrack;
+		this._screenTrack = screenTrack;
 
 		if (this._hark)
 			this._hark.stop();
@@ -169,9 +217,9 @@ export default class PeerView extends React.Component
 		clearInterval(this._videoResolutionTimer);
 		this._hideVideoResolution();
 
-		const { video } = this.refs;
+		const { video, minivideo } = this.refs;
 
-		if (audioTrack || videoTrack)
+		if (audioTrack || videoTrack || screenTrack)
 		{
 			const stream = new MediaStream;
 
@@ -181,7 +229,19 @@ export default class PeerView extends React.Component
 			if (videoTrack)
 				stream.addTrack(videoTrack);
 
-			video.srcObject = stream;
+			if (screenTrack)
+			{
+				const screenStream = new MediaStream;
+
+				screenStream.addTrack(screenTrack);
+
+				video.srcObject = screenStream;
+				minivideo.srcObject = stream;
+			}
+			else
+			{
+				video.srcObject = stream;
+			}
 
 			if (audioTrack)
 				this._runHark(stream);
@@ -252,9 +312,13 @@ PeerView.propTypes =
 		[ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
 	audioTrack          : PropTypes.any,
 	videoTrack          : PropTypes.any,
+	screenTrack         : PropTypes.any,
 	videoVisible        : PropTypes.bool.isRequired,
 	videoProfile        : PropTypes.string,
+	screenVisible       : PropTypes.bool.isRequired,
+	screenProfile       : PropTypes.string,
 	audioCodec          : PropTypes.string,
 	videoCodec          : PropTypes.string,
+	screenCodec         : PropTypes.string,
 	onChangeDisplayName : PropTypes.func
 };
diff --git a/app/stylus/components/PeerScreenView.styl b/app/stylus/components/PeerScreenView.styl
deleted file mode 100644
index d83e108..0000000
--- a/app/stylus/components/PeerScreenView.styl
+++ /dev/null
@@ -1,146 +0,0 @@
-[data-component='PeerScreenView'] {
-	position: relative;
-	flex: 100 100 auto;
-	height: 100%;
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	background-color: rgba(#2a4b58, 0.9);
-	background-image: url('/resources/images/buddy.svg');
-	background-position: bottom;
-	background-size: auto 85%;
-	background-repeat: no-repeat;
-
-	> .info {
-		$backgroundTint = #000;
-
-		position: absolute;
-		z-index: 5
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		background: linear-gradient(to bottom,
-			rgba($backgroundTint, 0) 0%,
-			rgba($backgroundTint, 0) 60%,
-			rgba($backgroundTint, 0.1) 70%,
-			rgba($backgroundTint, 0.8) 100%);
-
-		> .media {
-			flex: 0 0 auto;
-			display: flex;
-			flex-direction: row;
-
-			> .box {
-				margin: 4px;
-				padding: 2px 4px;
-				border-radius: 2px;
-				background-color: rgba(#000, 0.25);
-
-				> p {
-					user-select: none;
-					pointer-events: none;
-					margin-bottom: 2px;
-					color: rgba(#fff, 0.7);
-					font-size: 10px;
-
-					&:last-child {
-						margin-bottom: 0;
-					}
-				}
-			}
-		}
-
-		> .peer {
-			flex: 0 0 auto;
-			display: flex;
-			flex-direction: column;
-			justify-content: flex-end;
-
-			+desktop() {
-				&.is-me {
-					padding: 10px;
-					align-items: flex-start;
-				}
-
-				&:not(.is-me) {
-					padding: 20px;
-					align-items: flex-start;
-				}
-			}
-
-			+mobile() {
-				&.is-me {
-					padding: 10px;
-					align-items: flex-start;
-				}
-
-				&:not(.is-me) {
-					padding: 10px;
-					align-items: flex-end;
-				}
-			}
-		}
-	}
-
-	> video {
-		flex: 100 100 auto;
-		height: 100%;
-		width: 100%;
-		object-fit: cover;
-		user-select: none;
-		transition-property: opacity;
-		transition-duration: .15s;
-		background-color: rgba(#000, 0.75);
-
-		&.is-me {
-			transform: scaleX(-1);
-		}
-
-		&.hidden {
-			opacity: 0;
-			transition-duration: 0s;
-		}
-
-		&.loading {
-			filter: blur(5px);
-		}
-	}
-
-	> .spinner-container {
-		position: absolute;
-		top: 0
-		bottom: 0;
-		left: 0;
-		right: 0;
-		background-color: rgba(#000, 0.75);
-
-		.react-spinner {
-			position: relative;
-			width: 48px;
-			height: 48px;
-			top: 50%;
-			left: 50%;
-
-			.react-spinner_bar {
-				position: absolute;
-				width: 20%;
-				height: 7.8%;
-				top: -3.9%;
-				left: -10%;
-				animation: PeerView-spinner 1.2s linear infinite;
-				border-radius: 5px;
-				background-color: rgba(#fff, 0.5);
-			}
-		}
-	}
-}
-
-@keyframes PeerScreenView-spinner {
-	0% { opacity: 1; }
-	100% { opacity: 0.15; }
-}
diff --git a/app/stylus/components/PeerView.styl b/app/stylus/components/PeerView.styl
index a44610c..1230284 100644
--- a/app/stylus/components/PeerView.styl
+++ b/app/stylus/components/PeerView.styl
@@ -24,11 +24,6 @@
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
-		background: linear-gradient(to bottom,
-			rgba($backgroundTint, 0) 0%,
-			rgba($backgroundTint, 0) 60%,
-			rgba($backgroundTint, 0.1) 70%,
-			rgba($backgroundTint, 0.8) 100%);
 
 		> .media {
 			flex: 0 0 auto;
@@ -195,6 +190,39 @@
 		}
 	}
 
+	> .minivideo {
+		height: 15%;
+		width: 15%;
+		bottom: 1%;
+		right: 1%;
+		position: absolute;
+		overflow: hidden;
+
+		> video {
+			flex: 100 100 auto;
+			height: 100%;
+			width: 100%;
+			object-fit: cover;
+			user-select: none;
+			transition-property: opacity;
+			transition-duration: .15s;
+			background-color: rgba(#000, 0.75);
+
+			&.is-me {
+				transform: scaleX(-1);
+			}
+
+			&.hidden {
+				opacity: 0;
+				transition-duration: 0s;
+			}
+
+			&.loading {
+				filter: blur(5px);
+			}
+		}
+	}
+
 	> .volume-container {
 		position: absolute;
 		top: 0
diff --git a/app/stylus/index.styl b/app/stylus/index.styl
index db3084e..f73898b 100644
--- a/app/stylus/index.styl
+++ b/app/stylus/index.styl
@@ -40,7 +40,6 @@ body {
 	@import './components/Peers';
 	@import './components/Peer';
 	@import './components/PeerView';
-	@import './components/PeerScreenView';
 	@import './components/Notifications';
 	@import './components/Chat';
 }

From 6541b8bb7f4cfa7ba6f47b54e0f1a9027ccccf66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Mon, 16 Apr 2018 15:04:55 +0200
Subject: [PATCH 2/4] Fix for safari and edge screen sharing

---
 app/lib/ScreenShare.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/lib/ScreenShare.js b/app/lib/ScreenShare.js
index 36d2760..7c71b52 100644
--- a/app/lib/ScreenShare.js
+++ b/app/lib/ScreenShare.js
@@ -189,6 +189,19 @@ class FirefoxScreenShare
 	}
 }
 
+class DefaultScreenShare
+{
+	isScreenShareAvailable()
+	{
+		return false;
+	}
+
+	needExtension()
+	{
+		return false;
+	}
+}
+
 export default class ScreenShare
 {
 	static create()
@@ -205,7 +218,7 @@ export default class ScreenShare
 			}
 			default:
 			{
-				return null;
+				return new DefaultScreenShare();
 			}
 		}
 	}

From ad131d0510bc2e2aa02c0319bc105eb05a47545d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9sz=C3=A1ros=20Mih=C3=A1ly?= <misi@niif.hu>
Date: Mon, 9 Apr 2018 09:43:48 +0200
Subject: [PATCH 3/4] Add the needed modification to support redux chrome
 extension

---
 app/lib/index.jsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/lib/index.jsx b/app/lib/index.jsx
index dbd91c4..e4f9cd2 100644
--- a/app/lib/index.jsx
+++ b/app/lib/index.jsx
@@ -5,7 +5,8 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import {
 	applyMiddleware as applyReduxMiddleware,
-	createStore as createReduxStore
+	createStore as createReduxStore,
+	compose as composeRedux
 } from 'redux';
 import thunk from 'redux-thunk';
 import { createLogger as createReduxLogger } from 'redux-logger';
@@ -40,10 +41,22 @@ if (process.env.NODE_ENV === 'development')
 	reduxMiddlewares.push(reduxLogger);
 }
 
+const composeEnhancers =
+typeof window === 'object' &&
+window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
+	window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+		// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
+	}) : composeRedux;
+
+const enhancer = composeEnhancers(
+	applyReduxMiddleware(...reduxMiddlewares)
+	// other store enhancers if any
+);
+
 const store = createReduxStore(
 	reducers,
 	undefined,
-	applyReduxMiddleware(...reduxMiddlewares)
+	enhancer
 );
 
 domready(() =>

From 8a8d9938e92470634e0c1bdb265ef8ebf273c143 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9sz=C3=A1ros=20Mih=C3=A1ly?= <misi@niif.hu>
Date: Mon, 23 Apr 2018 15:31:08 +0200
Subject: [PATCH 4/4] fix lint error key-spacing

---
 server/lib/Room.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/lib/Room.js b/server/lib/Room.js
index a2bad3f..e1ded90 100644
--- a/server/lib/Room.js
+++ b/server/lib/Room.js
@@ -254,7 +254,7 @@ class Room extends EventEmitter
 
 					protooPeer.send(
 						'chat-history-receive',
-						{ chatHistory : this._chatHistory }
+						{ chatHistory: this._chatHistory }
 					);
 
 					break;