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 18bbb97c2..fa2f70ef0 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'
@@ -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
?
- :
-
+ :
+
+ {this.state.controlsShown
+ ?
+ : null}
);
}
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..23fbcc171
--- /dev/null
+++ b/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;
+}