Merge branch 'develop' of github.com:havfo/multiparty-meeting into feature/resize-observer

* 'develop' of github.com:havfo/multiparty-meeting:
  Update linting and fix PropTypes for FullView
  Update dimensions only when the tool area state changes
  Hide horizontal overflow to prevent notifications from creating scrollbars
  Use the number of peers instead of the number of video streams to compute dimensions
  Use the browser FullScreen API in FullView
  Use the browser FullScreen API in FullView

app/lib/components/FullScreenView.jsx

@@ -53,6 +53,7 @@ const FullScreenView = (props) =>
 				videoTrack={consumer ? consumer.track : null}
 				videoVisible={consumerVisible}
 				videoProfile={consumerProfile}
+				toggleFullscreen={() => toggleConsumerFullscreen(consumer)}
 			/>
 		</div>
 	);

app/lib/components/FullView.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Spinner from 'react-spinner';
+import fscreen from 'fscreen';
 
 export default class FullView extends React.Component
 {
@@ -12,6 +13,8 @@ export default class FullView extends React.Component
 		// Latest received video track.
 		// @type {MediaStreamTrack}
 		this._videoTrack = null;
+
+		this.video = React.createRef();
 	}
 
 	render()
@@ -24,7 +27,7 @@ export default class FullView extends React.Component
 		return (
 			<div data-component='FullView'>
 				<video
-					ref='video'
+					ref={this.video}
 					className={classnames({
 						hidden  : !videoVisible,
 						loading : videoProfile === 'none'
@@ -48,11 +51,30 @@ export default class FullView extends React.Component
 		const { videoTrack } = this.props;
 
 		this._setTracks(videoTrack);
+
+		if (fscreen.fullscreenEnabled) 
+		{
+			fscreen.addEventListener('fullscreenchange', this.handleExitFullscreen, false);
+			fscreen.requestFullscreen(this.video.current);
+		}
 	}
 
-	componentWillReceiveProps(nextProps)
+	componentWillUnmount() 
 	{
-		const { videoTrack } = nextProps;
+		fscreen.removeEventListener('fullscreenchange', this.handleExitFullscreen);
+	}
+
+	handleExitFullscreen = () => 
+	{
+		if (!fscreen.fullscreenElement) 
+		{
+			this.props.toggleFullscreen();
+		}
+	};
+
+	componentDidUpdate()
+	{
+		const { videoTrack } = this.props;
 
 		this._setTracks(videoTrack);
 	}
@@ -64,15 +86,13 @@ export default class FullView extends React.Component
 
 		this._videoTrack = videoTrack;
 
-		const { video } = this.refs;
+		const video = this.video.current;
 
 		if (videoTrack)
 		{
 			const stream = new MediaStream;
 
-			if (videoTrack)
+      stream.addTrack(videoTrack);
-				stream.addTrack(videoTrack);
-
 			video.srcObject = stream;
 		}
 		else
@@ -84,7 +104,8 @@ export default class FullView extends React.Component
 
 FullView.propTypes =
 {
-	videoTrack   : PropTypes.any,
+	videoTrack       : PropTypes.any,
-	videoVisible : PropTypes.bool,
+	videoVisible     : PropTypes.bool,
-	videoProfile : PropTypes.string
+	videoProfile     : PropTypes.string,
+	toggleFullscreen : PropTypes.func.isRequired
 };

app/lib/components/Peers.jsx

@@ -21,12 +21,7 @@ class Peers extends React.Component
 
 	updateDimensions = () =>
 	{
-		const n = this.props.videoStreams ? this.props.videoStreams : 0;
+		const n = this.props.peers.length;
-
-		if (n == 0)
-		{
-			return;
-		}
 
 		const width = this.refs.peers.clientWidth;
 		const height = this.refs.peers.clientHeight;
@@ -61,7 +56,6 @@ class Peers extends React.Component
 	componentDidMount()
 	{
 		const observer = new ResizeObserver(this.updateDimensions);
-
 		observer.observe(this.refs.peers);
 	}
 

app/stylus/index.styl

@@ -29,6 +29,7 @@ html {
 
 body {
 	height: 100%;
+	overflow-x: hidden;
 }
 
 #multiparty-meeting {