From 7f2358fdbb3b6b5d68aead1087cc7763c8983d82 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Fri, 3 Feb 2017 05:25:05 -0500 Subject: [PATCH 1/5] Add Back button to Watch page --- js/page/watch.js | 21 +++++++++++++++--- scss/all.scss | 3 ++- scss/page/_watch.scss | 50 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 scss/page/_watch.scss diff --git a/js/page/watch.js b/js/page/watch.js index 18bbb97c2..2983ad99d 100644 --- a/js/page/watch.js +++ b/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' @@ -22,6 +24,9 @@ var WatchPage = React.createClass({ lbry.getStream(this.props.name); this.updateLoadStatus(); }, + handleBackClicked: function() { + history.back(); + }, updateLoadStatus: function() { lbry.getFileStatus(this.props.name, (status) => { if (!status || !['running', 'stopped'].includes(status.code) || status.written_bytes == 0) { @@ -56,9 +61,19 @@ var WatchPage = React.createClass({ return ( !this.state.readyToPlay ? - :
- + :
+ +
+
+ +
+ +
+ Back to LBRY +
+
+
+
); } diff --git a/scss/all.scss b/scss/all.scss index 452cbbcac..8729eb666 100644 --- a/scss/all.scss +++ b/scss/all.scss @@ -10,4 +10,5 @@ @import "component/_menu.scss"; @import "component/_tooltip.scss"; @import "component/_load-screen.scss"; -@import "page/_developer.scss"; \ No newline at end of file +@import "page/_developer.scss"; +@import "page/_watch.scss"; \ No newline at end of file diff --git a/scss/page/_watch.scss b/scss/page/_watch.scss new file mode 100644 index 000000000..ab3c9a577 --- /dev/null +++ b/scss/page/_watch.scss @@ -0,0 +1,50 @@ +.video { + background: #000; +} + +.video__overlay { + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 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-label-arrow { + color: darken($color-primary, 5%); + font-size: 20px; +} + +.video__back-label-content { + display: inline-block; + margin-left: -2px; + font-size: 20px; + padding: 10px; + border-radius: 3px; + background-color: darken($color-primary, 5%); + color: #fff; + pointer-events: none; +} From 1ccc7fd047bea2540d00a802941cd7d15646d7a4 Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Wed, 8 Feb 2017 13:27:34 -0500 Subject: [PATCH 2/5] change bg color --- scss/page/_watch.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/scss/page/_watch.scss b/scss/page/_watch.scss index ab3c9a577..01b3b7b93 100644 --- a/scss/page/_watch.scss +++ b/scss/page/_watch.scss @@ -33,18 +33,21 @@ opacity: 1; } +$video-back-background: #333; +$video-back-size: 20px; + .video__back-label-arrow { - color: darken($color-primary, 5%); - font-size: 20px; + color: $video-back-background; + font-size: $video-back-size; } .video__back-label-content { display: inline-block; margin-left: -2px; - font-size: 20px; - padding: 10px; + font-size: $video-back-size; + padding: $spacing-vertical / 2; border-radius: 3px; - background-color: darken($color-primary, 5%); + background-color: $video-back-background; color: #fff; pointer-events: none; } From 889ef0178252ce3c75697a9516e458760b562939 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Thu, 16 Feb 2017 02:18:26 -0500 Subject: [PATCH 3/5] Watch: Update Back to LBRY button for Electron --- CHANGELOG.md | 2 +- js/page/watch.js | 58 +++++++++++++++++++++++++++++++++++-------- scss/page/_watch.scss | 2 -- 3 files changed, 49 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ccf9c3afd..9503849a0 100644 --- a/CHANGELOG.md +++ b/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 * * diff --git a/js/page/watch.js b/js/page/watch.js index 2983ad99d..e8647feed 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,21 @@ var WatchPage = React.createClass({ return ( !this.state.readyToPlay ? - :
+ :
-
-
- -
- -
- Back to LBRY + {this.state.controlsShown + ?
+
+ +
+ +
+ Back to LBRY +
+
-
-
+ : null}
); } 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; } From 756a04a368bf7bd6b21e71bb289e0e1ec4885b03 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Thu, 23 Feb 2017 02:46:19 -0500 Subject: [PATCH 4/5] Watch: fix back button flickering on mouseover --- js/page/watch.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/page/watch.js b/js/page/watch.js index e8647feed..fa2f70ef0 100644 --- a/js/page/watch.js +++ b/js/page/watch.js @@ -52,7 +52,7 @@ var WatchPage = React.createClass({ }); }, this._controlsHideDelay); }, - handleMouseOut: function() { + handleMouseLeave: function() { if (this._controlsTimeout) { clearTimeout(this._controlsTimeout); } @@ -97,7 +97,7 @@ var WatchPage = React.createClass({ return ( !this.state.readyToPlay ? - :
+ :
{this.state.controlsShown ?
From fb421cdd79ac6e6b616b1dc00069fdcd2dfe669d Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Thu, 23 Feb 2017 03:45:43 -0500 Subject: [PATCH 5/5] When user hits "Watch", don't check balance if download already started --- CHANGELOG.md | 2 +- js/component/file-actions.js | 37 +++++++++++++++++++++++------------- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ccf9c3afd..d4316facf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,7 +18,7 @@ Web UI version numbers should always match the corresponding version of LBRY App * ### Fixed - * + * When user hits "Watch," don't check balance if download already started * * diff --git a/js/component/file-actions.js b/js/component/file-actions.js index 8d5168c1d..0eab19dea 100644 --- a/js/component/file-actions.js +++ b/js/component/file-actions.js @@ -10,23 +10,32 @@ 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, - }) - lbry.getCostInfoForName(this.props.streamName, ({cost}) => { - lbry.getBalance((balance) => { - if (cost > balance) { - this.setState({ - modal: 'notEnoughCredits', - loading: false, - }); - } else { - window.location = '?watch=' + this.props.streamName; - } - }); }); + + if (this.props.downloadStarted) { + this.startVideo(); + } else { + lbry.getCostInfoForName(this.props.streamName, ({cost}) => { + lbry.getBalance((balance) => { + if (cost > balance) { + this.setState({ + modal: 'notEnoughCredits', + loading: false, + }); + } else { + this.startVideo(); + } + }); + }); + } }, getInitialState: function() { return { @@ -190,7 +199,9 @@ let FileActionsRow = React.createClass({ return (
- {(this.props.metadata.content_type && this.props.metadata.content_type.startsWith('video/')) ? : null} + {this.props.metadata.content_type && this.props.metadata.content_type.startsWith('video/') + ? + : null} {this.state.fileInfo !== null || this.state.fileInfo.isMine ? linkBlock : null}