Add support for displaying progress in DownloadLink
This commit is contained in:
parent
f424e2e439
commit
1b51b4e329
2 changed files with 41 additions and 17 deletions
|
@ -83,22 +83,20 @@ export let DownloadLink = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
type: React.PropTypes.string,
|
type: React.PropTypes.string,
|
||||||
streamName: React.PropTypes.string,
|
streamName: React.PropTypes.string,
|
||||||
|
sdHash: React.PropTypes.string,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
downloadingLabel: React.PropTypes.string,
|
|
||||||
button: React.PropTypes.string,
|
button: React.PropTypes.string,
|
||||||
style: React.PropTypes.object,
|
|
||||||
hidden: React.PropTypes.bool,
|
hidden: React.PropTypes.bool,
|
||||||
},
|
},
|
||||||
getDefaultProps: function() {
|
getDefaultProps: function() {
|
||||||
return {
|
return {
|
||||||
icon: 'icon-download',
|
icon: 'icon-download',
|
||||||
label: 'Download',
|
label: 'Download',
|
||||||
downloadingLabel: 'Downloading...',
|
downloading: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
downloading: false,
|
|
||||||
filePath: null,
|
filePath: null,
|
||||||
modal: null,
|
modal: null,
|
||||||
}
|
}
|
||||||
|
@ -109,23 +107,17 @@ export let DownloadLink = React.createClass({
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleClick: function() {
|
handleClick: function() {
|
||||||
this.setState({
|
|
||||||
downloading: 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',
|
||||||
downloading: 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',
|
||||||
downloading: false,
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -139,11 +131,15 @@ export let DownloadLink = React.createClass({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
var label = (!this.state.downloading ? this.props.label : this.props.downloadingLabel);
|
const label = 'progress' in this.props ? `${parseInt(this.props.progress * 100)}% complete` : this.props.label;
|
||||||
return (
|
return (
|
||||||
<span className="button-container">
|
<span className="button-container">
|
||||||
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
|
<Link className="button-download" button={this.props.button} hidden={this.props.hidden} label={label}
|
||||||
disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />
|
icon={this.props.icon} onClick={this.handleClick} />
|
||||||
|
{'progress' in this.props
|
||||||
|
? <Link className="button-download button-download--mirror" button={this.props.button} hidden={this.props.hidden} label={label}
|
||||||
|
icon={this.props.icon} onClick={this.handleClick} style={{width: `${this.props.progress * 100}%`}} />
|
||||||
|
: null}
|
||||||
<Modal className="download-started-modal" isOpen={this.state.modal == 'downloadStarted'}
|
<Modal className="download-started-modal" isOpen={this.state.modal == 'downloadStarted'}
|
||||||
contentLabel="Download started" onConfirmed={this.closeModal}>
|
contentLabel="Download started" onConfirmed={this.closeModal}>
|
||||||
<p>Downloading to:</p>
|
<p>Downloading to:</p>
|
||||||
|
@ -168,7 +164,6 @@ export let WatchLink = React.createClass({
|
||||||
streamName: React.PropTypes.string,
|
streamName: React.PropTypes.string,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
button: React.PropTypes.string,
|
button: React.PropTypes.string,
|
||||||
style: React.PropTypes.object,
|
|
||||||
hidden: React.PropTypes.bool,
|
hidden: React.PropTypes.bool,
|
||||||
},
|
},
|
||||||
handleClick: function() {
|
handleClick: function() {
|
||||||
|
@ -207,7 +202,7 @@ export let WatchLink = React.createClass({
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
return (
|
return (
|
||||||
<span className="button-container">
|
<div className="button-container">
|
||||||
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
|
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
|
||||||
disabled={this.state.loading} label={this.props.label} icon={this.props.icon}
|
disabled={this.state.loading} label={this.props.label} icon={this.props.icon}
|
||||||
onClick={this.handleClick} />
|
onClick={this.handleClick} />
|
||||||
|
@ -215,7 +210,7 @@ export let WatchLink = React.createClass({
|
||||||
onConfirmed={this.closeModal}>
|
onConfirmed={this.closeModal}>
|
||||||
You don't have enough LBRY credits to pay for this stream.
|
You don't have enough LBRY credits to pay for this stream.
|
||||||
</Modal>
|
</Modal>
|
||||||
</span>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
@import "global";
|
@import "global";
|
||||||
|
|
||||||
@mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
|
@mixin text-link($color: $color-primary, $hover-opacity: 0.70, $mirror: false) {
|
||||||
color: $color;
|
color: $color;
|
||||||
.icon
|
.icon
|
||||||
{
|
{
|
||||||
|
@ -27,6 +27,19 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@if $mirror == false {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
color: $color-bg;
|
||||||
|
background-color: $color;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-fixed-width {
|
.icon-fixed-width {
|
||||||
|
@ -138,6 +151,9 @@ input[type="text"], input[type="search"]
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-container {
|
.button-container {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
+ .button-container
|
+ .button-container
|
||||||
{
|
{
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
|
@ -182,6 +198,19 @@ input[type="text"], input[type="search"]
|
||||||
box-shadow: $default-box-shadow;
|
box-shadow: $default-box-shadow;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
}
|
}
|
||||||
|
.button-download
|
||||||
|
{
|
||||||
|
padding: 0 6px;
|
||||||
|
|
||||||
|
text-decoration: none !important;
|
||||||
|
|
||||||
|
&:not(.button-download--mirror) {
|
||||||
|
@include text-link(darken($color-primary, 1%));
|
||||||
|
}
|
||||||
|
&.button-download--mirror {
|
||||||
|
@include text-link(darken($color-primary, 1%), $mirror: true);
|
||||||
|
}
|
||||||
|
}
|
||||||
.button-cancel
|
.button-cancel
|
||||||
{
|
{
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
|
|
Loading…
Reference in a new issue