Hide video until it's playable and show loading message

This commit is contained in:
Alex Liebowitz 2016-05-05 04:12:23 -04:00
parent 31bf22cbf1
commit 5b0f2e638a

View file

@ -8,12 +8,42 @@ var WatchPage = React.createClass({
propTypes: {
name: React.PropTypes.string,
},
getInitialState: function() {
return {
readyToPlay: false,
loadStatusMessage: "Requesting stream",
};
},
componentDidMount: function() {
lbry.getStream(this.props.name);
this.updateLoadStatus();
},
updateLoadStatus: function() {
lbry.getFileStatus(this.props.name, (status) => {
if (status.code != 'running') {
this.loadStatusMessage = status.message;
setTimeout(() => { this.updateLoadStatus() }, 250);
} else {
this.setState({
readyToPlay: true
});
}
});
},
render: function() {
return (
<main>
<video style={videoStyle} src={"/view?name=" + this.props.name} controls />
</main>
);
if (!this.state.readyToPlay) {
return (
<main>
<h3>Loading lbry://{this.props.name}</h3>
{this.state.loadStatusMessage}
</main>
);
} else {
return (
<main>
<video style={videoStyle} src={"/view?name=" + this.props.name} controls />;
</main>
);
}
}
});