Merge pull request #158 from lbryio/video-back-button
Add Back button to Watch page (WIP)
This commit is contained in:
commit
339f1ac607
3 changed files with 112 additions and 6 deletions
|
@ -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,20 +22,55 @@ 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);
|
||||
},
|
||||
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 || status.code != 'running' || status.written_bytes == 0) {
|
||||
if (!status || !['running', 'stopped'].includes(status.code) || status.written_bytes == 0) {
|
||||
// Download hasn't started yet, so update status message (if available) then try again
|
||||
// TODO: Would be nice to check if we have the MOOV before starting playing
|
||||
if (status) {
|
||||
this.setState({
|
||||
loadStatusMessage: status.message
|
||||
loadStatusMessage: status.message,
|
||||
});
|
||||
}
|
||||
setTimeout(() => { this.updateLoadStatus() }, 250);
|
||||
|
@ -56,9 +97,22 @@ var WatchPage = React.createClass({
|
|||
return (
|
||||
!this.state.readyToPlay
|
||||
? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
|
||||
: <main className="full-screen">
|
||||
<video controls width="100%" height="100%" id="video" ref="video">
|
||||
</video>
|
||||
: <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>
|
||||
: null}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -10,4 +10,5 @@
|
|||
@import "component/_menu.scss";
|
||||
@import "component/_tooltip.scss";
|
||||
@import "component/_load-screen.scss";
|
||||
@import "page/_developer.scss";
|
||||
@import "page/_developer.scss";
|
||||
@import "page/_watch.scss";
|
51
scss/page/_watch.scss
Normal file
51
scss/page/_watch.scss
Normal file
|
@ -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;
|
||||
}
|
Loading…
Add table
Reference in a new issue