Added redux selectors to improve performance. Fixed drawer. Cleaned up code and removed some unused code.

app/src/components/VideoContainers/FullScreenView.js

@@ -5,8 +5,8 @@ import classnames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import * as appPropTypes from '../appPropTypes';
 import * as stateActions from '../../actions/stateActions';
-import FullView from './FullView';
 import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
+import VideoView from './VideoView';
 
 const styles = () =>
 	({
@@ -41,7 +41,12 @@ const styles = () =>
 			transitionProperty : 'opacity, background-color',
 			transitionDuration : '0.15s',
 			width              : '5vmin',
-			height             : '5vmin'
+			height             : '5vmin',
+			opacity            : 0,
+			'&.visible'        :
+			{
+				opacity : 1
+			}
 		},
 		icon :
 		{
@@ -106,7 +111,7 @@ const FullScreenView = (props) =>
 
 			<div className={classes.controls}>
 				<div
-					className={classnames(classes.button, 'room-controls', {
+					className={classnames(classes.button, {
 						visible : toolbarsVisible
 					})}
 					onClick={(e) =>
@@ -119,8 +124,9 @@ const FullScreenView = (props) =>
 				</div>
 			</div>
 
-			<FullView
+			<VideoView
 				advancedMode={advancedMode}
+				videoContain
 				videoTrack={consumer ? consumer.track : null}
 				videoVisible={consumerVisible}
 				videoProfile={consumerProfile}
@@ -139,23 +145,19 @@ FullScreenView.propTypes =
 };
 
 const mapStateToProps = (state) =>
-{
-	return {
+	({
 		consumer        : state.consumers[state.room.fullScreenConsumer],
 		toolbarsVisible : state.room.toolbarsVisible
-	};
-};
+	});
 
 const mapDispatchToProps = (dispatch) =>
-{
-	return {
+	({
 		toggleConsumerFullscreen : (consumer) =>
 		{
 			if (consumer)
 				dispatch(stateActions.toggleConsumerFullscreen(consumer.id));
 		}
-	};
-};
+	});
 
 export default connect(
 	mapStateToProps,

app/src/components/VideoContainers/FullView.js

@@ -1,122 +0,0 @@
-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);

app/src/components/VideoContainers/VideoView.js

@@ -42,7 +42,8 @@ const styles = () =>
 			},
 			'&.contain' :
 			{
-				objectFit : 'contain'
+				objectFit       : 'contain',
+				backgroundColor : 'rgba(0, 0, 0, 1)'
 			}
 		},
 		info :