Working fullscreen view

app/lib/components/FullScreenView.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import * as appPropTypes from './appPropTypes';
+import * as stateActions from '../redux/stateActions';
+import FullView from './FullView';
+
+const FullScreenView = (props) =>
+{
+	const {
+		advancedMode,
+		consumer,
+		toggleConsumerFullscreen
+	} = props;
+
+	if (!consumer)
+		return null;
+
+	const consumerVisible = (
+		Boolean(consumer) &&
+		!consumer.locallyPaused &&
+		!consumer.remotelyPaused
+	);
+
+	let consumerProfile;
+
+	if (consumer)
+		consumerProfile = consumer.profile;
+
+	return (
+		<div data-component='FullScreenView'>
+			{consumerVisible && !consumer.supported ?
+				<div className='incompatible-video'>
+					<p>incompatible video</p>
+				</div>
+				:null
+			}
+
+			<div className='controls'>
+				<div
+					className={classnames('button', 'fullscreen')}
+					onClick={(e) =>
+					{
+						e.stopPropagation();
+						toggleConsumerFullscreen(consumer);
+					}}
+				/>
+			</div>
+
+			<FullView
+				advancedMode={advancedMode}
+				videoTrack={consumer ? consumer.track : null}
+				videoVisible={consumerVisible}
+				videoProfile={consumerProfile}
+			/>
+		</div>
+	);
+};
+
+FullScreenView.propTypes =
+{
+	advancedMode             : PropTypes.bool,
+	consumer                 : appPropTypes.Consumer,
+	toggleConsumerFullscreen : PropTypes.func.isRequired
+};
+
+const mapStateToProps = (state) =>
+{
+	return {
+		consumer : state.consumers[state.room.fullScreenConsumer]
+	};
+};
+
+const mapDispatchToProps = (dispatch) =>
+{
+	return {
+		toggleConsumerFullscreen : (consumer) =>
+		{
+			if (consumer)
+				dispatch(stateActions.toggleConsumerFullscreen(consumer.id));
+		}
+	};
+};
+
+const FullScreenViewContainer = connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(FullScreenView);
+
+export default FullScreenViewContainer;

app/lib/components/FullView.jsx

@@ -22,7 +22,7 @@ export default class FullView extends React.Component
 		} = this.props;
 
 		return (
-			<div data-component='ScreenView'>
+			<div data-component='FullView'>
 				<video
 					ref='video'
 					className={classnames({

app/lib/components/Me.jsx

@@ -78,11 +78,6 @@ class Me extends React.Component
 		if (!me.displayNameSet)
 			tip = 'Click on your name to change it';
 
-		const style =
-			{
-				'width' : screenProducer ? '40vmin' : ''
-			};
-
 		return (
 			<div
 				data-component='Me'
@@ -90,7 +85,6 @@ class Me extends React.Component
 				data-tip={tip}
 				data-tip-disable={!tip}
 				data-type='dark'
-				style={style}
 			>
 				<div className={classnames('view-container', 'webcam')}>
 					{connected ?

app/lib/components/Peer.jsx

@@ -226,7 +226,8 @@ const mapDispatchToProps = (dispatch) =>
 		},
 		toggleConsumerFullscreen : (consumer) =>
 		{
-			dispatch(stateActions.toggleConsumerFullscreen(consumer));
+			if (consumer)
+				dispatch(stateActions.toggleConsumerFullscreen(consumer.id));
 		}
 	};
 };

app/lib/components/Peers.jsx

@@ -74,8 +74,7 @@ class Peers extends React.Component
 
 	componentWillReceiveProps(nextProps)
 	{
-		if (nextProps.videoStreams)
-			this.updateDimensions(nextProps);
+		this.updateDimensions(nextProps);
 	}
 
 	render()
@@ -83,7 +82,8 @@ class Peers extends React.Component
 		const {
 			advancedMode,
 			activeSpeakerName,
-			peers
+			peers,
+			toolAreaOpen
 		} = this.props;
 
 		const style = 
@@ -108,6 +108,7 @@ class Peers extends React.Component
 										advancedMode={advancedMode}
 										name={peer.name}
 										style={style}
+										toolAreaOpen={toolAreaOpen}
 									/>
 								</div>
 							</Appear>
@@ -124,7 +125,8 @@ Peers.propTypes =
 	advancedMode      : PropTypes.bool,
 	peers             : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
 	videoStreams      : PropTypes.any,
-	activeSpeakerName : PropTypes.string
+	activeSpeakerName : PropTypes.string,
+	toolAreaOpen      : PropTypes.bool
 };
 
 const mapStateToProps = (state) =>
@@ -140,7 +142,8 @@ const mapStateToProps = (state) =>
 	return {
 		peers             : peersArray,
 		videoStreams      : videoStreams,
-		activeSpeakerName : state.room.activeSpeakerName
+		activeSpeakerName : state.room.activeSpeakerName,
+		toolAreaOpen      : state.toolarea.toolAreaOpen
 	};
 };
 

app/lib/components/Room.jsx

@@ -12,6 +12,7 @@ import Peers from './Peers';
 import Notifications from './Notifications';
 import ToolAreaButton from './ToolArea/ToolAreaButton';
 import ToolArea from './ToolArea/ToolArea';
+import FullScreenView from './FullScreenView';
 
 class Room extends React.Component
 {
@@ -59,6 +60,7 @@ class Room extends React.Component
 		return (
 			<Appear duration={300}>
 				<div data-component='Room'>
+					<FullScreenView advancedMode={room.advancedMode} />
 					<div
 						className='room-wrapper'
 						style={{