From 4ddd87b529b91f5bfab50003363eba962c6bfedb Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Mon, 16 Jul 2018 13:45:58 +0200
Subject: [PATCH] Hide controls in Me as well

---
 app/lib/components/Me.jsx     | 25 ++++++++++++++++++++++++-
 app/stylus/components/Me.styl |  9 +++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/app/lib/components/Me.jsx b/app/lib/components/Me.jsx
index 99bb31a..38dc747 100644
--- a/app/lib/components/Me.jsx
+++ b/app/lib/components/Me.jsx
@@ -11,6 +11,24 @@ import ScreenView from './ScreenView';
 
 class Me extends React.Component
 {
+	state = {
+		controlsVisible : false
+	};
+
+	handleMouseOver = () => 
+	{
+		this.setState({
+			controlsVisible : true
+		});
+	};
+
+	handleMouseOut = () => 
+	{
+		this.setState({
+			controlsVisible : false
+		});
+	};
+
 	constructor(props)
 	{
 		super(props);
@@ -85,10 +103,15 @@ class Me extends React.Component
 				data-tip={tip}
 				data-tip-disable={!tip}
 				data-type='dark'
+				onMouseOver={this.handleMouseOver}
+				onMouseOut={this.handleMouseOut}
 			>
 				<div className={classnames('view-container', 'webcam')}>
 					{connected ?
-						<div className='controls'>
+						<div className={classnames('controls', {
+							visible : this.state.controlsVisible
+						})}
+						>
 							<div
 								className={classnames('button', 'mic', micState, {
 									disabled : me.audioInProgress
diff --git a/app/stylus/components/Me.styl b/app/stylus/components/Me.styl
index f1095a9..2f21d71 100644
--- a/app/stylus/components/Me.styl
+++ b/app/stylus/components/Me.styl
@@ -27,7 +27,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;