Add global fullscreen toggle button

app/lib/components/Sidebar.jsx

@@ -1,15 +1,54 @@
-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
+{
+	state = {
+		fullscreen: false
+	};
+
+	handleToggleFullscreen = () =>
+	{
+		if (fscreen.fullscreenElement) {
+			fscreen.exitFullscreen();
+		} else {
+			fscreen.requestFullscreen(document.documentElement);
+		}
+	};
+
+	handleFullscreenChange = () => {
+		this.setState({
+			fullscreen: fscreen.fullscreenElement !== null
+		})
+	};
+
+	componentDidMount()
+	{
+		if (fscreen.fullscreenEnabled)
+		{
+			fscreen.addEventListener('fullscreenchange', this.handleFullscreenChange);
+		}
+	}
+
+	componentWillUnmount()
+	{
+		if (fscreen.fullscreenEnabled)
+		{
+			fscreen.removeEventListener('fullscreenchange', this.handleFullscreenChange);
+		}
+	}
+
+	render() {
+		const {
 			toolbarsVisible, me, screenProducer, onLogin, onShareScreen,
 			onUnShareScreen, onNeedExtension, onLeaveMeeting
-}) =>
-{
+		} = this.props;
+
 		let screenState;
 		let screenTip;
 	
@@ -39,6 +78,17 @@ const Sidebar = ({
 				'visible' : toolbarsVisible
 			})}
 			>
+				{fscreen.fullscreenEnabled && (
+					<div
+						className={classnames('button', 'fullscreen', {
+							on: this.state.fullscreen
+						})}
+						onClick={this.handleToggleFullscreen}
+						data-tip='Fullscreen'
+						data-type='dark'
+					/>
+				)}
+
 				<div
 					className={classnames('button', 'screen', screenState)}
 					data-tip={screenTip}
@@ -90,7 +140,8 @@ const Sidebar = ({
 				/>
 			</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');