From 6059c3bebb3f0ce1cc7787ff14801ea80cd43a4a Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Thu, 16 Feb 2017 02:18:26 -0500
Subject: [PATCH] Watch: Update Back to LBRY button for Electron

---
 js/page/watch.js      | 61 +++++++++++++++++++++++++++++++++++--------
 scss/page/_watch.scss |  2 --
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/js/page/watch.js b/js/page/watch.js
index 4825049f2..640d43ac2 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -9,6 +9,10 @@ const VideoStream = require('videostream');
 
 
 var WatchPage = React.createClass({
+  _isMounted: false,
+  _controlsHideDelay: 3000, // Note: this needs to be shorter than the built-in delay in Electron, or Electron will hide the controls before us
+  _controlsHideTimeout: null,
+
   propTypes: {
     name: React.PropTypes.string,
   },
@@ -18,6 +22,7 @@ var WatchPage = React.createClass({
       readyToPlay: false,
       loadStatusMessage: "Requesting stream",
       mimeType: null,
+      controlsShown: false,
     };
   },
   componentDidMount: function() {
@@ -27,6 +32,37 @@ var WatchPage = React.createClass({
   handleBackClicked: function() {
     history.back();
   },
+  handleMouseMove: function() {
+    if (this._controlsTimeout) {
+      clearTimeout(this._controlsTimeout);
+    }
+
+    if (!this.state.controlsShown) {
+      this.setState({
+        controlsShown: true,
+      });
+    }
+    this._controlsTimeout = setTimeout(() => {
+      if (!this.isMounted) {
+        return;
+      }
+
+      this.setState({
+        controlsShown: false,
+      });
+    }, this._controlsHideDelay);
+  },
+  handleMouseOut: function() {
+    if (this._controlsTimeout) {
+      clearTimeout(this._controlsTimeout);
+    }
+
+    if (this.state.controlsShown) {
+      this.setState({
+        controlsShown: false,
+      });
+    }
+  },
   updateLoadStatus: function() {
     lbry.getFileStatus(this.props.name, (status) => {
       if (!status || !['running', 'stopped'].includes(status.code) || status.written_bytes == 0) {
@@ -61,19 +97,22 @@ var WatchPage = React.createClass({
     return (
       !this.state.readyToPlay
         ? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
-        : <main className="video full-screen">
-            <video width="100%" height="100%" id="video" ref="video" src={'/view?name=' + this.props.name} />
-            <div className="video__overlay">
-              <div className="video__back">
-                <Link icon="icon-arrow-circle-o-left" className="video__back-link" onClick={this.handleBackClicked}/>
-                <div className="video__back-label">
-                  <Icon icon="icon-caret-left" className="video__back-label-arrow" />
-                  <div className="video__back-label-content">
-                    Back to LBRY
+        : <main className="video full-screen" onMouseMove={this.handleMouseMove} onMouseOut={this.handleMouseOut}>
+            <video width="100%" height="100%" id="video" ref="video" src={'/view?name=' + this.props.name}
+                   controls={this.state.controlsShown}/>
+            {this.state.controlsShown
+              ? <div className="video__overlay">
+                  <div className="video__back">
+                    <Link icon="icon-arrow-circle-o-left" className="video__back-link" onClick={this.handleBackClicked}/>
+                    <div className="video__back-label">
+                      <Icon icon="icon-caret-left" className="video__back-label-arrow" />
+                      <div className="video__back-label-content">
+                        Back to LBRY
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
+              : null}
           </main>
     );
   }
diff --git a/scss/page/_watch.scss b/scss/page/_watch.scss
index 01b3b7b93..23fbcc171 100644
--- a/scss/page/_watch.scss
+++ b/scss/page/_watch.scss
@@ -5,9 +5,7 @@
 .video__overlay {
   position: absolute;
   top: 0px;
-  bottom: 0px;
   left: 0px;
-  right: 0px;
   color: #fff;
   z-index: 1;
 }