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:
parent
986ce927f0
commit
8ae5b6e0ed
1 changed files with 15 additions and 7 deletions
|
@ -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}>
|
||||||
|
|
Loading…
Reference in a new issue