lbry-desktop/js/page/watch.js

121 lines
3.6 KiB
JavaScript
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
2017-02-03 11:25:05 +01:00
import {Icon} from '../component/common.js';
import {Link} from '../component/link.js';
2016-11-22 21:19:08 +01:00
import lbry from '../lbry.js';
2017-01-03 03:21:23 +01:00
import LoadScreen from '../component/load_screen.js'
2017-01-19 10:50:08 +01:00
const fs = require('fs');
const VideoStream = require('videostream');
2016-04-21 11:51:27 +02:00
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,
2016-04-21 11:51:27 +02:00
propTypes: {
name: React.PropTypes.string,
},
getInitialState: function() {
return {
downloadStarted: false,
readyToPlay: false,
loadStatusMessage: "Requesting stream",
mimeType: null,
controlsShown: false,
};
},
componentDidMount: function() {
lbry.getStream(this.props.name);
this.updateLoadStatus();
},
2017-02-03 11:25:05 +01:00
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) => {
2017-02-16 06:19:10 +01:00
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
2017-01-19 10:50:08 +01:00
// TODO: Would be nice to check if we have the MOOV before starting playing
if (status) {
this.setState({
loadStatusMessage: status.message
});
}
setTimeout(() => { this.updateLoadStatus() }, 250);
} else {
this.setState({
readyToPlay: true,
mimeType: status.mime_type,
})
2017-01-19 10:50:08 +01:00
const mediaFile = {
createReadStream: function (opts) {
// Return a readable stream that provides the bytes
// between offsets "start" and "end" inclusive
console.log('Stream between ' + opts.start + ' and ' + opts.end + '.');
return fs.createReadStream(status.download_path, opts)
}
}
var elem = this.refs.video;
var videostream = VideoStream(mediaFile, elem);
elem.play();
}
});
},
2016-04-21 11:51:27 +02:00
render: function() {
return (
!this.state.readyToPlay
? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
: <main className="video full-screen" onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
2017-02-03 11:25:05 +01:00
<video controls width="100%" height="100%" id="video" ref="video"></video>
{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>
2017-02-03 11:25:05 +01:00
</div>
</div>
: null}
</main>
);
2016-04-21 11:51:27 +02:00
}
});
2016-11-22 21:19:08 +01:00
export default WatchPage;