lbry-desktop/ui/js/page/publish/view.jsx

591 lines
21 KiB
React
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
2017-05-02 10:21:00 +02:00
import lbry from 'lbry';
import lbryuri from 'lbryuri'
2017-05-02 10:21:00 +02:00
import {FormField, FormRow} from 'component/form.js';
2017-04-07 07:15:22 +02:00
import Link from 'component/link';
2017-05-02 10:21:00 +02:00
import rewards from 'rewards';
import Modal from 'component/modal';
2016-11-22 21:19:08 +01:00
2017-05-17 10:10:25 +02:00
class PublishPage extends React.Component {
constructor(props) {
super(props);
2017-05-17 10:10:25 +02:00
this._requiredFields = ['meta_title', 'name', 'bid', 'tos_agree'];
this.state = {
channels: null,
rawName: '',
name: '',
bid: 10,
hasFile: false,
feeAmount: '',
feeCurrency: 'USD',
channel: 'anonymous',
newChannelName: '@',
newChannelBid: 10,
nameResolved: null,
myClaimExists: null,
topClaimValue: 0.0,
myClaimValue: 0.0,
myClaimMetadata: null,
copyrightNotice: '',
otherLicenseDescription: '',
otherLicenseUrl: '',
uploadProgress: 0.0,
uploaded: false,
errorMessage: null,
submitting: false,
creatingChannel: false,
modal: null,
};
}
_updateChannelList(channel) {
// Calls API to update displayed list of channels. If a channel name is provided, will select
// that channel at the same time (used immediately after creating a channel)
lbry.channel_list_mine().then((channels) => {
rewards.claimReward(rewards.TYPE_FIRST_CHANNEL).then(() => {}, () => {})
this.setState({
channels: channels,
... channel ? {channel} : {}
});
});
2017-05-17 10:10:25 +02:00
}
handleSubmit(event) {
2016-10-19 08:36:42 +02:00
if (typeof event !== 'undefined') {
event.preventDefault();
}
this.setState({
submitting: true,
});
2017-04-12 16:55:19 +02:00
let checkFields = this._requiredFields;
if (!this.state.myClaimExists) {
2017-04-12 16:55:19 +02:00
checkFields.unshift('file');
}
2017-04-12 16:55:19 +02:00
let missingFieldFound = false;
for (let fieldName of checkFields) {
2017-04-12 16:55:19 +02:00
const field = this.refs[fieldName];
if (field) {
if (field.getValue() === '' || field.getValue() === false) {
field.showRequiredError();
if (!missingFieldFound) {
field.focus();
missingFieldFound = true;
}
} else {
field.clearError();
}
}
}
if (missingFieldFound) {
this.setState({
submitting: false,
});
return;
}
if (this.state.nameIsMine) {
// Pre-populate with existing metadata
var metadata = Object.assign({}, this.state.myClaimMetadata);
if (this.refs.file.getValue() !== '') {
delete metadata.sources;
}
} else {
var metadata = {};
}
for (let metaField of ['title', 'description', 'thumbnail', 'license', 'license_url', 'language']) {
var value = this.refs['meta_' + metaField].getValue();
if (value !== '') {
metadata[metaField] = value;
}
}
2017-05-23 21:51:47 +02:00
metadata.nsfw = parseInt(this.refs.meta_nsfw.getValue()) === 1;
const licenseUrl = this.refs.meta_license_url.getValue();
if (licenseUrl) {
metadata.license_url = licenseUrl;
}
var doPublish = () => {
var publishArgs = {
name: this.state.name,
bid: parseFloat(this.state.bid),
metadata: metadata,
... this.state.channel != 'new' && this.state.channel != 'anonymous' ? {channel_name: this.state.channel} : {},
};
if (this.refs.file.getValue() !== '') {
2017-04-12 18:59:43 +02:00
publishArgs.file_path = this.refs.file.getValue();
}
2017-04-10 14:32:40 +02:00
lbry.publish(publishArgs, (message) => {
this.handlePublishStarted();
}, null, (error) => {
this.handlePublishError(error);
});
};
if (this.state.isFee) {
lbry.wallet_unused_address().then((address) => {
metadata.fee = {};
metadata.fee[this.state.feeCurrency] = {
amount: parseFloat(this.state.feeAmount),
address: address,
};
doPublish();
});
} else {
doPublish();
}
2017-05-17 10:10:25 +02:00
}
handlePublishStarted() {
this.setState({
modal: 'publishStarted',
});
2017-05-17 10:10:25 +02:00
}
handlePublishStartedConfirmed() {
2017-05-06 18:31:47 +02:00
this.props.navigate('/published')
2017-05-17 10:10:25 +02:00
}
handlePublishError(error) {
this.setState({
submitting: false,
modal: 'error',
errorMessage: error.message,
});
2017-05-17 10:10:25 +02:00
}
handleNameChange(event) {
var rawName = event.target.value;
2016-07-15 14:04:47 +02:00
if (!rawName) {
2016-07-15 14:04:47 +02:00
this.setState({
rawName: '',
2016-07-15 14:04:47 +02:00
name: '',
nameResolved: false,
});
2016-07-15 14:04:47 +02:00
return;
}
if (!lbryuri.isValidName(rawName, false)) {
2017-04-09 17:06:23 +02:00
this.refs.name.showError('LBRY names must contain only letters, numbers and dashes.');
return;
}
const name = rawName.toLowerCase();
this.setState({
rawName: rawName,
name: name,
nameResolved: null,
myClaimExists: null,
});
const myClaimInfo = Object.values(this.props.myClaims).find(claim => claim.name === name)
this.setState({
myClaimExists: !!myClaimInfo,
});
lbry.resolve({uri: name}).then((claimInfo) => {
if (name != this.state.name) {
return;
}
if (!claimInfo) {
2017-04-11 06:12:34 +02:00
this.setState({
nameResolved: false,
2016-07-15 14:04:47 +02:00
});
} else {
const topClaimIsMine = myClaimInfo && myClaimInfo.amount >= claimInfo.amount;
const newState = {
nameResolved: true,
topClaimValue: parseFloat(claimInfo.amount),
myClaimExists: !!myClaimInfo,
myClaimValue: myClaimInfo ? parseFloat(myClaimInfo.amount) : null,
myClaimMetadata: myClaimInfo ? myClaimInfo.value : null,
topClaimIsMine: topClaimIsMine,
};
if (topClaimIsMine) {
newState.bid = myClaimInfo.amount;
} else if (this.state.myClaimMetadata) {
// Just changed away from a name we have a claim on, so clear pre-fill
newState.bid = '';
}
this.setState(newState);
}
}, () => { // Assume an error means the name is available
this.setState({
name: name,
nameResolved: false,
myClaimExists: false,
2017-04-11 03:45:41 +02:00
});
2016-07-15 14:04:47 +02:00
});
2017-05-17 10:10:25 +02:00
}
handleBidChange(event) {
2016-07-15 14:04:47 +02:00
this.setState({
bid: event.target.value,
2016-07-15 14:04:47 +02:00
});
2017-05-17 10:10:25 +02:00
}
handleFeeAmountChange(event) {
2016-07-15 14:04:47 +02:00
this.setState({
feeAmount: event.target.value,
});
2017-05-17 10:10:25 +02:00
}
handleFeeCurrencyChange(event) {
this.setState({
feeCurrency: event.target.value,
});
2017-05-17 10:10:25 +02:00
}
handleFeePrefChange(feeEnabled) {
this.setState({
isFee: feeEnabled
2016-07-15 14:04:47 +02:00
});
2017-05-17 10:10:25 +02:00
}
handleLicenseChange(event) {
2016-09-20 12:40:24 +02:00
var licenseType = event.target.options[event.target.selectedIndex].getAttribute('data-license-type');
var newState = {
copyrightChosen: licenseType == 'copyright',
otherLicenseChosen: licenseType == 'other',
};
if (licenseType == 'copyright') {
2017-04-10 20:12:07 +02:00
newState.copyrightNotice = 'All rights reserved.'
2016-09-20 12:40:24 +02:00
}
this.setState(newState);
2017-05-17 10:10:25 +02:00
}
handleCopyrightNoticeChange(event) {
2016-09-20 12:40:24 +02:00
this.setState({
copyrightNotice: event.target.value,
});
2017-05-17 10:10:25 +02:00
}
handleOtherLicenseDescriptionChange(event) {
2016-09-20 12:40:24 +02:00
this.setState({
otherLicenseDescription: event.target.value,
});
2017-05-17 10:10:25 +02:00
}
handleOtherLicenseUrlChange(event) {
2016-09-20 12:40:24 +02:00
this.setState({
otherLicenseUrl: event.target.value,
});
2017-05-17 10:10:25 +02:00
}
handleChannelChange(event) {
const channel = event.target.value;
this.setState({
channel: channel,
});
2017-05-17 10:10:25 +02:00
}
handleNewChannelNameChange(event) {
const newChannelName = (event.target.value.startsWith('@') ? event.target.value : '@' + event.target.value);
if (newChannelName.length > 1 && !lbryuri.isValidName(newChannelName.substr(1), false)) {
2017-04-10 20:12:07 +02:00
this.refs.newChannelName.showError('LBRY channel names must contain only letters, numbers and dashes.');
return;
2017-04-12 16:55:19 +02:00
} else {
this.refs.newChannelName.clearError()
}
this.setState({
newChannelName: newChannelName,
});
2017-05-17 10:10:25 +02:00
}
handleNewChannelBidChange(event) {
this.setState({
newChannelBid: event.target.value,
});
2017-05-17 10:10:25 +02:00
}
handleTOSChange(event) {
this.setState({
TOSAgreed: event.target.checked,
});
2017-05-17 10:10:25 +02:00
}
handleCreateChannelClick(event) {
if (this.state.newChannelName.length < 5) {
2017-04-10 20:12:07 +02:00
this.refs.newChannelName.showError('LBRY channel names must be at least 4 characters in length.');
return;
}
this.setState({
creatingChannel: true,
});
const newChannelName = this.state.newChannelName;
lbry.channel_new({channel_name: newChannelName, amount: parseInt(this.state.newChannelBid)}).then(() => {
setTimeout(() => {
this.setState({
creatingChannel: false,
});
this._updateChannelList(newChannelName);
}, 5000);
}, (error) => {
// TODO: better error handling
2017-04-10 20:12:07 +02:00
this.refs.newChannelName.showError('Unable to create channel due to an internal error.');
this.setState({
creatingChannel: false,
});
});
2017-05-17 10:10:25 +02:00
}
getLicenseUrl() {
2016-09-20 12:40:24 +02:00
if (!this.refs.meta_license) {
return '';
} else if (this.state.otherLicenseChosen) {
return this.state.otherLicenseUrl;
} else {
return this.refs.meta_license.getSelectedElement().getAttribute('data-url') || '' ;
2016-09-20 12:40:24 +02:00
}
2017-05-17 10:10:25 +02:00
}
componentWillMount() {
this._updateChannelList();
2017-05-17 10:10:25 +02:00
}
onFileChange() {
2017-04-10 20:12:07 +02:00
if (this.refs.file.getValue()) {
this.setState({ hasFile: true })
} else {
this.setState({ hasFile: false })
}
2017-05-17 10:10:25 +02:00
}
getNameBidHelpText() {
2017-04-10 20:12:07 +02:00
if (!this.state.name) {
return "Select a URL for this publish.";
} else if (this.state.nameResolved === false) {
2017-04-10 20:12:07 +02:00
return "This URL is unused.";
} else if (this.state.myClaimExists) {
return "You have already used this URL. Publishing to it again will update your previous publish."
} else if (this.state.topClaimValue) {
2017-04-12 16:55:19 +02:00
return <span>A deposit of at least <strong>{this.state.topClaimValue}</strong> {this.state.topClaimValue == 1 ? 'credit ' : 'credits '}
is required to win <strong>{this.state.name}</strong>. However, you can still get a permanent URL for any amount.</span>
2017-04-10 20:12:07 +02:00
} else {
return '';
}
2017-05-17 10:10:25 +02:00
}
closeModal() {
2017-04-12 16:55:19 +02:00
this.setState({
modal: null,
});
2017-05-17 10:10:25 +02:00
}
render() {
if (this.state.channels === null) {
return null;
}
2017-04-12 16:55:19 +02:00
const lbcInputHelp = "This LBC remains yours and the deposit can be undone at any time."
2016-05-23 17:14:21 +02:00
return (
<main className="main--single-column">
<form onSubmit={(event) => { this.handleSubmit(event) }}>
<section className="card">
2017-04-10 14:32:40 +02:00
<div className="card__title-primary">
2017-04-10 20:12:07 +02:00
<h4>Content</h4>
<div className="card__subtitle">
What are you publishing?
</div>
2017-04-10 14:32:40 +02:00
</div>
<div className="card__content">
<FormRow name="file" label="File" ref="file" type="file" onChange={(event) => { this.onFileChange(event) }}
2017-04-10 20:12:07 +02:00
helper={this.state.myClaimExists ? "If you don't choose a file, the file from your existing claim will be used." : null}/>
</div>
2017-04-10 20:12:07 +02:00
{ !this.state.hasFile ? '' :
2017-04-12 16:55:19 +02:00
<div>
<div className="card__content">
2017-04-12 18:59:43 +02:00
<FormRow label="Title" type="text" ref="meta_title" name="title" placeholder="Titular Title" />
2017-04-12 16:55:19 +02:00
</div>
2017-04-10 20:12:07 +02:00
<div className="card__content">
2017-04-12 18:59:43 +02:00
<FormRow type="text" label="Thumbnail URL" ref="meta_thumbnail" name="thumbnail" placeholder="http://spee.ch/mylogo" />
2017-04-12 16:55:19 +02:00
</div>
<div className="card__content">
2017-04-10 20:12:07 +02:00
<FormRow label="Description" type="textarea" ref="meta_description" name="description" placeholder="Description of your content" />
2017-04-12 16:55:19 +02:00
</div>
<div className="card__content">
2017-04-10 20:12:07 +02:00
<FormRow label="Language" type="select" defaultValue="en" ref="meta_language" name="language">
<option value="en">English</option>
<option value="zh">Chinese</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="jp">Japanese</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
</FormRow>
2017-04-12 16:55:19 +02:00
</div>
<div className="card__content">
2017-04-10 20:12:07 +02:00
<FormRow type="select" label="Maturity" defaultValue="en" ref="meta_nsfw" name="nsfw">
{/* <option value=""></option> */}
2017-04-10 20:12:07 +02:00
<option value="0">All Ages</option>
<option value="1">Adults Only</option>
</FormRow>
2017-04-12 16:55:19 +02:00
</div>
</div>}
</section>
2016-05-23 17:14:21 +02:00
<section className="card">
2017-04-10 20:12:07 +02:00
<div className="card__title-primary">
<h4>Access</h4>
<div className="card__subtitle">
How much does this content cost?
2017-04-10 20:12:07 +02:00
</div>
</div>
2017-04-10 14:32:40 +02:00
<div className="card__content">
2017-04-10 20:12:07 +02:00
<div className="form-row__label-row">
<label className="form-row__label">Price</label>
</div>
2017-04-12 16:55:19 +02:00
<FormRow label="Free" type="radio" name="isFree" value="1" onChange={ () => { this.handleFeePrefChange(false) } } defaultChecked={!this.state.isFee} />
2017-04-10 20:12:07 +02:00
<FormField type="radio" name="isFree" label={!this.state.isFee ? 'Choose price...' : 'Price ' }
2017-04-12 16:55:19 +02:00
onChange={ () => { this.handleFeePrefChange(true) } } defaultChecked={this.state.isFee} />
2017-04-10 20:12:07 +02:00
<span className={!this.state.isFee ? 'hidden' : ''}>
<FormField type="number" className="form-field__input--inline" step="0.01" placeholder="1.00" onChange={(event) => this.handleFeeAmountChange(event)} /> <FormField type="select" onChange={(event) => { this.handleFeeCurrencyChange(event) }}>
2017-04-10 20:12:07 +02:00
<option value="USD">US Dollars</option>
<option value="LBC">LBRY credits</option>
</FormField>
</span>
{ this.state.isFee ?
2017-04-12 16:55:19 +02:00
<div className="form-field__helper">
2017-04-10 20:12:07 +02:00
If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.
</div> : '' }
<FormRow label="License" type="select" ref="meta_license" name="license" onChange={(event) => { this.handleLicenseChange(event) }}>
2017-04-12 16:55:19 +02:00
<option></option>
<option>Public Domain</option>
2017-04-10 20:12:07 +02:00
<option data-url="https://creativecommons.org/licenses/by/4.0/legalcode">Creative Commons Attribution 4.0 International</option>
<option data-url="https://creativecommons.org/licenses/by-sa/4.0/legalcode">Creative Commons Attribution-ShareAlike 4.0 International</option>
<option data-url="https://creativecommons.org/licenses/by-nd/4.0/legalcode">Creative Commons Attribution-NoDerivatives 4.0 International</option>
<option data-url="https://creativecommons.org/licenses/by-nc/4.0/legalcode">Creative Commons Attribution-NonCommercial 4.0 International</option>
<option data-url="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
<option data-url="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
<option data-license-type="copyright" {... this.state.copyrightChosen ? {value: this.state.copyrightNotice} : {}}>Copyrighted...</option>
<option data-license-type="other" {... this.state.otherLicenseChosen ? {value: this.state.otherLicenseDescription} : {}}>Other...</option>
</FormRow>
<FormField type="hidden" ref="meta_license_url" name="license_url" value={this.getLicenseUrl()} />
{this.state.copyrightChosen
? <FormRow label="Copyright notice" type="text" name="copyright-notice"
value={this.state.copyrightNotice} onChange={(event) => { this.handleCopyrightNoticeChange(event) }} />
2017-04-10 20:12:07 +02:00
: null}
{this.state.otherLicenseChosen ?
<FormRow label="License description" type="text" name="other-license-description" onChange={(event) => { this.handleOtherLicenseDescriptionChange() }} />
2017-04-10 20:12:07 +02:00
: null}
{this.state.otherLicenseChosen ?
<FormRow label="License URL" type="text" name="other-license-url" onChange={(event) => { this.handleOtherLicenseUrlChange(event) }} />
2017-04-10 20:12:07 +02:00
: null}
2016-08-08 05:31:21 +02:00
</div>
</section>
<section className="card">
2017-04-10 20:12:07 +02:00
<div className="card__title-primary">
<h4>Identity</h4>
<div className="card__subtitle">
Who created this content?
</div>
2016-08-08 05:31:21 +02:00
</div>
2017-04-10 20:12:07 +02:00
<div className="card__content">
<FormRow type="select" tabIndex="1" onChange={(event) => { this.handleChannelChange(event) }} value={this.state.channel}>
2017-04-10 20:12:07 +02:00
<option key="anonymous" value="anonymous">Anonymous</option>
{this.state.channels.map(({name}) => <option key={name} value={name}>{name}</option>)}
<option key="new" value="new">New identity...</option>
</FormRow>
</div>
2017-04-10 20:12:07 +02:00
{this.state.channel == 'new' ?
<div className="card__content">
<FormRow label="Name" type="text" onChange={(event) => { this.handleNewChannelNameChange(event) }} ref={newChannelName => { this.refs.newChannelName = newChannelName }}
2017-04-10 20:12:07 +02:00
value={this.state.newChannelName} />
2017-04-12 16:55:19 +02:00
<FormRow label="Deposit"
postfix="LBC"
step="0.01"
type="number"
helper={lbcInputHelp}
onChange={(event) => { this.handleNewChannelBidChange(event) }}
2017-04-12 18:59:43 +02:00
value={this.state.newChannelBid} />
2017-04-10 20:12:07 +02:00
<div className="form-row-submit">
<Link button="primary" label={!this.state.creatingChannel ? 'Create identity' : 'Creating identity...'} onClick={(event) => { this.handleCreateChannelClick(event) }} disabled={this.state.creatingChannel} />
2017-04-10 20:12:07 +02:00
</div>
</div>
: null}
</section>
2016-08-07 17:27:00 +02:00
<section className="card">
2017-04-10 20:12:07 +02:00
<div className="card__title-primary">
<h4>Address</h4>
2017-04-12 16:55:19 +02:00
<div className="card__subtitle">Where should this content permanently reside? <Link label="Read more" href="https://lbry.io/faq/naming" />.</div>
2017-04-10 20:12:07 +02:00
</div>
<div className="card__content">
<FormRow prefix="lbry://" type="text" ref="name" placeholder="myname" value={this.state.rawName} onChange={(event) => { this.handleNameChange(event) }}
2017-04-12 16:55:19 +02:00
helper={this.getNameBidHelpText()} />
</div>
2017-04-10 20:12:07 +02:00
{ this.state.rawName ?
<div className="card__content">
<FormRow ref="bid"
type="number"
step="0.01"
label="Deposit"
2017-04-12 16:55:19 +02:00
postfix="LBC"
onChange={(event) => { this.handleBidChange(event) }}
2017-04-12 18:59:43 +02:00
value={this.state.bid}
2017-04-10 20:12:07 +02:00
placeholder={this.state.nameResolved ? this.state.topClaimValue + 10 : 100}
2017-04-12 16:55:19 +02:00
helper={lbcInputHelp} />
2017-04-10 20:12:07 +02:00
</div> : '' }
</section>
2016-05-23 17:14:21 +02:00
<section className="card">
<div className="card__title-primary">
<h4>Terms of Service</h4>
</div>
<div className="card__content">
<FormRow label={
<span>I agree to the <Link href="https://www.lbry.io/termsofservice" label="LBRY terms of service" checked={this.state.TOSAgreed} /></span>
} type="checkbox" name="tos_agree" ref={(field) => { this.refs.tos_agree = field }} onChange={(event) => { this.handleTOSChange(event)}} />
</div>
</section>
<div className="card-series-submit">
<Link button="primary" label={!this.state.submitting ? 'Publish' : 'Publishing...'} onClick={(event) => { this.handleSubmit(event) }} disabled={this.state.submitting} />
2017-05-21 18:15:41 +02:00
<Link button="cancel" onClick={this.props.back} label="Cancel" />
<input type="submit" className="hidden" />
</div>
</form>
2017-01-13 23:05:09 +01:00
<Modal isOpen={this.state.modal == 'publishStarted'} contentLabel="File published"
onConfirmed={(event) => { this.handlePublishStartedConfirmed(event) }}>
<p>Your file has been published to LBRY at the address <code>lbry://{this.state.name}</code>!</p>
2017-04-17 14:27:39 +02:00
<p>The file will take a few minutes to appear for other LBRY users. Until then it will be listed as "pending" under your published files.</p>
</Modal>
2017-01-13 23:05:09 +01:00
<Modal isOpen={this.state.modal == 'error'} contentLabel="Error publishing file"
onConfirmed={(event) => { this.closeModal(event) }}>
The following error occurred when attempting to publish your file: {this.state.errorMessage}
</Modal>
</main>
2016-05-23 17:14:21 +02:00
);
}
2017-05-17 10:10:25 +02:00
}
2016-11-22 21:19:08 +01:00
export default PublishPage;