Merge branch 'feature-screenview' into develop

app/lib/components/Me.jsx

@@ -7,6 +7,7 @@ import { getDeviceInfo } from 'mediasoup-client';
 import * as appPropTypes from './appPropTypes';
 import * as requestActions from '../redux/requestActions';
 import PeerView from './PeerView';
+import ScreenView from './ScreenView';
 
 class Me extends React.Component
 {
@@ -32,6 +33,7 @@ class Me extends React.Component
 			advancedMode,
 			micProducer,
 			webcamProducer,
+			screenProducer,
 			onChangeDisplayName,
 			onMuteMic,
 			onUnmuteMic,
@@ -65,6 +67,12 @@ class Me extends React.Component
 			!webcamProducer.remotelyPaused
 		);
 
+		const screenVisible = (
+			Boolean(screenProducer) &&
+			!screenProducer.locallyPaused &&
+			!screenProducer.remotelyPaused
+		);
+
 		let tip;
 
 		if (!me.displayNameSet)
@@ -115,6 +123,17 @@ class Me extends React.Component
 					onChangeDisplayName={(displayName) => onChangeDisplayName(displayName)}
 				/>
 
+				{screenProducer ?
+					<ScreenView
+						isMe
+						advancedMode={advancedMode}
+						screenTrack={screenProducer ? screenProducer.track : null}
+						screenVisible={screenVisible}
+						screenCodec={screenProducer ? screenProducer.codec : null}
+					/>
+					:null
+				}
+
 				{this._tooltip ?
 					<ReactTooltip
 						effect='solid'
@@ -165,6 +184,7 @@ Me.propTypes =
 	me                  : appPropTypes.Me.isRequired,
 	micProducer         : appPropTypes.Producer,
 	webcamProducer      : appPropTypes.Producer,
+	screenProducer      : appPropTypes.Producer,
 	onChangeDisplayName : PropTypes.func.isRequired,
 	onMuteMic           : PropTypes.func.isRequired,
 	onUnmuteMic         : PropTypes.func.isRequired,
@@ -179,12 +199,15 @@ const mapStateToProps = (state) =>
 		producersArray.find((producer) => producer.source === 'mic');
 	const webcamProducer =
 		producersArray.find((producer) => producer.source === 'webcam');
+	const screenProducer =
+		producersArray.find((producer) => producer.source === 'screen');
 
 	return {
 		connected      : state.room.state === 'connected',
 		me             : state.me,
 		micProducer    : micProducer,
-		webcamProducer : webcamProducer
+		webcamProducer : webcamProducer,
+		screenProducer : screenProducer
 	};
 };
 

app/lib/components/Peer.jsx

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import * as appPropTypes from './appPropTypes';
 import * as requestActions from '../redux/requestActions';
 import PeerView from './PeerView';
+import ScreenView from './ScreenView';
 
 const Peer = (props) =>
 {
@@ -17,7 +18,8 @@ const Peer = (props) =>
 		onMuteMic,
 		onUnmuteMic,
 		onDisableWebcam,
-		onEnableWebcam
+		onEnableWebcam,
+		style
 	} = props;
 
 	const micEnabled = (
@@ -49,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', {
@@ -86,21 +93,32 @@ const Peer = (props) =>
 				:null
 			}
 
+			<div className={classnames('view-container', 'webcam')} style={style}>
 				<PeerView
 					advancedMode={advancedMode}
 					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}
+				/>
+			</div>
+
+			{screenConsumer ?
+				<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,7 +132,9 @@ Peer.propTypes =
 	onMuteMic        : PropTypes.func.isRequired,
 	onUnmuteMic      : PropTypes.func.isRequired,
 	onEnableWebcam   : PropTypes.func.isRequired,
-	onDisableWebcam : PropTypes.func.isRequired
+	onDisableWebcam  : PropTypes.func.isRequired,
+	streamDimensions : PropTypes.object,
+	style            : PropTypes.object
 };
 
 const mapStateToProps = (state, { name }) =>

app/lib/components/PeerView.jsx

@@ -16,9 +16,7 @@ export default class PeerView extends React.Component
 		{
 			volume      : 0, // Integer from 0 to 10.,
 			videoWidth  : null,
-			videoHeight  : null,
-			screenWidth  : null,
-			screenHeight : null
+			videoHeight : null
 		};
 
 		// Latest received video track.
@@ -29,10 +27,6 @@ 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;
@@ -45,24 +39,19 @@ export default class PeerView extends React.Component
 	{
 		const {
 			isMe,
-			advancedMode,
 			peer,
+			advancedMode,
 			videoVisible,
 			videoProfile,
-			screenVisible,
-			screenProfile,
 			audioCodec,
 			videoCodec,
-			screenCodec,
 			onChangeDisplayName
 		} = this.props;
 
 		const {
 			volume,
 			videoWidth,
-			videoHeight,
-			screenWidth,
-			screenHeight
+			videoHeight
 		} = this.state;
 
 		return (
@@ -70,29 +59,12 @@ export default class PeerView extends React.Component
 				<div className='info'>
 					{advancedMode ?
 						<div className={classnames('media', { 'is-me': isMe })}>
-							{screenVisible ?
 							<div className='box'>
 								{audioCodec ?
 									<p className='codec'>{audioCodec}</p>
 									:null
 								}
 
-									{screenCodec ?
-										<p className='codec'>{screenCodec} {screenProfile}</p>
-										:null
-									}
-
-									{(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
@@ -103,7 +75,6 @@ export default class PeerView extends React.Component
 									:null
 								}
 							</div>
-							}
 						</div>
 						:null
 					}
@@ -146,19 +117,6 @@ export default class PeerView extends React.Component
 
 				<video
 					ref='video'
-					className={classnames({
-						hidden  : !videoVisible && !screenVisible,
-						'is-me' : isMe,
-						loading : videoProfile === 'none' && screenProfile === 'none'
-					})}
-					autoPlay
-					muted={isMe}
-				/>
-
-				{screenVisible ?
-					<div className='minivideo'>
-						<video
-							ref='minivideo'
 					className={classnames({
 						hidden  : !videoVisible,
 						'is-me' : isMe,
@@ -167,15 +125,12 @@ export default class PeerView extends React.Component
 					autoPlay
 					muted={isMe}
 				/>
-					</div>
-					:null
-				}
 
 				<div className='volume-container'>
 					<div className={classnames('bar', `level${volume}`)} />
 				</div>
 
-				{videoProfile === 'none' && screenProfile === 'none' ?
+				{videoProfile === 'none' ?
 					<div className='spinner-container'>
 						<Spinner />
 					</div>
@@ -187,9 +142,9 @@ export default class PeerView extends React.Component
 
 	componentDidMount()
 	{
-		const { audioTrack, videoTrack, screenTrack } = this.props;
+		const { audioTrack, videoTrack } = this.props;
 
-		this._setTracks(audioTrack, videoTrack, screenTrack);
+		this._setTracks(audioTrack, videoTrack);
 	}
 
 	componentWillUnmount()
@@ -202,21 +157,18 @@ export default class PeerView extends React.Component
 
 	componentWillReceiveProps(nextProps)
 	{
-		const { audioTrack, videoTrack, screenTrack } = nextProps;
+		const { audioTrack, videoTrack } = nextProps;
 
-		this._setTracks(audioTrack, videoTrack, screenTrack);
+		this._setTracks(audioTrack, videoTrack);
 	}
 
-	_setTracks(audioTrack, videoTrack, screenTrack)
+	_setTracks(audioTrack, videoTrack)
 	{
-		if (this._audioTrack === audioTrack &&
-			this._videoTrack === videoTrack &&
-			this._screenTrack === screenTrack)
+		if (this._audioTrack === audioTrack && this._videoTrack === videoTrack)
 			return;
 
 		this._audioTrack = audioTrack;
 		this._videoTrack = videoTrack;
-		this._screenTrack = screenTrack;
 
 		if (this._hark)
 			this._hark.stop();
@@ -224,9 +176,9 @@ export default class PeerView extends React.Component
 		clearInterval(this._videoResolutionTimer);
 		this._hideVideoResolution();
 
-		const { video, minivideo } = this.refs;
+		const { video } = this.refs;
 
-		if (audioTrack || videoTrack || screenTrack)
+		if (audioTrack || videoTrack)
 		{
 			const stream = new MediaStream;
 
@@ -236,19 +188,7 @@ export default class PeerView extends React.Component
 			if (videoTrack)
 				stream.addTrack(videoTrack);
 
-			if (screenTrack)
-			{
-				const screenStream = new MediaStream;
-
-				screenStream.addTrack(screenTrack);
-
-				video.srcObject = screenStream;
-				minivideo.srcObject = stream;
-			}
-			else
-			{
 			video.srcObject = stream;
-			}
 
 			if (audioTrack)
 				this._runHark(stream);
@@ -315,18 +255,14 @@ export default class PeerView extends React.Component
 PeerView.propTypes =
 {
 	isMe : PropTypes.bool,
-	advancedMode : PropTypes.bool,
 	peer : PropTypes.oneOfType(
 		[ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
+	advancedMode        : PropTypes.bool,
 	audioTrack          : PropTypes.any,
 	videoTrack          : PropTypes.any,
-	screenTrack         : PropTypes.any,
 	videoVisible        : PropTypes.bool.isRequired,
 	videoProfile        : PropTypes.string,
-	screenVisible       : PropTypes.bool,
-	screenProfile       : PropTypes.string,
 	audioCodec          : PropTypes.string,
 	videoCodec          : PropTypes.string,
-	screenCodec         : PropTypes.string,
 	onChangeDisplayName : PropTypes.func
 };

app/lib/components/Peers.jsx

@@ -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);
 	}
 
@@ -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
 	};
 };

app/lib/components/ScreenView.jsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Spinner from 'react-spinner';
+
+export default class PeerView extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+
+		this.state =
+		{
+			screenWidth  : null,
+			screenHeight : null
+		};
+
+		// Latest received screen track.
+		// @type {MediaStreamTrack}
+		this._screenTrack = null;
+
+		// Periodic timer for showing video resolution.
+		this._screenResolutionTimer = null;
+	}
+
+	render()
+	{
+		const {
+			isMe,
+			advancedMode,
+			screenVisible,
+			screenProfile,
+			screenCodec
+		} = this.props;
+
+		const {
+			screenWidth,
+			screenHeight
+		} = this.state;
+
+		return (
+			<div data-component='ScreenView'>
+				<div className='info'>
+					{advancedMode ?
+						<div className={classnames('media', { 'is-me': isMe })}>
+							{screenVisible ?
+								<div className='box'>
+									{screenCodec ?
+										<p className='codec'>{screenCodec} {screenProfile}</p>
+										:null
+									}
+
+									{(screenVisible && screenWidth !== null) ?
+										<p className='resolution'>{screenWidth}x{screenHeight}</p>
+										:null
+									}
+								</div>
+								:null
+							}
+						</div>
+						:null
+					}
+				</div>
+
+				<video
+					ref='video'
+					className={classnames({
+						hidden  : !screenVisible,
+						'is-me' : isMe,
+						loading : screenProfile === 'none'
+					})}
+					autoPlay
+					muted={Boolean(true)}
+				/>
+
+				{screenProfile === 'none' ?
+					<div className='spinner-container'>
+						<Spinner />
+					</div>
+					:null
+				}
+			</div>
+		);
+	}
+
+	componentDidMount()
+	{
+		const { screenTrack } = this.props;
+
+		this._setTracks(screenTrack);
+	}
+
+	componentWillUnmount()
+	{
+		clearInterval(this._screenResolutionTimer);
+	}
+
+	componentWillReceiveProps(nextProps)
+	{
+		const { screenTrack } = nextProps;
+
+		this._setTracks(screenTrack);
+	}
+
+	_setTracks(screenTrack)
+	{
+		if (this._screenTrack === screenTrack)
+			return;
+
+		this._screenTrack = screenTrack;
+
+		clearInterval(this._screenResolutionTimer);
+		this._hideScreenResolution();
+
+		const { video } = this.refs;
+
+		if (screenTrack)
+		{
+			const stream = new MediaStream;
+
+			if (screenTrack)
+				stream.addTrack(screenTrack);
+
+			video.srcObject = stream;
+
+			if (screenTrack)
+				this._showScreenResolution();
+		}
+		else
+		{
+			video.srcObject = null;
+		}
+	}
+
+	_showScreenResolution()
+	{
+		this._screenResolutionTimer = setInterval(() =>
+		{
+			const { screenWidth, screenHeight } = this.state;
+			const { video } = this.refs;
+
+			// Don't re-render if nothing changed.
+			if (video.videoWidth === screenWidth && video.videoHeight === screenHeight)
+				return;
+
+			this.setState(
+				{
+					screenWidth  : video.videoWidth,
+					screenHeight : video.videoHeight
+				});
+		}, 1000);
+	}
+
+	_hideScreenResolution()
+	{
+		this.setState({ screenWidth: null, screenHeight: null });
+	}
+}
+
+PeerView.propTypes =
+{
+	isMe          : PropTypes.bool,
+	advancedMode  : PropTypes.bool,
+	screenTrack   : PropTypes.any,
+	screenVisible : PropTypes.bool,
+	screenProfile : PropTypes.string,
+	screenCodec   : PropTypes.string
+};

app/stylus/components/Peer.styl

@@ -3,6 +3,15 @@
 	position: relative;
 	height: 100%;
 	width: 100%;
+	flex-direction: row;
+	display: flex;
+
+	&.screen {
+		border: 5px solid rgba(#fff, 0.4);
+	}
+
+	&:not(.screen) {
+	}
 
 	> .controls {
 		position: absolute;
@@ -94,6 +103,16 @@
 		align-items: center;
 	}
 
+	> .view-container {
+		&.webcam {
+			order: 2;
+		}
+
+		&.screen {
+			order: 1;
+		}
+	}
+
 	.incompatible-video {
 		position: absolute;
 		z-index: 2

app/stylus/components/PeerView.styl

@@ -194,39 +194,6 @@
 		}
 	}
 
-	> .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

app/stylus/components/ScreenView.styl

@@ -0,0 +1,109 @@
+[data-component='ScreenView'] {
+	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.6vmin;
+		left: 0.6vmin;
+		bottom: 0;
+		right: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		> .media {
+			flex: 0 0 auto;
+			display: flex;
+			flex-direction: row;
+
+			> .box {
+				padding: 0.4vmin;
+				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;
+					}
+				}
+			}
+		}
+	}
+
+	> video {
+		flex: 100 100 auto;
+		height: 100%;
+		width: 100%;
+		object-fit: contain;
+		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 ScreenView-spinner {
+	0% { opacity: 1; }
+	100% { opacity: 0.15; }
+}

app/stylus/index.styl

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