LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-16 15:29:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Pre-render video hidden, then launch when it reports it can play

Browse source
This commit is contained in:
Alex Liebowitz 2016-05-05 06:55:15 -04:00
parent 5b0f2e638a
commit c74629f5d3
1 changed files with 32 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
js/page/watch.js
View file

@ -10,6 +10,7 @@ var WatchPage = React.createClass({
}, },
getInitialState: function() { getInitialState: function() {
return { return {
downloadStarted: false,
readyToPlay: false, readyToPlay: false,
loadStatusMessage: "Requesting stream", loadStatusMessage: "Requesting stream",
}; };
@ -18,32 +19,48 @@ var WatchPage = React.createClass({
lbry.getStream(this.props.name); lbry.getStream(this.props.name);
this.updateLoadStatus(); this.updateLoadStatus();
}, },
onCanPlay: function() {
this.setState({
readyToPlay: true
});
},
updateLoadStatus: function() { updateLoadStatus: function() {
lbry.getFileStatus(this.props.name, (status) => { lbry.getFileStatus(this.props.name, (status) => {
if (status.code != 'running') { if (!status || status.code != 'running' || status.written_bytes == 0) {
this.loadStatusMessage = status.message; // Download hasn't started yet, so update status message (if available) then try again
if (status) {
this.setState({
loadStatusMessage: status.message
});
}
setTimeout(() => { this.updateLoadStatus() }, 250); setTimeout(() => { this.updateLoadStatus() }, 250);
} else { } else {
this.setState({ this.setState({
readyToPlay: true loadStatusMessage: "Buffering",
downloadStarted: true,
}); });
} }
}); });
}, },
render: function() { render: function() {
if (!this.state.readyToPlay) { if (!this.state.downloadStarted) {
return ( var video = null;
<main>
<h3>Loading lbry://{this.props.name}</h3>
{this.state.loadStatusMessage}
</main>
);
} else { } else {
return ( // If the download has started, render the <video> behind the scenes so it can start loading.
<main> // When the video is actually ready to play, the loading text is hidden and the video shown.
<video style={videoStyle} src={"/view?name=" + this.props.name} controls />; var video = <video src={"/view?name=" + this.props.name} style={videoStyle}
</main> className={this.state.readyToPlay ? '' : 'hidden'} controls
); onCanPlay={this.onCanPlay} />;
} }
return (
<main>
<div className={this.state.readyToPlay ? 'hidden' : ''}>
<h3>Loading lbry://{this.props.name}</h3>
{this.state.loadStatusMessage}...
</div>
{video}
</main>
);
} }
}); });