Merge branch 'develop' of https://github.com/havfo/multiparty-meeting into develop

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

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) =>
 {
@@ -79,19 +78,30 @@ const Peer = (props) =>
 					</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}
+				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 =

app/lib/components/PeerScreenView.jsx

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

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

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(() =>