Inital work on screenview.

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) =>
 {
@@ -91,15 +92,22 @@ const Peer = (props) =>
 				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}
+			/>
+
+			{screenConsumer ?
+				<ScreenView
+					advancedMode={advancedMode}
+					screenTrack={screenConsumer ? screenConsumer.track : null}
+					screenVisible={screenVisible}
+					screenProfile={screenProfile}
 					screenCodec={screenConsumer ? screenConsumer.codec : null}
 				/>
+				:null
+			}
 		</div>
 	);
 };

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,
+			videoHeight : null
-			screenWidth  : null,
-			screenHeight : 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,54 +39,30 @@ export default class PeerView extends React.Component
 	{
 		const {
 			isMe,
-			advancedMode,
 			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'>
-					{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,10 +73,7 @@ export default class PeerView extends React.Component
 								:null
 							}
 						</div>
-							}
 					</div>
-						:null
-					}
 
 					<div className={classnames('peer', { 'is-me': isMe })}>
 						{isMe ?
@@ -130,7 +97,6 @@ export default class PeerView extends React.Component
 							</span>
 						}
 
-						{advancedMode ?
 						<div className='row'>
 							<span
 								className={classnames('device-icon', peer.device.flag)}
@@ -139,26 +105,11 @@ export default class PeerView extends React.Component
 								{peer.device.name} {Math.floor(peer.device.version) || null}
 							</span>
 						</div>
-							:null
-						}
 					</div>
 				</div>
 
 				<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 +118,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 +135,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 +150,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 &&
+		if (this._audioTrack === audioTrack && this._videoTrack === videoTrack)
-			this._videoTrack === videoTrack &&
-			this._screenTrack === screenTrack)
 			return;
 
 		this._audioTrack = audioTrack;
 		this._videoTrack = videoTrack;
-		this._screenTrack = screenTrack;
 
 		if (this._hark)
 			this._hark.stop();
@@ -224,9 +169,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 +181,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 +248,13 @@ export default class PeerView extends React.Component
 PeerView.propTypes =
 {
 	isMe : PropTypes.bool,
-	advancedMode : PropTypes.bool,
 	peer : PropTypes.oneOfType(
 		[ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
 	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/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
+};