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; +}