LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

Watch: Update Back to LBRY button for Electron

Browse source
This commit is contained in:
Alex Liebowitz 2017-02-16 02:18:26 -05:00
parent 471bf2fb10
commit 6059c3bebb
2 changed files with 50 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
js/page/watch.js
View file

@ -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,22 @@ var WatchPage = React.createClass({
return (
!this.state.readyToPlay
? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
: <main className="video full-screen">
<video width="100%" height="100%" id="video" ref="video" src={'/view?name=' + this.props.name} />
<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
: <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>
</div>
</div>
: null}
</main>
);
}

2
scss/page/_watch.scss
View file

@ -5,9 +5,7 @@
.video__overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
color: #fff;
z-index: 1;
}