From fa94a62d9d4439021de8ba5822e01c115b7c4107 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Thu, 21 Jun 2018 15:25:40 +0200
Subject: [PATCH 1/2] Placed icon and begun work with code.

---
 app/lib/RoomClient.js                         |   8 +-
 app/lib/components/FullView.jsx               |  90 +++++++++
 app/lib/components/Me.jsx                     |  90 +++++----
 app/lib/components/Peer.jsx                   | 131 ++++++++----
 .../images/icon_fullscreen_black.svg          |   4 +
 .../images/icon_fullscreen_exit_black.svg     |   4 +
 app/stylus/components/Me.styl                 | 162 +++++++++------
 app/stylus/components/Peer.styl               | 188 ++++++++++--------
 app/stylus/components/Room.styl               |   2 -
 9 files changed, 447 insertions(+), 232 deletions(-)
 create mode 100644 app/lib/components/FullView.jsx
 create mode 100644 app/resources/images/icon_fullscreen_black.svg
 create mode 100644 app/resources/images/icon_fullscreen_exit_black.svg

diff --git a/app/lib/RoomClient.js b/app/lib/RoomClient.js
index 6969735..fb6ed29 100644
--- a/app/lib/RoomClient.js
+++ b/app/lib/RoomClient.js
@@ -604,7 +604,7 @@ export default class RoomClient
 					{
 						for (const consumer of peer.consumers)
 						{
-							if (consumer.kind !== 'audio')
+							if (consumer.appData.source !== 'mic')
 								continue;
 
 							consumer.pause('mute-audio');
@@ -640,7 +640,7 @@ export default class RoomClient
 					{
 						for (const consumer of peer.consumers)
 						{
-							if (consumer.kind !== 'audio' || !consumer.supported)
+							if (consumer.appData.source !== 'mic' || !consumer.supported)
 								continue;
 
 							consumer.resume();
@@ -676,7 +676,7 @@ export default class RoomClient
 					{
 						for (const consumer of peer.consumers)
 						{
-							if (consumer.kind !== 'video')
+							if (consumer.appData.source !== 'webcam')
 								continue;
 
 							consumer.pause('pause-video');
@@ -712,7 +712,7 @@ export default class RoomClient
 					{
 						for (const consumer of peer.consumers)
 						{
-							if (consumer.kind !== 'video' || !consumer.supported)
+							if (consumer.appData.source !== 'webcam' || !consumer.supported)
 								continue;
 
 							consumer.resume();
diff --git a/app/lib/components/FullView.jsx b/app/lib/components/FullView.jsx
new file mode 100644
index 0000000..fec212c
--- /dev/null
+++ b/app/lib/components/FullView.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Spinner from 'react-spinner';
+
+export default class FullView extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+
+		// Latest received video track.
+		// @type {MediaStreamTrack}
+		this._videoTrack = null;
+	}
+
+	render()
+	{
+		const {
+			videoVisible,
+			videoProfile
+		} = this.props;
+
+		return (
+			<div data-component='ScreenView'>
+				<video
+					ref='video'
+					className={classnames({
+						hidden  : !videoVisible,
+						loading : videoProfile === 'none'
+					})}
+					autoPlay
+					muted={Boolean(true)}
+				/>
+
+				{videoProfile === 'none' ?
+					<div className='spinner-container'>
+						<Spinner />
+					</div>
+					:null
+				}
+			</div>
+		);
+	}
+
+	componentDidMount()
+	{
+		const { videoTrack } = this.props;
+
+		this._setTracks(videoTrack);
+	}
+
+	componentWillReceiveProps(nextProps)
+	{
+		const { videoTrack } = nextProps;
+
+		this._setTracks(videoTrack);
+	}
+
+	_setTracks(videoTrack)
+	{
+		if (this._videoTrack === videoTrack)
+			return;
+
+		this._videoTrack = videoTrack;
+
+		const { video } = this.refs;
+
+		if (videoTrack)
+		{
+			const stream = new MediaStream;
+
+			if (videoTrack)
+				stream.addTrack(videoTrack);
+
+			video.srcObject = stream;
+		}
+		else
+		{
+			video.srcObject = null;
+		}
+	}
+}
+
+FullView.propTypes =
+{
+	videoTrack   : PropTypes.any,
+	videoVisible : PropTypes.bool,
+	videoProfile : PropTypes.string
+};
diff --git a/app/lib/components/Me.jsx b/app/lib/components/Me.jsx
index ad3259f..4fc985d 100644
--- a/app/lib/components/Me.jsx
+++ b/app/lib/components/Me.jsx
@@ -78,6 +78,11 @@ 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'
@@ -85,52 +90,57 @@ class Me extends React.Component
 				data-tip={tip}
 				data-tip-disable={!tip}
 				data-type='dark'
+				style={style}
 			>
-				{connected ?
-					<div className='controls'>
-						<div
-							className={classnames('button', 'mic', micState, {
-								disabled : me.audioInProgress
-							})}
-							onClick={() =>
-							{
-								micState === 'on' ? onMuteMic() : onUnmuteMic();
-							}}
-						/>
+				<div className={classnames('view-container', 'webcam')}>
+					{connected ?
+						<div className='controls'>
+							<div
+								className={classnames('button', 'mic', micState, {
+									disabled : me.audioInProgress
+								})}
+								onClick={() =>
+								{
+									micState === 'on' ? onMuteMic() : onUnmuteMic();
+								}}
+							/>
 
-						<div
-							className={classnames('button', 'webcam', webcamState, {
-								disabled : me.webcamInProgress
-							})}
-							onClick={() =>
-							{
-								webcamState === 'on' ? onDisableWebcam() : onEnableWebcam();
-							}}
-						/>
-					</div>
-					:null
-				}
+							<div
+								className={classnames('button', 'webcam', webcamState, {
+									disabled : me.webcamInProgress
+								})}
+								onClick={() =>
+								{
+									webcamState === 'on' ? onDisableWebcam() : onEnableWebcam();
+								}}
+							/>
+						</div>
+						:null
+					}
 
-				<PeerView
-					isMe
-					advancedMode={advancedMode}
-					peer={me}
-					audioTrack={micProducer ? micProducer.track : null}
-					videoTrack={webcamProducer ? webcamProducer.track : null}
-					videoVisible={videoVisible}
-					audioCodec={micProducer ? micProducer.codec : null}
-					videoCodec={webcamProducer ? webcamProducer.codec : null}
-					onChangeDisplayName={(displayName) => onChangeDisplayName(displayName)}
-				/>
-
-				{screenProducer ?
-					<ScreenView
+					<PeerView
 						isMe
 						advancedMode={advancedMode}
-						screenTrack={screenProducer ? screenProducer.track : null}
-						screenVisible={screenVisible}
-						screenCodec={screenProducer ? screenProducer.codec : null}
+						peer={me}
+						audioTrack={micProducer ? micProducer.track : null}
+						videoTrack={webcamProducer ? webcamProducer.track : null}
+						videoVisible={videoVisible}
+						audioCodec={micProducer ? micProducer.codec : null}
+						videoCodec={webcamProducer ? webcamProducer.codec : null}
+						onChangeDisplayName={(displayName) => onChangeDisplayName(displayName)}
 					/>
+				</div>
+
+				{screenProducer ?
+					<div className={classnames('view-container', 'screen')}>
+						<ScreenView
+							isMe
+							advancedMode={advancedMode}
+							screenTrack={screenProducer ? screenProducer.track : null}
+							screenVisible={screenVisible}
+							screenCodec={screenProducer ? screenProducer.codec : null}
+						/>
+					</div>
 					:null
 				}
 
diff --git a/app/lib/components/Peer.jsx b/app/lib/components/Peer.jsx
index e9567b2..e28dab9 100644
--- a/app/lib/components/Peer.jsx
+++ b/app/lib/components/Peer.jsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as appPropTypes from './appPropTypes';
 import * as requestActions from '../redux/requestActions';
+import * as stateActions from '../redux/stateActions';
 import PeerView from './PeerView';
 import ScreenView from './ScreenView';
 
@@ -19,6 +20,9 @@ const Peer = (props) =>
 		onUnmuteMic,
 		onDisableWebcam,
 		onEnableWebcam,
+		onDisableScreen,
+		onEnableScreen,
+		toggleConsumerFullscreen,
 		style
 	} = props;
 
@@ -57,35 +61,6 @@ const Peer = (props) =>
 				screen : screenConsumer
 			})}
 		>
-			<div className='controls'>
-				<div
-					className={classnames('button', 'mic', {
-						on       : micEnabled,
-						off      : !micEnabled,
-						disabled : peer.peerAudioInProgress
-					})}
-					onClick={(e) =>
-					{
-						e.stopPropagation();
-						micEnabled ? onMuteMic(peer.name) : onUnmuteMic(peer.name);
-					}}
-				/>
-
-				<div
-					className={classnames('button', 'webcam', {
-						on       : videoVisible,
-						off      : !videoVisible,
-						disabled : peer.peerVideoInProgress
-					})}
-					onClick={(e) =>
-					{
-						e.stopPropagation();
-						videoVisible ?
-							onDisableWebcam(peer.name) : onEnableWebcam(peer.name);
-					}}
-				/>
-			</div>
-
 			{videoVisible && !webcamConsumer.supported ?
 				<div className='incompatible-video'>
 					<p>incompatible video</p>
@@ -94,6 +69,43 @@ const Peer = (props) =>
 			}
 
 			<div className={classnames('view-container', 'webcam')} style={style}>
+				<div className='controls'>
+					<div
+						className={classnames('button', 'mic', {
+							on       : micEnabled,
+							off      : !micEnabled,
+							disabled : peer.peerAudioInProgress
+						})}
+						onClick={(e) =>
+						{
+							e.stopPropagation();
+							micEnabled ? onMuteMic(peer.name) : onUnmuteMic(peer.name);
+						}}
+					/>
+
+					<div
+						className={classnames('button', 'webcam', {
+							on       : videoVisible,
+							off      : !videoVisible,
+							disabled : peer.peerVideoInProgress
+						})}
+						onClick={(e) =>
+						{
+							e.stopPropagation();
+							videoVisible ?
+								onDisableWebcam(peer.name) : onEnableWebcam(peer.name);
+						}}
+					/>
+
+					<div
+						className={classnames('button', 'fullscreen')}
+						onClick={(e) =>
+						{
+							e.stopPropagation();
+							toggleConsumerFullscreen(webcamConsumer);
+						}}
+					/>
+				</div>
 				<PeerView
 					advancedMode={advancedMode}
 					peer={peer}
@@ -108,6 +120,30 @@ const Peer = (props) =>
 
 			{screenConsumer ?
 				<div className={classnames('view-container', 'screen')} style={style}>
+					<div className='controls'>
+						<div
+							className={classnames('button', 'screen', {
+								on       : screenVisible,
+								off      : !screenVisible,
+								disabled : peer.peerScreenInProgress
+							})}
+							onClick={(e) =>
+							{
+								e.stopPropagation();
+								screenVisible ?
+									onDisableScreen(peer.name) : onEnableScreen(peer.name);
+							}}
+						/>
+
+						<div
+							className={classnames('button', 'fullscreen')}
+							onClick={(e) =>
+							{
+								e.stopPropagation();
+								toggleConsumerFullscreen(screenConsumer);
+							}}
+						/>
+					</div>
 					<ScreenView
 						advancedMode={advancedMode}
 						screenTrack={screenConsumer ? screenConsumer.track : null}
@@ -124,17 +160,20 @@ const Peer = (props) =>
 
 Peer.propTypes =
 {
-	advancedMode     : PropTypes.bool,
-	peer             : appPropTypes.Peer.isRequired,
-	micConsumer      : appPropTypes.Consumer,
-	webcamConsumer   : appPropTypes.Consumer,
-	screenConsumer   : appPropTypes.Consumer,
-	onMuteMic        : PropTypes.func.isRequired,
-	onUnmuteMic      : PropTypes.func.isRequired,
-	onEnableWebcam   : PropTypes.func.isRequired,
-	onDisableWebcam  : PropTypes.func.isRequired,
-	streamDimensions : PropTypes.object,
-	style            : PropTypes.object
+	advancedMode             : PropTypes.bool,
+	peer                     : appPropTypes.Peer.isRequired,
+	micConsumer              : appPropTypes.Consumer,
+	webcamConsumer           : appPropTypes.Consumer,
+	screenConsumer           : appPropTypes.Consumer,
+	onMuteMic                : PropTypes.func.isRequired,
+	onUnmuteMic              : PropTypes.func.isRequired,
+	onEnableWebcam           : PropTypes.func.isRequired,
+	onDisableWebcam          : PropTypes.func.isRequired,
+	streamDimensions         : PropTypes.object,
+	style                    : PropTypes.object,
+	onEnableScreen           : PropTypes.func.isRequired,
+	onDisableScreen          : PropTypes.func.isRequired,
+	toggleConsumerFullscreen : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state, { name }) =>
@@ -176,6 +215,18 @@ const mapDispatchToProps = (dispatch) =>
 		onDisableWebcam : (peerName) =>
 		{
 			dispatch(requestActions.pausePeerVideo(peerName));
+		},
+		onEnableScreen : (peerName) =>
+		{
+			dispatch(requestActions.resumePeerScreen(peerName));
+		},
+		onDisableScreen : (peerName) =>
+		{
+			dispatch(requestActions.pausePeerScreen(peerName));
+		},
+		toggleConsumerFullscreen : (consumer) =>
+		{
+			dispatch(stateActions.toggleConsumerFullscreen(consumer));
 		}
 	};
 };
diff --git a/app/resources/images/icon_fullscreen_black.svg b/app/resources/images/icon_fullscreen_black.svg
new file mode 100644
index 0000000..0a13c87
--- /dev/null
+++ b/app/resources/images/icon_fullscreen_black.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
+</svg>
diff --git a/app/resources/images/icon_fullscreen_exit_black.svg b/app/resources/images/icon_fullscreen_exit_black.svg
new file mode 100644
index 0000000..a5bab63
--- /dev/null
+++ b/app/resources/images/icon_fullscreen_exit_black.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
+</svg>
diff --git a/app/stylus/components/Me.styl b/app/stylus/components/Me.styl
index aefbd0d..91d9b8b 100644
--- a/app/stylus/components/Me.styl
+++ b/app/stylus/components/Me.styl
@@ -1,87 +1,123 @@
 [data-component='Me'] {
+	flex: 100 100 auto;
 	position: relative;
-	height: 100%;
-	width: 100%;
+	height: 15vmin;
+	width: 20vmin;
+	flex-direction: row;
+	display: flex;
 
-	> .controls {
-		position: absolute;
-		z-index: 10
-		top: 0;
-		left: 0;
-		right: 0;
-		display: flex;
-		flex-direction:; row;
-		justify-content: flex-end;
-		align-items: center;
-		padding: 0.4vmin;
+	> .view-container {
+		position: relative;
+		height: 100%;
+		width: 100%;
 
-		> .button {
-			flex: 0 0 auto;
-			margin: 0.2vmin;
-			border-radius: 2px;
-			background-position: center;
-			background-size: 75%;
-			background-repeat: no-repeat;
-			background-color: rgba(#000, 0.5);
-			cursor: pointer;
-			transition-property: opacity, background-color;
-			transition-duration: 0.15s;
+		&.webcam {
+			order: 2;
+		}
 
-			+desktop() {
-				width: 24px;
-				height: 24px;
-				opacity: 0.85;
+		&.screen {
+			order: 1;
+		}
 
-				&:hover {
-					opacity: 1;
-				}
-			}
+		> .controls {
+			position: absolute;
+			z-index: 10;
+			right: 0;
+			top: 0;
+			display: flex;
+			flex-direction:; row;
+			justify-content: flex-start;
+			align-items: center;
+			padding: 0.4vmin;
 
-			+mobile() {
-				width: 22px;
-				height: 22px;
-			}
+			> .button {
+				flex: 0 0 auto;
+				margin: 0.2vmin;
+				border-radius: 2px;
+				background-position: center;
+				background-size: 75%;
+				background-repeat: no-repeat;
+				background-color: rgba(#000, 0.5);
+				cursor: pointer;
+				transition-property: opacity, background-color;
+				transition-duration: 0.15s;
 
-			&.unsupported {
-				pointer-events: none;
-			}
+				+desktop() {
+					width: 24px;
+					height: 24px;
+					opacity: 0.85;
 
-			&.disabled {
-				pointer-events: none;
-				opacity: 0.5;
-			}
-
-			&.on {
-				background-color: rgba(#fff, 0.7);
-			}
-
-			&.mic {
-				&.on {
-					background-image: url('/resources/images/icon_mic_black_on.svg');
+					&:hover {
+						opacity: 1;
+					}
 				}
 
-				&.off {
-					background-image: url('/resources/images/icon_mic_white_off.svg');
-					background-color: rgba(#d42241, 0.7);
+				+mobile() {
+					width: 22px;
+					height: 22px;
 				}
 
 				&.unsupported {
-					background-image: url('/resources/images/icon_mic_white_unsupported.svg');
+					pointer-events: none;
+				}
+
+				&.disabled {
+					pointer-events: none;
+					opacity: 0.5;
 				}
-			}
 
-			&.webcam {
 				&.on {
-					background-image: url('/resources/images/icon_webcam_black_on.svg');
+					background-color: rgba(#fff, 0.7);
 				}
 
-				&.off {
-					background-image: url('/resources/images/icon_remote_webcam_white_off.svg');
-					background-color: rgba(#d42241, 0.7);
+				&.mic {
+					&.on {
+						background-image: url('/resources/images/icon_mic_black_on.svg');
+					}
+
+					&.off {
+						background-image: url('/resources/images/icon_remote_mic_white_off.svg');
+						background-color: rgba(#d42241, 0.7);
+					}
+
+					&.unsupported {
+						background-image: url('/resources/images/icon_mic_white_unsupported.svg');
+					}
 				}
 
-				&.unsupported {
-					background-image: url('/resources/images/icon_webcam_white_unsupported.svg');
+				&.webcam {
+					&.on {
+						background-image: url('/resources/images/icon_webcam_black_on.svg');
+					}
+
+					&.off {
+						background-image: url('/resources/images/icon_remote_webcam_white_off.svg');
+						background-color: rgba(#d42241, 0.7);
+					}
+
+					&.unsupported {
+						background-image: url('/resources/images/icon_webcam_white_unsupported.svg');
+					}
+				}
+
+				&.screen {
+					&.on {
+						background-image: url('/resources/images/share-screen-black.svg');
+					}
+
+					&.off {
+						background-image: url('/resources/images/no-share-screen-white.svg');
+						background-color: rgba(#d42241, 0.7);
+					}
+
+					&.unsupported {
+						background-image: url('/resources/images/no-share-screen-white.svg');
+					}
+				}
+
+				&.fullscreen {
+					background-image: url('/resources/images/icon_fullscreen_black.svg');
+					background-color: rgba(#fff, 0.7);
 				}
 			}
 		}
diff --git a/app/stylus/components/Peer.styl b/app/stylus/components/Peer.styl
index efeef3a..a95884e 100644
--- a/app/stylus/components/Peer.styl
+++ b/app/stylus/components/Peer.styl
@@ -13,89 +13,6 @@
 	&:not(.screen) {
 	}
 
-	> .controls {
-		position: absolute;
-		z-index: 10;
-		right: 0;
-		top: 0;
-		display: flex;
-		flex-direction:; row;
-		justify-content: flex-start;
-		align-items: center;
-		padding: 0.4vmin;
-
-		> .button {
-			flex: 0 0 auto;
-			margin: 0.2vmin;
-			border-radius: 2px;
-			background-position: center;
-			background-size: 75%;
-			background-repeat: no-repeat;
-			background-color: rgba(#000, 0.5);
-			cursor: pointer;
-			transition-property: opacity, background-color;
-			transition-duration: 0.15s;
-
-			+desktop() {
-				width: 24px;
-				height: 24px;
-				opacity: 0.85;
-
-				&:hover {
-					opacity: 1;
-				}
-			}
-
-			+mobile() {
-				width: 22px;
-				height: 22px;
-			}
-
-			&.unsupported {
-				pointer-events: none;
-			}
-
-			&.disabled {
-				pointer-events: none;
-				opacity: 0.5;
-			}
-
-			&.on {
-				background-color: rgba(#fff, 0.7);
-			}
-
-			&.mic {
-				&.on {
-					background-image: url('/resources/images/icon_mic_black_on.svg');
-				}
-
-				&.off {
-					background-image: url('/resources/images/icon_remote_mic_white_off.svg');
-					background-color: rgba(#d42241, 0.7);
-				}
-
-				&.unsupported {
-					background-image: url('/resources/images/icon_mic_white_unsupported.svg');
-				}
-			}
-
-			&.webcam {
-				&.on {
-					background-image: url('/resources/images/icon_webcam_black_on.svg');
-				}
-
-				&.off {
-					background-image: url('/resources/images/icon_remote_webcam_white_off.svg');
-					background-color: rgba(#d42241, 0.7);
-				}
-
-				&.unsupported {
-					background-image: url('/resources/images/icon_webcam_white_unsupported.svg');
-				}
-			}
-		}
-	}
-
 	+mobile() {
 		display: flex;
 		flex-direction: column;
@@ -104,6 +21,8 @@
 	}
 
 	> .view-container {
+		position: relative;
+
 		&.webcam {
 			order: 2;
 		}
@@ -111,6 +30,109 @@
 		&.screen {
 			order: 1;
 		}
+
+		> .controls {
+			position: absolute;
+			z-index: 10;
+			right: 0;
+			top: 0;
+			display: flex;
+			flex-direction:; row;
+			justify-content: flex-start;
+			align-items: center;
+			padding: 0.4vmin;
+
+			> .button {
+				flex: 0 0 auto;
+				margin: 0.2vmin;
+				border-radius: 2px;
+				background-position: center;
+				background-size: 75%;
+				background-repeat: no-repeat;
+				background-color: rgba(#000, 0.5);
+				cursor: pointer;
+				transition-property: opacity, background-color;
+				transition-duration: 0.15s;
+
+				+desktop() {
+					width: 24px;
+					height: 24px;
+					opacity: 0.85;
+
+					&:hover {
+						opacity: 1;
+					}
+				}
+
+				+mobile() {
+					width: 22px;
+					height: 22px;
+				}
+
+				&.unsupported {
+					pointer-events: none;
+				}
+
+				&.disabled {
+					pointer-events: none;
+					opacity: 0.5;
+				}
+
+				&.on {
+					background-color: rgba(#fff, 0.7);
+				}
+
+				&.mic {
+					&.on {
+						background-image: url('/resources/images/icon_mic_black_on.svg');
+					}
+
+					&.off {
+						background-image: url('/resources/images/icon_remote_mic_white_off.svg');
+						background-color: rgba(#d42241, 0.7);
+					}
+
+					&.unsupported {
+						background-image: url('/resources/images/icon_mic_white_unsupported.svg');
+					}
+				}
+
+				&.webcam {
+					&.on {
+						background-image: url('/resources/images/icon_webcam_black_on.svg');
+					}
+
+					&.off {
+						background-image: url('/resources/images/icon_remote_webcam_white_off.svg');
+						background-color: rgba(#d42241, 0.7);
+					}
+
+					&.unsupported {
+						background-image: url('/resources/images/icon_webcam_white_unsupported.svg');
+					}
+				}
+
+				&.screen {
+					&.on {
+						background-image: url('/resources/images/share-screen-black.svg');
+					}
+
+					&.off {
+						background-image: url('/resources/images/no-share-screen-white.svg');
+						background-color: rgba(#d42241, 0.7);
+					}
+
+					&.unsupported {
+						background-image: url('/resources/images/no-share-screen-white.svg');
+					}
+				}
+
+				&.fullscreen {
+					background-image: url('/resources/images/icon_fullscreen_black.svg');
+					background-color: rgba(#fff, 0.7);
+				}
+			}
+		}
 	}
 
 	.incompatible-video {
diff --git a/app/stylus/components/Room.styl b/app/stylus/components/Room.styl
index aa62aa0..e766650 100644
--- a/app/stylus/components/Room.styl
+++ b/app/stylus/components/Room.styl
@@ -153,8 +153,6 @@
 			}
 
 			+desktop() {
-				height: 200px;
-				width: 235px;
 				bottom: 20px;
 				left: 20px;
 				border: 1px solid rgba(#fff, 0.15);

From 3b03b24cc4480ca9450e10c6f25d05df09b391c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Fri, 22 Jun 2018 11:45:02 +0200
Subject: [PATCH 2/2] Working fullscreen view

---
 app/lib/components/FullScreenView.jsx     |  91 +++++++++++++++++++
 app/lib/components/FullView.jsx           |   2 +-
 app/lib/components/Me.jsx                 |   6 --
 app/lib/components/Peer.jsx               |   3 +-
 app/lib/components/Peers.jsx              |  13 +--
 app/lib/components/Room.jsx               |   2 +
 app/lib/redux/reducers/room.js            |  19 ++--
 app/lib/redux/stateActions.js             |   8 ++
 app/stylus/components/Chat.styl           |   2 +-
 app/stylus/components/FullScreenView.styl |  75 ++++++++++++++++
 app/stylus/components/FullView.styl       | 105 ++++++++++++++++++++++
 app/stylus/components/Me.styl             |   6 +-
 app/stylus/index.styl                     |   2 +
 13 files changed, 311 insertions(+), 23 deletions(-)
 create mode 100644 app/lib/components/FullScreenView.jsx
 create mode 100644 app/stylus/components/FullScreenView.styl
 create mode 100644 app/stylus/components/FullView.styl

diff --git a/app/lib/components/FullScreenView.jsx b/app/lib/components/FullScreenView.jsx
new file mode 100644
index 0000000..6192eee
--- /dev/null
+++ b/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;
diff --git a/app/lib/components/FullView.jsx b/app/lib/components/FullView.jsx
index fec212c..3edc64a 100644
--- a/app/lib/components/FullView.jsx
+++ b/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({
diff --git a/app/lib/components/Me.jsx b/app/lib/components/Me.jsx
index 4fc985d..99bb31a 100644
--- a/app/lib/components/Me.jsx
+++ b/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 ?
diff --git a/app/lib/components/Peer.jsx b/app/lib/components/Peer.jsx
index e28dab9..6ad97f1 100644
--- a/app/lib/components/Peer.jsx
+++ b/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));
 		}
 	};
 };
diff --git a/app/lib/components/Peers.jsx b/app/lib/components/Peers.jsx
index 6d93b12..1dfd94e 100644
--- a/app/lib/components/Peers.jsx
+++ b/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
 	};
 };
 
diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx
index 8ae0258..64349e3 100644
--- a/app/lib/components/Room.jsx
+++ b/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={{
diff --git a/app/lib/redux/reducers/room.js b/app/lib/redux/reducers/room.js
index 0ae277b..c2552bd 100644
--- a/app/lib/redux/reducers/room.js
+++ b/app/lib/redux/reducers/room.js
@@ -1,10 +1,11 @@
 const initialState =
 {
-	url               : null,
-	state             : 'new', // new/connecting/connected/disconnected/closed,
-	activeSpeakerName : null,
-	showSettings      : false,
-	advancedMode      : false
+	url                : null,
+	state              : 'new', // new/connecting/connected/disconnected/closed,
+	activeSpeakerName  : null,
+	showSettings       : false,
+	advancedMode       : false,
+	fullScreenConsumer : null // ConsumerID
 };
 
 const room = (state = initialState, action) =>
@@ -49,6 +50,14 @@ const room = (state = initialState, action) =>
 			return { ...state, advancedMode };
 		}
 
+		case 'TOGGLE_FULLSCREEN_CONSUMER':
+		{
+			const { consumerId } = action.payload;
+			const currentConsumer = state.fullScreenConsumer;
+
+			return { ...state, fullScreenConsumer: currentConsumer ? null : consumerId };
+		}
+
 		default:
 			return state;
 	}
diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js
index 4db655b..86adba5 100644
--- a/app/lib/redux/stateActions.js
+++ b/app/lib/redux/stateActions.js
@@ -361,6 +361,14 @@ export const toggleChat = () =>
 	};
 };
 
+export const toggleConsumerFullscreen = (consumerId) =>
+{
+	return {
+		type    : 'TOGGLE_FULLSCREEN_CONSUMER',
+		payload : { consumerId }
+	};
+};
+
 export const increaseBadge = () =>
 {
 	return {
diff --git a/app/stylus/components/Chat.styl b/app/stylus/components/Chat.styl
index 6399832..6cfe785 100644
--- a/app/stylus/components/Chat.styl
+++ b/app/stylus/components/Chat.styl
@@ -7,7 +7,7 @@
 	max-width: 300px;
 	right: 0;
 	width: 90vw;
-	z-index: 9999;
+	z-index: 100;
 
 	> .launcher {
 		align-self: flex-end;
diff --git a/app/stylus/components/FullScreenView.styl b/app/stylus/components/FullScreenView.styl
new file mode 100644
index 0000000..1338c5d
--- /dev/null
+++ b/app/stylus/components/FullScreenView.styl
@@ -0,0 +1,75 @@
+[data-component='FullScreenView'] {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	z-index: 200;
+
+	> .controls {
+		position: absolute;
+		z-index: 201;
+		right: 0;
+		top: 0;
+		display: flex;
+		flex-direction:; row;
+		justify-content: flex-start;
+		align-items: center;
+		padding: 0.4vmin;
+
+		> .button {
+			flex: 0 0 auto;
+			margin: 0.2vmin;
+			border-radius: 2px;
+			background-position: center;
+			background-size: 75%;
+			background-repeat: no-repeat;
+			background-color: rgba(#000, 0.5);
+			cursor: pointer;
+			transition-property: opacity, background-color;
+			transition-duration: 0.15s;
+
+			+desktop() {
+				width: 5vmin;
+				height: 5vmin;
+				opacity: 0.85;
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+
+			+mobile() {
+				width: 5vmin;
+				height: 5vmin;
+			}
+
+			&.fullscreen {
+				background-image: url('/resources/images/icon_fullscreen_exit_black.svg');
+				background-color: rgba(#fff, 0.7);
+			}
+		}
+	}
+
+	.incompatible-video {
+		position: absolute;
+		z-index: 2
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		> p {
+			padding: 6px 12px;
+			border-radius: 6px;
+			user-select: none;
+			pointer-events: none;
+			font-size: 15px;
+			color: rgba(#fff, 0.55);
+		}
+	}
+}
diff --git a/app/stylus/components/FullView.styl b/app/stylus/components/FullView.styl
new file mode 100644
index 0000000..ff3f3e2
--- /dev/null
+++ b/app/stylus/components/FullView.styl
@@ -0,0 +1,105 @@
+[data-component='FullView'] {
+	position: relative;
+	flex: 100 100 auto;
+	height: 100%;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	background-color: rgba(#2a4b58, 0.9);
+	background-image: url('/resources/images/buddy.svg');
+	background-position: bottom;
+	background-size: auto 85%;
+	background-repeat: no-repeat;
+
+	> .info {
+		$backgroundTint = #000;
+
+		position: absolute;
+		z-index: 5
+		top: 0.6vmin;
+		left: 0.6vmin;
+		bottom: 0;
+		right: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		> .media {
+			flex: 0 0 auto;
+			display: flex;
+			flex-direction: row;
+
+			> .box {
+				padding: 0.4vmin;
+				border-radius: 2px;
+				background-color: rgba(#000, 0.25);
+
+				> p {
+					user-select: none;
+					pointer-events: none;
+					margin-bottom: 2px;
+					color: rgba(#fff, 0.7);
+					font-size: 10px;
+
+					&:last-child {
+						margin-bottom: 0;
+					}
+				}
+			}
+		}
+	}
+
+	> video {
+		flex: 100 100 auto;
+		height: 100%;
+		width: 100%;
+		object-fit: contain;
+		user-select: none;
+		transition-property: opacity;
+		transition-duration: .15s;
+		background-color: rgba(#000, 0.75);
+
+		&.hidden {
+			opacity: 0;
+			transition-duration: 0s;
+		}
+
+		&.loading {
+			filter: blur(5px);
+		}
+	}
+
+	> .spinner-container {
+		position: absolute;
+		top: 0
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: rgba(#000, 0.75);
+
+		.react-spinner {
+			position: relative;
+			width: 48px;
+			height: 48px;
+			top: 50%;
+			left: 50%;
+
+			.react-spinner_bar {
+				position: absolute;
+				width: 20%;
+				height: 7.8%;
+				top: -3.9%;
+				left: -10%;
+				animation: PeerView-spinner 1.2s linear infinite;
+				border-radius: 5px;
+				background-color: rgba(#fff, 0.5);
+			}
+		}
+	}
+}
+
+@keyframes FullView-spinner {
+	0% { opacity: 1; }
+	100% { opacity: 0.15; }
+}
diff --git a/app/stylus/components/Me.styl b/app/stylus/components/Me.styl
index 91d9b8b..f1095a9 100644
--- a/app/stylus/components/Me.styl
+++ b/app/stylus/components/Me.styl
@@ -1,15 +1,13 @@
 [data-component='Me'] {
 	flex: 100 100 auto;
 	position: relative;
-	height: 15vmin;
-	width: 20vmin;
 	flex-direction: row;
 	display: flex;
 
 	> .view-container {
 		position: relative;
-		height: 100%;
-		width: 100%;
+		width: 20vmin;
+		height: 15vmin;
 
 		&.webcam {
 			order: 2;
diff --git a/app/stylus/index.styl b/app/stylus/index.styl
index b70a957..84f4e42 100644
--- a/app/stylus/index.styl
+++ b/app/stylus/index.styl
@@ -46,6 +46,8 @@ body {
 	@import './components/Settings';
 	@import './components/ToolArea';
 	@import './components/ParticipantList';
+	@import './components/FullScreenView';
+	@import './components/FullView';
 }
 
 // Hack to detect in JS the current media query