lbry-desktop/js/component/link.js

222 lines
6.6 KiB
JavaScript
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
import lbry from '../lbry.js';
import Modal from './modal.js';
import {Icon, ToolTip} from './common.js';
export let Link = React.createClass({
handleClick: function() {
if (this.props.onClick) {
this.props.onClick();
}
},
render: function() {
var href = this.props.href ? this.props.href : 'javascript:;',
2016-08-07 23:05:04 +02:00
icon = this.props.icon ? <Icon icon={this.props.icon} fixed={true} /> : '',
className = (this.props.className ? this.props.className : '') +
(this.props.button ? ' button-block button-' + this.props.button : '') +
(this.props.hidden ? ' hidden' : '') +
(this.props.disabled ? ' disabled' : '');
return (
2016-08-07 23:05:04 +02:00
<a className={className ? className : 'button-text'} href={href} style={this.props.style ? this.props.style : {}}
title={this.props.title} onClick={this.handleClick}>
{this.props.icon ? icon : '' }
<span className="link-label">{this.props.label}</span>
{this.props.badge ? <span className="badge">{this.props.badge}</span> : '' }
</a>
);
}
});
var linkContainerStyle = {
position: 'relative',
};
2016-11-22 21:19:08 +01:00
export let ToolTipLink = React.createClass({
getInitialState: function() {
return {
showTooltip: false,
};
},
handleClick: function() {
if (this.props.tooltip) {
this.setState({
showTooltip: !this.state.showTooltip,
});
}
if (this.props.onClick) {
this.props.onClick();
}
},
handleTooltipMouseOut: function() {
this.setState({
showTooltip: false,
});
},
render: function() {
var href = this.props.href ? this.props.href : 'javascript:;',
icon = this.props.icon ? <Icon icon={this.props.icon} /> : '',
2016-08-07 23:05:04 +02:00
className = this.props.className +
(this.props.button ? ' button-block button-' + this.props.button : '') +
(this.props.hidden ? ' hidden' : '') +
(this.props.disabled ? ' disabled' : '');
return (
<span style={linkContainerStyle}>
2016-08-07 23:05:04 +02:00
<a className={className ? className : 'button-text'} href={href} style={this.props.style ? this.props.style : {}}
title={this.props.title} onClick={this.handleClick}>
{this.props.icon ? icon : '' }
{this.props.label}
</a>
{(!this.props.tooltip ? null :
<ToolTip open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
{this.props.tooltip}
</ToolTip>
)}
</span>
);
}
});
2016-11-22 21:19:08 +01:00
export let DownloadLink = React.createClass({
propTypes: {
type: React.PropTypes.string,
streamName: React.PropTypes.string,
label: React.PropTypes.string,
downloadingLabel: React.PropTypes.string,
button: React.PropTypes.string,
style: React.PropTypes.object,
hidden: React.PropTypes.bool,
},
getDefaultProps: function() {
return {
icon: 'icon-download',
label: 'Download',
downloadingLabel: 'Downloading...',
}
},
getInitialState: function() {
return {
downloading: false,
filePath: null,
modal: null,
}
},
closeModal: function() {
this.setState({
modal: null,
})
},
handleClick: function() {
this.setState({
downloading: true
});
lbry.getCostInfoForName(this.props.streamName, ({cost}) => {
lbry.getBalance((balance) => {
if (cost > balance) {
this.setState({
modal: 'notEnoughCredits',
downloading: false
});
} else {
lbry.getStream(this.props.streamName, (streamInfo) => {
if (streamInfo === null || typeof streamInfo !== 'object') {
this.setState({
modal: 'timedOut',
downloading: false,
});
} else {
this.setState({
modal: 'downloadStarted',
filePath: streamInfo.path,
});
}
});
}
});
});
},
render: function() {
var label = (!this.state.downloading ? this.props.label : this.props.downloadingLabel);
return (
<span className="button-container">
<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} />
2017-01-13 23:05:09 +01:00
<Modal className="download-started-modal" isOpen={this.state.modal == 'downloadStarted'}
contentLabel="Download started" onConfirmed={this.closeModal}>
<p>Downloading to:</p>
<div className="download-started-modal__file-path">{this.state.filePath}</div>
</Modal>
2017-01-13 23:05:09 +01:00
<Modal isOpen={this.state.modal == 'notEnoughCredits'} contentLabel="Not enough credits"
onConfirmed={this.closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
2017-01-13 23:05:09 +01:00
<Modal isOpen={this.state.modal == 'timedOut'} contentLabel="Download failed"
onConfirmed={this.closeModal}>
LBRY was unable to download the stream <strong>lbry://{this.props.streamName}</strong>.
</Modal>
</span>
);
}
});
2016-11-22 21:19:08 +01:00
export let WatchLink = React.createClass({
propTypes: {
type: React.PropTypes.string,
streamName: React.PropTypes.string,
label: React.PropTypes.string,
button: React.PropTypes.string,
style: React.PropTypes.object,
hidden: React.PropTypes.bool,
},
handleClick: function() {
2016-11-24 05:30:59 +01:00
this.setState({
loading: true,
})
lbry.getCostInfoForName(this.props.streamName, ({cost}) => {
lbry.getBalance((balance) => {
if (cost > balance) {
this.setState({
modal: 'notEnoughCredits',
2016-11-24 05:30:59 +01:00
loading: false,
});
} else {
window.location = '?watch=' + this.props.streamName;
}
});
});
},
getInitialState: function() {
return {
modal: null,
2016-11-24 05:30:59 +01:00
loading: false,
};
},
closeModal: function() {
this.setState({
modal: null,
});
},
getDefaultProps: function() {
return {
icon: 'icon-play',
label: 'Watch',
}
},
render: function() {
return (
<span className="button-container">
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
2016-11-24 05:30:59 +01:00
disabled={this.state.loading} label={this.props.label} icon={this.props.icon}
onClick={this.handleClick} />
2017-01-13 23:05:09 +01:00
<Modal isOpen={this.state.modal == 'notEnoughCredits'} contentLabel="Not enough credits"
onConfirmed={this.closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
</span>
);
}
2016-11-22 21:19:08 +01:00
});