LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Convert alerts to modals in DownloadLink component

Browse source
This commit is contained in:
Alex Liebowitz 2016-10-21 03:53:45 -04:00
parent df0a5ee73e
commit a6e4751ae3
1 changed files with 48 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
js/component/link.js
View file

@ -93,13 +93,22 @@ var DownloadLink = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
downloading: false, downloading: false,
filePath: null,
modal: null,
} }
}, },
closeModal: function() {
this.setState({
modal: null,
})
},
handleClick: function() { handleClick: function() {
lbry.getCostEstimate(this.props.streamName, (amount) => { lbry.getCostEstimate(this.props.streamName, (amount) => {
lbry.getBalance((balance) => { lbry.getBalance((balance) => {
if (amount > balance) { if (amount > balance) {
alert("You don't have enough LBRY credits to pay for this stream."); this.setState({
modal: 'notEnoughCredits',
});
} else { } else {
this.startDownload(); this.startDownload();
} }
@ -113,15 +122,27 @@ var DownloadLink = React.createClass({
}); });
lbry.getStream(this.props.streamName, (streamInfo) => { lbry.getStream(this.props.streamName, (streamInfo) => {
alert('Downloading to ' + streamInfo.path); this.setState({
console.log(streamInfo); modal: 'downloadStarted',
filePath: streamInfo.path,
});
}); });
} }
}, },
render: function() { render: function() {
var label = (!this.state.downloading ? this.props.label : this.props.downloadingLabel); var label = (!this.state.downloading ? this.props.label : this.props.downloadingLabel);
return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style} return (
disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />; <div>
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />
<Modal isOpen={this.state.modal == 'downloadStarted'} onConfirmed={this.closeModal}>
Downloading to {this.state.filePath}
</Modal>
<Modal isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
</div>
);
} }
}); });
@ -138,22 +159,40 @@ var WatchLink = React.createClass({
lbry.getCostEstimate(this.props.streamName, (amount) => { lbry.getCostEstimate(this.props.streamName, (amount) => {
lbry.getBalance((balance) => { lbry.getBalance((balance) => {
if (amount > balance) { if (amount > balance) {
alert("You don't have enough LBRY credits to pay for this stream."); this.setState({
modal: 'notEnoughCredits',
});
} else { } else {
window.location = '?watch=' + this.props.streamName; window.location = '?watch=' + this.props.streamName;
} }
}); });
}); });
}, },
getInitialState: function() {
return {
modal: null,
};
},
closeModal: function() {
this.setState({
modal: null,
});
},
getDefaultProps: function() { getDefaultProps: function() {
return { return {
icon: 'icon-play', icon: 'icon-play',
label: 'Watch', label: 'Watch',
} }
}, },
render: function() { render: function() {
return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style} return (
label={this.props.label} icon={this.props.icon} onClick={this.handleClick} />; <div>
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
label={this.props.label} icon={this.props.icon} onClick={this.handleClick} />
<Modal isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
</div>
);
} }
}); });