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
 				}
+			</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

@@ -16,7 +16,9 @@ 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.
@@ -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,27 +48,49 @@ 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 })}>
+						{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
@@ -73,6 +101,7 @@ export default class PeerView extends React.Component
 									:null
 								}
 							</div>
+						}
 					</div>
 
 					<div className={classnames('peer', { 'is-me': isMe })}>
@@ -110,6 +139,19 @@ 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,
@@ -118,12 +160,15 @@ 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' ?
+				{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);
 
+			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(() =>

app/stylus/components/PeerScreenView.styl

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

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

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