Merge branch 'development' into always-show-cancel

CHANGELOG.md

@@ -8,7 +8,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
 
 ## [Unreleased]
 ### Added
-  *
+  * "Back to LBRY" button on Watch page
   *
   *
 
@@ -19,6 +19,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
 
 ### Fixed
   * On load screen, always show Cancel link if a previous page is available
+  * When user hits "Watch," don't check balance if download already started
   *
   *
 

js/component/file-actions.js

@@ -10,11 +10,19 @@ import {DropDownMenu, DropDownMenuItem} from './menu.js';
 let WatchLink = React.createClass({
   propTypes: {
     streamName: React.PropTypes.string,
+    downloadStarted: React.PropTypes.bool,
+  },
+  startVideo: function() {
+    window.location = '?watch=' + this.props.streamName;
   },
   handleClick: function() {
     this.setState({
       loading: true,
-    })
+    });
+
+    if (this.props.downloadStarted) {
+      this.startVideo();
+    } else {
       lbry.getCostInfoForName(this.props.streamName, ({cost}) => {
         lbry.getBalance((balance) => {
           if (cost > balance) {
@@ -23,10 +31,11 @@ let WatchLink = React.createClass({
               loading: false,
             });
           } else {
-          window.location = '?watch=' + this.props.streamName;
+            this.startVideo();
           }
         });
       });
+    }
   },
   getInitialState: function() {
     return {
@@ -190,7 +199,9 @@ let FileActionsRow = React.createClass({
 
     return (
       <div>
-        {(this.props.metadata.content_type && this.props.metadata.content_type.startsWith('video/')) ? <WatchLink streamName={this.props.streamName} /> : null}
+        {this.props.metadata.content_type && this.props.metadata.content_type.startsWith('video/')
+          ? <WatchLink streamName={this.props.streamName} downloadStarted={!!this.state.fileInfo} />
+          : null}
         {this.state.fileInfo !== null || this.state.fileInfo.isMine
           ? linkBlock
           : null}

js/page/watch.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import {Icon} from '../component/common.js';
+import {Link} from '../component/link.js';
 import lbry from '../lbry.js';
 import LoadScreen from '../component/load_screen.js'
 
@@ -7,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,
   },
@@ -16,12 +22,47 @@ var WatchPage = React.createClass({
       readyToPlay: false,
       loadStatusMessage: "Requesting stream",
       mimeType: null,
+      controlsShown: false,
     };
   },
   componentDidMount: function() {
     lbry.getStream(this.props.name);
     this.updateLoadStatus();
   },
+  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);
+  },
+  handleMouseLeave: 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) {
@@ -56,9 +97,21 @@ var WatchPage = React.createClass({
     return (
       !this.state.readyToPlay
         ? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
-        : <main className="full-screen">
+        : <main className="video full-screen" onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
-            <video controls width="100%" height="100%" id="video" ref="video">
+            <video controls width="100%" height="100%" id="video" ref="video"></video>
-            </video>
+            {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>
+              : null}
           </main>
     );
   }

scss/all.scss

@@ -11,3 +11,4 @@
 @import "component/_tooltip.scss";
 @import "component/_load-screen.scss";
 @import "page/_developer.scss";
+@import "page/_watch.scss";

scss/page/_watch.scss

@@ -0,0 +1,51 @@
+.video {
+  background: #000;
+}
+
+.video__overlay {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  color: #fff;
+  z-index: 1;
+}
+
+.video__back {
+  margin-top: 30px;
+  margin-left: 50px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.video__back-link {
+  font-size: 50px;
+}
+
+.video__back-label {
+  opacity: 0;
+  transition: opacity 100ms ease-in;
+}
+
+.video__back-link:hover + .video__back-label {
+  opacity: 1;
+}
+
+$video-back-background: #333;
+$video-back-size: 20px;
+
+.video__back-label-arrow {
+  color: $video-back-background;
+  font-size: $video-back-size;
+}
+
+.video__back-label-content {
+  display: inline-block;
+  margin-left: -2px;
+  font-size: $video-back-size;
+  padding: $spacing-vertical / 2;
+  border-radius: 3px;
+  background-color: $video-back-background;
+  color: #fff;
+  pointer-events: none;
+}