In DownloadLink, immediately switch to "0% Downloaded" on click

Before, it would only change after several seconds when the  download
actually started.
This commit is contained in:
Alex Liebowitz 2017-01-10 02:40:10 -05:00
parent 986ce927f0
commit 8ae5b6e0ed

View file

@ -169,22 +169,28 @@ export let DownloadLink = React.createClass({
deleteChecked: React.PropTypes.bool, deleteChecked: React.PropTypes.bool,
}, },
tryDownload: function() { tryDownload: function() {
this.setState({
attemptingDownload: true,
});
lbry.getCostInfoForName(this.props.streamName, ({cost}) => { lbry.getCostInfoForName(this.props.streamName, ({cost}) => {
lbry.getBalance((balance) => { lbry.getBalance((balance) => {
if (cost > balance) { if (cost > balance) {
this.setState({ this.setState({
modal: 'notEnoughCredits', modal: 'notEnoughCredits',
attemptingDownload: false,
}); });
} else { } else {
lbry.getStream(this.props.streamName, (streamInfo) => { lbry.getStream(this.props.streamName, (streamInfo) => {
if (streamInfo === null || typeof streamInfo !== 'object') { if (streamInfo === null || typeof streamInfo !== 'object') {
this.setState({ this.setState({
modal: 'timedOut', modal: 'timedOut',
attemptingDownload: false,
}); });
} else { } else {
this.setState({ this.setState({
modal: 'downloadStarted', modal: 'downloadStarted',
filePath: streamInfo.path, filePath: streamInfo.path,
attemptingDownload: false,
}); });
} }
}); });
@ -227,6 +233,7 @@ export let DownloadLink = React.createClass({
modal: null, modal: null,
menuOpen: false, menuOpen: false,
deleteChecked: false, deleteChecked: false,
attemptingDownload: false,
} }
}, },
closeModal: function() { closeModal: function() {
@ -250,12 +257,9 @@ export let DownloadLink = React.createClass({
]; ];
let linkBlock; let linkBlock;
if (this.props.state == 'not-started') { if (this.state.attemptingDownload || this.props.state == 'downloading') {
linkBlock = ( const progress = this.state.attemptingDownload ? 0 : this.props.progress;
<Link button="text" label="Download" icon="icon-download" onClick={this.handleClick} /> const label = `${parseInt(progress * 100)}% complete`;
);
} else if (this.props.state == 'downloading') {
const label = `${parseInt(this.props.progress * 100)}% complete`;
linkBlock = ( linkBlock = (
<span> <span>
<DropDown button="download" className="button-download--bg" label={label} icon="icon-download" <DropDown button="download" className="button-download--bg" label={label} icon="icon-download"
@ -263,11 +267,15 @@ export let DownloadLink = React.createClass({
{dropDownItems} {dropDownItems}
</DropDown> </DropDown>
<DropDown button="download" className="button-download--fg" label={label} icon="icon-download" <DropDown button="download" className="button-download--fg" label={label} icon="icon-download"
onClick={this.handleClick} style={{width: `${this.props.progress * 100}%`}}> onClick={this.handleClick} style={{width: `${progress * 100}%`}}>
{dropDownItems} {dropDownItems}
</DropDown> </DropDown>
</span> </span>
); );
} else if (this.props.state == 'not-started') {
linkBlock = (
<Link button="text" label="Download" icon="icon-download" onClick={this.handleClick} />
);
} else if (this.props.state == 'done') { } else if (this.props.state == 'done') {
linkBlock = ( linkBlock = (
<DropDown button="alt" label="Open" onClick={this.handleClick} onCaretClick={this.openMenu}> <DropDown button="alt" label="Open" onClick={this.handleClick} onCaretClick={this.openMenu}>