Hide toolbars after 10 seconds

app/lib/components/Room.jsx

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import ClipboardButton from 'react-clipboard.js';
 import * as appPropTypes from './appPropTypes';
 import * as requestActions from '../redux/requestActions';
+import * as stateActions from '../redux/stateActions';
 import { Appear } from './transitions';
 import Me from './Me';
 import Peers from './Peers';
@@ -15,20 +16,61 @@ import ToolArea from './ToolArea/ToolArea';
 import FullScreenView from './FullScreenView';
 import Draggable from 'react-draggable';
 
+// Hide toolbars after 10 seconds of inactivity.
+const TIMEOUT = 10 * 1000;
+
+/**
+ * Create a function which will call the callback function
+ * after the given amount of milliseconds has passed since
+ * the last time the callback function was called.
+ */
+const idle = (callback, delay) => 
+{
+	let handle;
+
+	return () => 
+	{
+		if (handle) 
+		{
+			clearTimeout(handle);
+		}
+
+		handle = setTimeout(callback, delay);
+	};
+};
+
 class Room extends React.Component
 {
-	handleMouseMove = () => {
-		
+	/**
+	 * Hides the different toolbars on the page after a
+	 * given amount of time has passed since the
+	 * last time the cursor was moved.
+	 */
+	waitForHide = idle(() => 
+	{
+		this.props.setToolbarsVisible(false);
+	}, TIMEOUT);
+
+	handleMouseMove = () => 
+	{
+		// If the toolbars were hidden, show them again when
+		// the user moves their cursor.
+		if (!this.props.room.toolbarsVisible) 
+		{
+			this.props.setToolbarsVisible(true);
+		}
+
+		this.waitForHide();
 	}
 
 	componentDidMount()
 	{
-
+		window.addEventListener('mousemove', this.handleMouseMove);
 	}
 
 	componentWillUnmount()
 	{
-
+		window.removeEventListener('mousemove', this.handleMouseMove);
 	}
 
 	render()
@@ -91,8 +133,12 @@ class Room extends React.Component
 							</div>
 							:null
 						}
-
-						<div className='room-link-wrapper'>
+									
+						<div
+							className={classnames('room-link-wrapper room-controls', {
+								'visible' : this.props.room.toolbarsVisible
+							})}
+						>
 							<div className='room-link'>
 								<ClipboardButton
 									component='a'
@@ -139,7 +185,10 @@ class Room extends React.Component
 							</div>
 						</Draggable>
 
-						<div className='sidebar'>
+						<div className={classnames('sidebar room-controls', {
+							'visible' : this.props.room.toolbarsVisible
+						})}
+						>
 							<div
 								className={classnames('button', 'screen', screenState)}
 								data-tip={screenTip}
@@ -218,17 +267,18 @@ class Room extends React.Component
 
 Room.propTypes =
 {
-	room            : appPropTypes.Room.isRequired,
-	me              : appPropTypes.Me.isRequired,
-	amActiveSpeaker : PropTypes.bool.isRequired,
-	toolAreaOpen    : PropTypes.bool.isRequired,
-	screenProducer  : appPropTypes.Producer,
-	onRoomLinkCopy  : PropTypes.func.isRequired,
-	onShareScreen   : PropTypes.func.isRequired,
-	onUnShareScreen : PropTypes.func.isRequired,
-	onNeedExtension : PropTypes.func.isRequired,
-	onLeaveMeeting  : PropTypes.func.isRequired,
-	onLogin         : PropTypes.func.isRequired
+	room               : appPropTypes.Room.isRequired,
+	me                 : appPropTypes.Me.isRequired,
+	amActiveSpeaker    : PropTypes.bool.isRequired,
+	toolAreaOpen       : PropTypes.bool.isRequired,
+	screenProducer     : appPropTypes.Producer,
+	onRoomLinkCopy     : PropTypes.func.isRequired,
+	onShareScreen      : PropTypes.func.isRequired,
+	onUnShareScreen    : PropTypes.func.isRequired,
+	onNeedExtension    : PropTypes.func.isRequired,
+	onLeaveMeeting     : PropTypes.func.isRequired,
+	onLogin            : PropTypes.func.isRequired,
+	setToolbarsVisible : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) =>
@@ -275,6 +325,10 @@ const mapDispatchToProps = (dispatch) =>
 		onLogin : () =>
 		{
 			dispatch(requestActions.userLogin());
+		},
+		setToolbarsVisible : (visible) =>
+		{
+			dispatch(stateActions.setToolbarsVisible(visible));
 		}
 	};
 };

app/lib/components/ToolArea/ToolAreaButton.jsx

@@ -17,8 +17,9 @@ class ToolAreaButton extends React.Component
 		return (
 			<div data-component='ToolAreaButton'>
 				<div
-					className={classnames('button', 'toolarea-button', {
-						on : toolAreaOpen
+					className={classnames('button toolarea-button room-controls', {
+						on      : toolAreaOpen,
+						visible : this.props.visible
 					})}
 					data-tip='Toggle tool area'
 					data-type='dark'
@@ -40,13 +41,15 @@ ToolAreaButton.propTypes =
 {
 	toolAreaOpen   : PropTypes.bool.isRequired,
 	toggleToolArea : PropTypes.func.isRequired,
-	unread         : PropTypes.bool.isRequired
+	unread         : PropTypes.bool.isRequired,
+	visible        : PropTypes.bool.isRequired
 };
 
 const mapStateToProps = (state) =>
 {
 	return {
 		toolAreaOpen : state.toolarea.toolAreaOpen,
+		visible      : state.room.toolbarsVisible,
 		unread       : state.toolarea.unread
 	};
 };

app/lib/redux/reducers/room.js

@@ -5,7 +5,8 @@ const initialState =
 	activeSpeakerName  : null,
 	showSettings       : false,
 	advancedMode       : false,
-	fullScreenConsumer : null // ConsumerID
+	fullScreenConsumer : null, // ConsumerID
+	toolbarsVisible    : true
 };
 
 const room = (state = initialState, action) =>
@@ -58,6 +59,12 @@ const room = (state = initialState, action) =>
 			return { ...state, fullScreenConsumer: currentConsumer ? null : consumerId };
 		}
 
+		case 'SET_TOOLBARS_VISIBLE':
+		{
+			const { toolbarsVisible } = action.payload;
+
+			return { ...state, toolbarsVisible };
+		}
 		default:
 			return state;
 	}

app/lib/redux/stateActions.js

@@ -369,6 +369,11 @@ export const toggleConsumerFullscreen = (consumerId) =>
 	};
 };
 
+export const setToolbarsVisible = (toolbarsVisible) => ({
+	type    : 'SET_TOOLBARS_VISIBLE',
+	payload : { toolbarsVisible }
+});
+
 export const increaseBadge = () =>
 {
 	return {