From 168affbc576d7ea08199edd6b1b5045244422988 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Wed, 3 Apr 2019 08:08:16 +0200
Subject: [PATCH] Added FullView back because of bug in Chrome.

---
 .../components/VideoContainers/FullView.js    | 122 ++++++++++++++++++
 app/src/components/VideoWindow/VideoWindow.js |   5 +-
 2 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 app/src/components/VideoContainers/FullView.js

diff --git a/app/src/components/VideoContainers/FullView.js b/app/src/components/VideoContainers/FullView.js
new file mode 100644
index 0000000..4e53a89
--- /dev/null
+++ b/app/src/components/VideoContainers/FullView.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = () =>
+	({
+		root :
+		{
+			position      : 'relative',
+			flex          : '100 100 auto',
+			height        : '100%',
+			width         : '100%',
+			display       : 'flex',
+			flexDirection : 'column',
+			overflow      : 'hidden'
+		},
+		video :
+		{
+			flex               : '100 100 auto',
+			height             : '100%',
+			width              : '100%',
+			objectFit          : 'contain',
+			userSelect         : 'none',
+			transitionProperty : 'opacity',
+			transitionDuration : '.15s',
+			backgroundColor    : 'rgba(0, 0, 0, 1)',
+			'&.hidden'         :
+			{
+				opacity            : 0,
+				transitionDuration : '0s'
+			},
+			'&.loading' :
+			{
+				filter : 'blur(5px)'
+			}
+		}
+	});
+
+class FullView extends React.PureComponent
+{
+	constructor(props)
+	{
+		super(props);
+
+		// Latest received video track.
+		// @type {MediaStreamTrack}
+		this._videoTrack = null;
+
+		this.video = React.createRef();
+	}
+
+	render()
+	{
+		const {
+			videoVisible,
+			videoProfile,
+			classes
+		} = this.props;
+
+		return (
+			<div className={classes.root}>
+				<video
+					ref={this.video}
+					className={classnames(classes.video, {
+						hidden  : !videoVisible,
+						loading : videoProfile === 'none'
+					})}
+					autoPlay
+					playsInline
+					muted={Boolean(true)}
+				/>
+			</div>
+		);
+	}
+
+	componentDidMount()
+	{
+		const { videoTrack } = this.props;
+
+		this._setTracks(videoTrack);
+	}
+
+	componentDidUpdate()
+	{
+		const { videoTrack } = this.props;
+
+		this._setTracks(videoTrack);
+	}
+
+	_setTracks(videoTrack)
+	{
+		if (this._videoTrack === videoTrack)
+			return;
+
+		this._videoTrack = videoTrack;
+
+		const video = this.video.current;
+
+		if (videoTrack)
+		{
+			const stream = new MediaStream();
+
+			stream.addTrack(videoTrack);
+			video.srcObject = stream;
+		}
+		else
+		{
+			video.srcObject = null;
+		}
+	}
+}
+
+FullView.propTypes =
+{
+	videoTrack   : PropTypes.any,
+	videoVisible : PropTypes.bool,
+	videoProfile : PropTypes.string,
+	classes      : PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(FullView);
diff --git a/app/src/components/VideoWindow/VideoWindow.js b/app/src/components/VideoWindow/VideoWindow.js
index 61fb90c..f7bd796 100644
--- a/app/src/components/VideoWindow/VideoWindow.js
+++ b/app/src/components/VideoWindow/VideoWindow.js
@@ -4,7 +4,7 @@ import NewWindow from './NewWindow';
 import PropTypes from 'prop-types';
 import * as appPropTypes from '../appPropTypes';
 import * as stateActions from '../../actions/stateActions';
-import VideoView from '../VideoContainers/VideoView';
+import FullView from '../VideoContainers/FullView';
 
 const VideoWindow = (props) =>
 {
@@ -30,9 +30,8 @@ const VideoWindow = (props) =>
 
 	return (
 		<NewWindow onUnload={toggleConsumerWindow}>
-			<VideoView
+			<FullView
 				advancedMode={advancedMode}
-				videoContain
 				videoTrack={consumer ? consumer.track : null}
 				videoVisible={consumerVisible}
 				videoProfile={consumerProfile}