From 55c1506281ce24b2bd5f9829d93ddbaac6cb10ce Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Mon, 16 Jul 2018 12:56:50 +0200
Subject: [PATCH] Only show Peer controls when hovering

---
 app/lib/components/Peer.jsx     | 279 +++++++++++++++++---------------
 app/lib/components/Room.jsx     |  21 +--
 app/lib/utils.js                |  20 +++
 app/stylus/components/Peer.styl |   9 ++
 app/stylus/components/Room.styl |  24 ---
 app/stylus/index.styl           |   1 +
 app/stylus/keyframes.styl       |  23 +++
 7 files changed, 207 insertions(+), 170 deletions(-)
 create mode 100644 app/stylus/keyframes.styl

diff --git a/app/lib/components/Peer.jsx b/app/lib/components/Peer.jsx
index 6ad97f1..d3961ae 100644
--- a/app/lib/components/Peer.jsx
+++ b/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,155 +8,182 @@ import * as stateActions from '../redux/stateActions';
 import PeerView from './PeerView';
 import ScreenView from './ScreenView';
 
-const Peer = (props) =>
+class Peer extends Component 
 {
-	const {
-		advancedMode,
-		peer,
-		micConsumer,
-		webcamConsumer,
-		screenConsumer,
-		onMuteMic,
-		onUnmuteMic,
-		onDisableWebcam,
-		onEnableWebcam,
-		onDisableScreen,
-		onEnableScreen,
-		toggleConsumerFullscreen,
-		style
-	} = props;
+	state = {
+		controlsVisible : false
+	};
 
-	const micEnabled = (
-		Boolean(micConsumer) &&
-		!micConsumer.locallyPaused &&
-		!micConsumer.remotelyPaused
-	);
+	handleMouseOver = () => 
+	{
+		this.setState({
+			controlsVisible : true
+		});
+	};
 
-	const videoVisible = (
-		Boolean(webcamConsumer) &&
-		!webcamConsumer.locallyPaused &&
-		!webcamConsumer.remotelyPaused
-	);
+	handleMouseOut = () => 
+	{
+		this.setState({
+			controlsVisible : false
+		});
+	};
 
-	const screenVisible = (
-		Boolean(screenConsumer) &&
-		!screenConsumer.locallyPaused &&
-		!screenConsumer.remotelyPaused
-	);
-
-	let videoProfile;
-
-	if (webcamConsumer)
-		videoProfile = webcamConsumer.profile;
-
-	let screenProfile;
-
-	if (screenConsumer)
-		screenProfile = screenConsumer.profile;
-
-	return (
-		<div
-			data-component='Peer'
-			className={classnames({
-				screen : screenConsumer
-			})}
-		>
-			{videoVisible && !webcamConsumer.supported ?
-				<div className='incompatible-video'>
-					<p>incompatible video</p>
-				</div>
-				:null
-			}
-
-			<div className={classnames('view-container', 'webcam')} style={style}>
-				<div className='controls'>
+	render() 
+	{
+		const {
+			advancedMode,
+			peer,
+			micConsumer,
+			webcamConsumer,
+			screenConsumer,
+			onMuteMic,
+			onUnmuteMic,
+			onDisableWebcam,
+			onEnableWebcam,
+			onDisableScreen,
+			onEnableScreen,
+			toggleConsumerFullscreen,
+			style
+		} = this.props;
+	
+		const micEnabled = (
+			Boolean(micConsumer) &&
+			!micConsumer.locallyPaused &&
+			!micConsumer.remotelyPaused
+		);
+	
+		const videoVisible = (
+			Boolean(webcamConsumer) &&
+			!webcamConsumer.locallyPaused &&
+			!webcamConsumer.remotelyPaused
+		);
+	
+		const screenVisible = (
+			Boolean(screenConsumer) &&
+			!screenConsumer.locallyPaused &&
+			!screenConsumer.remotelyPaused
+		);
+	
+		let videoProfile;
+	
+		if (webcamConsumer)
+			videoProfile = webcamConsumer.profile;
+	
+		let screenProfile;
+	
+		if (screenConsumer)
+			screenProfile = screenConsumer.profile;
+	
+		return (
+			<div
+				data-component='Peer'
+				className={classnames({
+					screen : screenConsumer
+				})}
+				onMouseOver={this.handleMouseOver}
+				onMouseOut={this.handleMouseOut}
+			>
+				{videoVisible && !webcamConsumer.supported ?
+					<div className='incompatible-video'>
+						<p>incompatible video</p>
+					</div>
+					:null
+				}
+	
+				<div className={classnames('view-container', 'webcam')} style={style}>
 					<div
-						className={classnames('button', 'mic', {
-							on       : micEnabled,
-							off      : !micEnabled,
-							disabled : peer.peerAudioInProgress
+						className={classnames('controls', {
+							visible : this.state.controlsVisible
 						})}
-						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}
-					audioTrack={micConsumer ? micConsumer.track : null}
-					videoTrack={webcamConsumer ? webcamConsumer.track : null}
-					videoVisible={videoVisible}
-					videoProfile={videoProfile}
-					audioCodec={micConsumer ? micConsumer.codec : null}
-					videoCodec={webcamConsumer ? webcamConsumer.codec : null}
-				/>
-			</div>
-
-			{screenConsumer ?
-				<div className={classnames('view-container', 'screen')} style={style}>
-					<div className='controls'>
+					>
 						<div
-							className={classnames('button', 'screen', {
-								on       : screenVisible,
-								off      : !screenVisible,
-								disabled : peer.peerScreenInProgress
+							className={classnames('button', 'mic', {
+								on       : micEnabled,
+								off      : !micEnabled,
+								disabled : peer.peerAudioInProgress
 							})}
 							onClick={(e) =>
 							{
 								e.stopPropagation();
-								screenVisible ?
-									onDisableScreen(peer.name) : onEnableScreen(peer.name);
+								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(screenConsumer);
+								toggleConsumerFullscreen(webcamConsumer);
 							}}
 						/>
 					</div>
-					<ScreenView
+					<PeerView
 						advancedMode={advancedMode}
-						screenTrack={screenConsumer ? screenConsumer.track : null}
-						screenVisible={screenVisible}
-						screenProfile={screenProfile}
-						screenCodec={screenConsumer ? screenConsumer.codec : null}
+						peer={peer}
+						audioTrack={micConsumer ? micConsumer.track : null}
+						videoTrack={webcamConsumer ? webcamConsumer.track : null}
+						videoVisible={videoVisible}
+						videoProfile={videoProfile}
+						audioCodec={micConsumer ? micConsumer.codec : null}
+						videoCodec={webcamConsumer ? webcamConsumer.codec : null}
 					/>
 				</div>
-				:null
-			}
-		</div>
-	);
-};
+	
+				{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}
+							screenVisible={screenVisible}
+							screenProfile={screenProfile}
+							screenCodec={screenConsumer ? screenConsumer.codec : null}
+						/>
+					</div>
+					:null
+				}
+			</div>
+		);
+	}
+}
 
 Peer.propTypes =
 {
diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx
index 089cf5d..1b2ce31 100644
--- a/app/lib/components/Room.jsx
+++ b/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
 {
 	/**
diff --git a/app/lib/utils.js b/app/lib/utils.js
index 5a1646d..88709f4 100644
--- a/app/lib/utils.js
+++ b/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);
+	};
+};
\ No newline at end of file
diff --git a/app/stylus/components/Peer.styl b/app/stylus/components/Peer.styl
index a95884e..a6567d6 100644
--- a/app/stylus/components/Peer.styl
+++ b/app/stylus/components/Peer.styl
@@ -41,7 +41,16 @@
 			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;
 				margin: 0.2vmin;
diff --git a/app/stylus/components/Room.styl b/app/stylus/components/Room.styl
index 9938a6d..16a5f5d 100644
--- a/app/stylus/components/Room.styl
+++ b/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;
-	}
-}
\ No newline at end of file
diff --git a/app/stylus/index.styl b/app/stylus/index.styl
index 84f4e42..a8a7c9b 100644
--- a/app/stylus/index.styl
+++ b/app/stylus/index.styl
@@ -5,6 +5,7 @@ global-reset();
 @import './mixins';
 @import './fonts';
 @import './reset';
+@import './keyframes';
 
 html {
 	height: 100%;
diff --git a/app/stylus/keyframes.styl b/app/stylus/keyframes.styl
new file mode 100644
index 0000000..9d200f7
--- /dev/null
+++ b/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;
+	}
+}
\ No newline at end of file