From e35b8759f6564710d61083f250fde7d552bc73f4 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Mon, 16 Jul 2018 15:30:20 +0200
Subject: [PATCH 1/6] Use the browser FullScreen API in FullView

---
 app/lib/components/FullScreenView.jsx |  1 +
 app/lib/components/FullView.jsx       | 31 ++++++++++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/lib/components/FullScreenView.jsx b/app/lib/components/FullScreenView.jsx
index 6192eee..cee2dd0 100644
--- a/app/lib/components/FullScreenView.jsx
+++ b/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>
 	);
diff --git a/app/lib/components/FullView.jsx b/app/lib/components/FullView.jsx
index 3edc64a..5ea6cad 100644
--- a/app/lib/components/FullView.jsx
+++ b/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,26 @@ 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() {
+		fscreen.removeEventListener('fullscreenchange', this.handleExitFullscreen);
+	}
+
+	handleExitFullscreen = () => {
+		if (!fscreen.fullscreenElement) {
+			this.props.toggleFullscreen();
+		}
+	};
+
+	componentDidUpdate()
 	{
-		const { videoTrack } = nextProps;
+		const { videoTrack } = this.props;
 
 		this._setTracks(videoTrack);
 	}
@@ -64,15 +82,12 @@ 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

From 643e54351cb26d3b6aa8c0012b92df8d9a81523a Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Mon, 16 Jul 2018 15:30:20 +0200
Subject: [PATCH 2/6] Use the browser FullScreen API in FullView

---
 app/lib/components/FullScreenView.jsx |  1 +
 app/lib/components/FullView.jsx       | 31 ++++++++++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/lib/components/FullScreenView.jsx b/app/lib/components/FullScreenView.jsx
index 6192eee..cee2dd0 100644
--- a/app/lib/components/FullScreenView.jsx
+++ b/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>
 	);
diff --git a/app/lib/components/FullView.jsx b/app/lib/components/FullView.jsx
index 3edc64a..5ea6cad 100644
--- a/app/lib/components/FullView.jsx
+++ b/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,26 @@ 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() {
+		fscreen.removeEventListener('fullscreenchange', this.handleExitFullscreen);
+	}
+
+	handleExitFullscreen = () => {
+		if (!fscreen.fullscreenElement) {
+			this.props.toggleFullscreen();
+		}
+	};
+
+	componentDidUpdate()
 	{
-		const { videoTrack } = nextProps;
+		const { videoTrack } = this.props;
 
 		this._setTracks(videoTrack);
 	}
@@ -64,15 +82,12 @@ 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

From 3acc2a69368d81e58b7aa50d3624bd0a8f55bba2 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Mon, 16 Jul 2018 16:27:29 +0200
Subject: [PATCH 3/6] Use the number of peers instead of the number of video
 streams to compute dimensions

---
 app/lib/components/Peers.jsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/lib/components/Peers.jsx b/app/lib/components/Peers.jsx
index 02bed23..2f83911 100644
--- a/app/lib/components/Peers.jsx
+++ b/app/lib/components/Peers.jsx
@@ -25,12 +25,7 @@ class Peers extends React.Component
 
 	updateDimensions()
 	{
-		const n = this.props.videoStreams ? this.props.videoStreams : 0;
-
-		if (n == 0)
-		{
-			return;
-		}
+		const n = this.props.peers.length;
 
 		const width = this.refs.peers.clientWidth;
 		const height = this.refs.peers.clientHeight;

From 8aa7c9a8e47c4b4edf31c0aeac1387fa90bee92f Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Mon, 16 Jul 2018 16:31:58 +0200
Subject: [PATCH 4/6] Hide horizontal overflow to prevent notifications from
 creating scrollbars

---
 app/stylus/index.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/stylus/index.styl b/app/stylus/index.styl
index a8a7c9b..a9a58f8 100644
--- a/app/stylus/index.styl
+++ b/app/stylus/index.styl
@@ -29,6 +29,7 @@ html {
 
 body {
 	height: 100%;
+	overflow-x: hidden;
 }
 
 #multiparty-meeting {

From 44058625b9310e20851413c6b29a6be100b67747 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Mon, 16 Jul 2018 16:42:55 +0200
Subject: [PATCH 5/6] Update dimensions only when the tool area state changes

---
 app/lib/components/Peers.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/lib/components/Peers.jsx b/app/lib/components/Peers.jsx
index 2f83911..6f06da9 100644
--- a/app/lib/components/Peers.jsx
+++ b/app/lib/components/Peers.jsx
@@ -67,9 +67,11 @@ class Peers extends React.Component
 		window.removeEventListener('resize', this.resizeUpdate.bind(this));
 	}
 
-	componentDidUpdate()
+	componentDidUpdate(prevProps)
 	{
-		this.updateDimensions();
+		if (prevProps.toolAreaOpen !== this.props.toolAreaOpen) {
+			this.updateDimensions();
+		}
 	}
 
 	render()

From 67e2fc1c6f99b7bd80c64bb2cad71cec446d6037 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Mon, 16 Jul 2018 16:54:00 +0200
Subject: [PATCH 6/6] Update linting and fix PropTypes for FullView

---
 app/lib/components/FullView.jsx | 20 +++++++++++++-------
 app/lib/components/Peers.jsx    |  3 ++-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/lib/components/FullView.jsx b/app/lib/components/FullView.jsx
index 5ea6cad..28c1094 100644
--- a/app/lib/components/FullView.jsx
+++ b/app/lib/components/FullView.jsx
@@ -52,18 +52,22 @@ export default class FullView extends React.Component
 
 		this._setTracks(videoTrack);
 
-		if (fscreen.fullscreenEnabled) {
+		if (fscreen.fullscreenEnabled) 
+		{
 			fscreen.addEventListener('fullscreenchange', this.handleExitFullscreen, false);
 			fscreen.requestFullscreen(this.video.current);
 		}
 	}
 
-	componentWillUnmount() {
+	componentWillUnmount() 
+	{
 		fscreen.removeEventListener('fullscreenchange', this.handleExitFullscreen);
 	}
 
-	handleExitFullscreen = () => {
-		if (!fscreen.fullscreenElement) {
+	handleExitFullscreen = () => 
+	{
+		if (!fscreen.fullscreenElement) 
+		{
 			this.props.toggleFullscreen();
 		}
 	};
@@ -87,6 +91,7 @@ export default class FullView extends React.Component
 		if (videoTrack)
 		{
 			const stream = new MediaStream;
+
 			stream.addTrack(videoTrack);
 			video.srcObject = stream;
 		}
@@ -99,7 +104,8 @@ export default class FullView extends React.Component
 
 FullView.propTypes =
 {
-	videoTrack   : PropTypes.any,
-	videoVisible : PropTypes.bool,
-	videoProfile : PropTypes.string
+	videoTrack       : PropTypes.any,
+	videoVisible     : PropTypes.bool,
+	videoProfile     : PropTypes.string,
+	toggleFullscreen : PropTypes.func.isRequired
 };
diff --git a/app/lib/components/Peers.jsx b/app/lib/components/Peers.jsx
index 6f06da9..e8ead9d 100644
--- a/app/lib/components/Peers.jsx
+++ b/app/lib/components/Peers.jsx
@@ -69,7 +69,8 @@ class Peers extends React.Component
 
 	componentDidUpdate(prevProps)
 	{
-		if (prevProps.toolAreaOpen !== this.props.toolAreaOpen) {
+		if (prevProps.toolAreaOpen !== this.props.toolAreaOpen) 
+		{
 			this.updateDimensions();
 		}
 	}