Only show Peer controls when hovering

app/lib/components/Peer.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -8,8 +8,28 @@ import * as stateActions from '../redux/stateActions';
 import PeerView from './PeerView';
 import ScreenView from './ScreenView';
 
-const Peer = (props) =>
+class Peer extends Component 
 {
+	state = {
+		controlsVisible : false
+	};
+
+	handleMouseOver = () => 
+	{
+		this.setState({
+			controlsVisible : true
+		});
+	};
+
+	handleMouseOut = () => 
+	{
+		this.setState({
+			controlsVisible : false
+		});
+	};
+
+	render() 
+	{
 		const {
 			advancedMode,
 			peer,
@@ -24,7 +44,7 @@ const Peer = (props) =>
 			onEnableScreen,
 			toggleConsumerFullscreen,
 			style
-	} = props;
+		} = this.props;
 	
 		const micEnabled = (
 			Boolean(micConsumer) &&
@@ -60,6 +80,8 @@ const Peer = (props) =>
 				className={classnames({
 					screen : screenConsumer
 				})}
+				onMouseOver={this.handleMouseOver}
+				onMouseOut={this.handleMouseOut}
 			>
 				{videoVisible && !webcamConsumer.supported ?
 					<div className='incompatible-video'>
@@ -69,7 +91,11 @@ const Peer = (props) =>
 				}
 	
 				<div className={classnames('view-container', 'webcam')} style={style}>
-				<div className='controls'>
+					<div
+						className={classnames('controls', {
+							visible : this.state.controlsVisible
+						})}
+					>
 						<div
 							className={classnames('button', 'mic', {
 								on       : micEnabled,
@@ -156,7 +182,8 @@ const Peer = (props) =>
 				}
 			</div>
 		);
-};
+	}
+}
 
 Peer.propTypes =
 {

app/lib/components/Room.jsx

@@ -15,30 +15,11 @@ import ToolAreaButton from './ToolArea/ToolAreaButton';
 import ToolArea from './ToolArea/ToolArea';
 import FullScreenView from './FullScreenView';
 import Draggable from 'react-draggable';
+import { idle } from '../utils';
 
 // 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
 {
 	/**

app/lib/utils.js

@@ -43,3 +43,23 @@ export function getBrowserType()
 
 	return 'N/A';
 }
+
+/**
+ * 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.
+ */
+export const idle = (callback, delay) => 
+{
+	let handle;
+
+	return () => 
+	{
+		if (handle) 
+		{
+			clearTimeout(handle);
+		}
+
+		handle = setTimeout(callback, delay);
+	};
+};

app/stylus/components/Peer.styl

@@ -41,6 +41,15 @@
 			justify-content: flex-start;
 			align-items: center;
 			padding: 0.4vmin;
+			visibility: hidden;
+			opacity: 0;
+			animation: fade-out 0.3s;
+
+			&.visible {
+				visibility: visible;
+				opacity: 1;
+				animation: fade-in 0.3s;
+			}
 			
 			> .button {
 				flex: 0 0 auto;

app/stylus/components/Room.styl

@@ -440,27 +440,3 @@
 @keyframes Room-info-state-connecting {
 	50% { background-color: rgba(orange, 0.75); }
 }
-
-@keyframes fade-in {
-	from {
-		opacity: 0;
-		visibility: hidden;
-	}
-
-	to {
-		opacity: 1;
-		visibility: visible;
-	}
-}
-
-@keyframes fade-out {
-	from {
-		opacity: 1;
-		visibility: visible;
-	}
-
-	to {
-		opacity: 0;
-		visibility: hidden;
-	}
-}

app/stylus/index.styl

@@ -5,6 +5,7 @@ global-reset();
 @import './mixins';
 @import './fonts';
 @import './reset';
+@import './keyframes';
 
 html {
 	height: 100%;

app/stylus/keyframes.styl

@@ -0,0 +1,23 @@
+@keyframes fade-in {
+	from {
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	to {
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+@keyframes fade-out {
+	from {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	to {
+		opacity: 0;
+		visibility: hidden;
+	}
+}