Add global fullscreen toggle button

app/lib/components/Sidebar.jsx

@@ -1,96 +1,147 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import * as appPropTypes from './appPropTypes';
 import * as requestActions from '../redux/requestActions';
+import fscreen from 'fscreen';
 
-const Sidebar = ({
+class Sidebar extends Component
-	toolbarsVisible, me, screenProducer, onLogin, onShareScreen,
-	onUnShareScreen, onNeedExtension, onLeaveMeeting
-}) =>
 {
-	let screenState;
+	state = {
-	let screenTip;
+		fullscreen: false
+	};
 
-	if (me.needExtension)
+	handleToggleFullscreen = () =>
 	{
-		screenState = 'need-extension';
+		if (fscreen.fullscreenElement) {
-		screenTip = 'Install screen sharing extension';
+			fscreen.exitFullscreen();
-	}
+		} else {
-	else if (!me.canShareScreen)
+			fscreen.requestFullscreen(document.documentElement);
+		}
+	};
+
+	handleFullscreenChange = () => {
+		this.setState({
+			fullscreen: fscreen.fullscreenElement !== null
+		})
+	};
+
+	componentDidMount()
 	{
-		screenState = 'unsupported';
+		if (fscreen.fullscreenEnabled)
-		screenTip = 'Screen sharing not supported';
+		{
-	}
+			fscreen.addEventListener('fullscreenchange', this.handleFullscreenChange);
-	else if (screenProducer)
+		}
-	{
-		screenState = 'on';
-		screenTip = 'Stop screen sharing';
-	}
-	else
-	{
-		screenState = 'off';
-		screenTip = 'Start screen sharing';
 	}
 
-	return (
+	componentWillUnmount()
-		<div className={classnames('sidebar room-controls', {
+	{
-			'visible' : toolbarsVisible
+		if (fscreen.fullscreenEnabled)
-		})}
+		{
-		>
+			fscreen.removeEventListener('fullscreenchange', this.handleFullscreenChange);
-			<div
+		}
-				className={classnames('button', 'screen', screenState)}
+	}
-				data-tip={screenTip}
+
-				data-type='dark'
+	render() {
-				onClick={() =>
+		const {
-				{
+			toolbarsVisible, me, screenProducer, onLogin, onShareScreen,
-					switch (screenState)
+			onUnShareScreen, onNeedExtension, onLeaveMeeting
-					{
+		} = this.props;
-						case 'on':
+
-						{
+		let screenState;
-							onUnShareScreen();
+		let screenTip;
-							break;
+	
-						}
+		if (me.needExtension)
-						case 'off':
+		{
-						{
+			screenState = 'need-extension';
-							onShareScreen();
+			screenTip = 'Install screen sharing extension';
-							break;
+		}
-						}
+		else if (!me.canShareScreen)
-						case 'need-extension':
+		{
-						{
+			screenState = 'unsupported';
-							onNeedExtension();
+			screenTip = 'Screen sharing not supported';
-							break;
+		}
-						}
+		else if (screenProducer)
-						default:
+		{
-						{
+			screenState = 'on';
-							break;
+			screenTip = 'Stop screen sharing';
-						}
+		}
-					}
+		else
-				}}
+		{
-			/>
+			screenState = 'off';
+			screenTip = 'Start screen sharing';
+		}
+	
+		return (
+			<div className={classnames('sidebar room-controls', {
+				'visible' : toolbarsVisible
+			})}
+			>
+				{fscreen.fullscreenEnabled && (
+					<div
+						className={classnames('button', 'fullscreen', {
+							on: this.state.fullscreen
+						})}
+						onClick={this.handleToggleFullscreen}
+						data-tip='Fullscreen'
+						data-type='dark'
+					/>
+				)}
 
-			{me.loginEnabled ?
 				<div
-					className={classnames('button', 'login', 'off', {
+					className={classnames('button', 'screen', screenState)}
-						disabled : me.loginInProgress
+					data-tip={screenTip}
-					})}
-					data-tip='Login'
 					data-type='dark'
-					onClick={() => onLogin()}
+					onClick={() =>
+					{
+						switch (screenState)
+						{
+							case 'on':
+							{
+								onUnShareScreen();
+								break;
+							}
+							case 'off':
+							{
+								onShareScreen();
+								break;
+							}
+							case 'need-extension':
+							{
+								onNeedExtension();
+								break;
+							}
+							default:
+							{
+								break;
+							}
+						}
+					}}
 				/>
-				:null
+	
-			}
+				{me.loginEnabled ?
-
+					<div
-			<div
+						className={classnames('button', 'login', 'off', {
-				className={classnames('button', 'leave-meeting')}
+							disabled : me.loginInProgress
-				data-tip='Leave meeting'
+						})}
-				data-type='dark'
+						data-tip='Login'
-				onClick={() => onLeaveMeeting()}
+						data-type='dark'
-			/>
+						onClick={() => onLogin()}
-		</div>
+					/>
-	);
+					:null
-};
+				}
+	
+				<div
+					className={classnames('button', 'leave-meeting')}
+					data-tip='Leave meeting'
+					data-type='dark'
+					onClick={() => onLeaveMeeting()}
+				/>
+			</div>
+		);
+	}
+}
 
 Sidebar.propTypes = {
 	toolbarsVisible : PropTypes.bool.isRequired,

app/resources/images/icon_fullscreen_exit_white.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#FFF">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
+</svg>

app/resources/images/icon_fullscreen_white.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#FFF">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+</svg>

app/stylus/components/Room.styl

@@ -232,6 +232,14 @@
 					}
 				}
 
+				&.fullscreen {
+					background-image: url('/resources/images/icon_fullscreen_white.svg');
+
+					&.on {
+						background-image: url('/resources/images/icon_fullscreen_exit_white.svg');
+					}
+				}
+
 				&.screen {
 					&.on {
 						background-image: url('/resources/images/no-share-screen-black.svg');
@@ -250,6 +258,7 @@
 						background-image: url('/resources/images/share-screen-extension.svg');
 					}
 				}
+
 				&.raise-hand {
 					background-image: url('/resources/images/icon-hand-white.svg');