var publishNumberStyle = { width: '50px', }, publishFieldLabelStyle = { display: 'inline-block', width: '118px', textAlign: 'right', verticalAlign: 'top', }, publishFieldStyle = { width: '330px', }; var PublishPage = React.createClass({ _requiredFields: ['name', 'bid', 'meta_title', 'meta_author', 'meta_license', 'meta_description'], handleSubmit: function() { this.setState({ submitting: true, }); var checkFields = this._requiredFields.slice(); if (!this.state.nameIsMine) { checkFields.push('file'); } var missingFieldFound = false; for (let fieldName of checkFields) { var field = this.refs[fieldName]; if (field.getValue() === '') { field.warnRequired(); if (!missingFieldFound) { field.focus(); missingFieldFound = true; } } } if (missingFieldFound) { this.setState({ submitting: false, }); return; } if (this.state.nameIsMine) { // Pre-populate with existing metadata var metadata = Object.assign({}, this.state.claimMetadata); if (this.refs.file.getValue() !== '') { delete metadata.sources; } } else { var metadata = {}; } for (let metaField of ['title', 'author', 'description', 'thumbnail', 'license', 'license_url', 'language', 'nsfw']) { var value = this.refs['meta_' + metaField].getValue(); if (value !== '') { metadata[metaField] = value; } } /* metadata.license = {}; metadata.license.name = this.refs.meta_license.getValue(); var licenseUrl = this.refs.meta_license_url.getValue(); if (licenseUrl != '') { metadata.license.url = licenseUrl; } */ var 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, }; if (this.refs.file.getValue() !== '') { publishArgs.file_path = this._tempFilePath; } console.log(publishArgs); lbry.publish(publishArgs, (message) => { this.handlePublishSuccess(); this.setState({ submitting: false, }); }, (error) => { this.handlePublishError(error); this.setState({ submitting: false, }); }); }; if (this.state.isFee) { lbry.getNewAddress((address) => { metadata.fee = {}; metadata.fee[this.state.feeCurrency] = { amount: parseFloat(this.state.feeAmount), address: address, }; doPublish(); }); } else { doPublish(); } }, getInitialState: function() { this._tempFilePath = null; return { name: '', bid: '', feeAmount: '', feeCurrency: 'USD', nameResolved: false, nameIsMine: false, claimValue: 0.0, claimMetadata: null, fileInfo: null, uploadProgress: 0.0, uploaded: false, tempFileReady: false, submitting: false, }; }, handlePublishSuccess: function() { alert(`Your file ${this.refs.meta_title.getValue()} has been published to LBRY at the address lbry://${this.state.name}!\n\n` + `You will now be taken to your My Files page, where your newly published file will be listed. Your file will take a few minutes to appear for other LBRY users; until then it will be listed as "pending."`); window.location = "?files"; }, handlePublishError: function(error) { alert(`The following error occurred when attempting to publish your file:\n\n` + error.message); }, handleNameChange: function(event) { var rawName = event.target.value; if (!rawName) { this.setState({ name: '', nameResolved: false, }); return; } var name = lbry.formatName(rawName); lbry.resolveName(name, (info) => { if (name != lbry.formatName(this.refs.name.getValue())) { // A new name has been typed already, so bail return; } if (!info) { this.setState({ name: name, nameResolved: false, }); } else { lbry.getClaimInfo(name, (claimInfo) => { if (name != this.refs.name.getValue()) { return; } var newState = { name: name, nameResolved: true, nameIsMine: claimInfo.is_mine, claimValue: parseFloat(claimInfo.amount), claimMetadata: claimInfo.value, }; if (claimInfo.is_mine) { newState.bid = claimInfo.amount; } else if (this.state.nameIsMine && !claimInfo.name_is_mine) { // Just changed away from a name we control, so clear pre-fill newState.bid = ''; } this.setState(newState); }); } }); }, handleBidChange: function(event) { this.setState({ bid: event.target.value, }); }, handleFeeAmountChange: function(event) { this.setState({ feeAmount: event.target.value, }); }, handleFeeCurrencyChange: function(event) { this.setState({ feeCurrency: event.target.value, }); }, handleFileChange: function(event) { event.preventDefault(); var fileInput = event.target; this._tempFilePath = null; if (fileInput.files.length == 0) { // File was removed this.setState({ fileInfo: null, uploadProgress: 0.0, uploaded: false, tempFileReady: false, }); } else { var file = fileInput.files[0]; this.setState({ fileInfo: { name: file.name, size: file.size, }, uploadProgress: 0.0, uploaded: false, tempFileReady: false, }); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', (event) => { this.setState({ uploadProgress: (event.loaded / event.total), }); }); xhr.upload.addEventListener('load', (event) => { this.setState({ uploaded: true, }); }); xhr.addEventListener('load', (event) => { this._tempFilePath = JSON.parse(xhr.responseText); this.setState({ tempFileReady: true, }); }) xhr.open('POST', '/upload', true); xhr.send(new FormData(fileInput.form)); } }, handleFeePrefChange: function(feeEnabled) { this.setState({ isFee: feeEnabled }); }, componentDidMount: function() { document.title = "Publish"; }, componentDidUpdate: function() { if (this.state.fileInfo && !this.state.tempFileReady) { // A file was chosen but the daemon hasn't finished processing it yet, i.e. it's loading, so // we're displaying a progress bar and need a value for it. // React can't unset the "value" prop (to show an "indeterminate" bar) after it's already // been set, so we have to manage it manually. if (!this.state.uploaded) { // Still uploading this.refs.progress.setAttribute('value', this.state.uploadProgress); } else { // Fully uploaded and waiting for server to finish processing, so set progress bar to "indeterminite" this.refs.progress.removeAttribute('value'); } } }, render: function() { return (

LBRY Name

lbry:// { (!this.state.name ? '' : (! this.state.nameResolved ? The name {this.state.name} is available. : (this.state.nameIsMine ? You already control the name {this.state.name}. You can use this page to update your claim. : The name {this.state.name} is currently claimed for {lbry.formatCredits(this.state.claimValue)} credits.))) }
What LBRY name would you like to claim for this file?

Choose File

{ !this.state.fileInfo ? '' : (!this.state.tempFileReady ?
{!this.state.uploaded ? Importing file into LBRY... : Processing file...}
:
File ready for publishing!
) } { this.state.nameIsMine ?
If you don't choose a file, the file from your existing claim will be used.
: null }

Bid Amount

Credits
How much would you like to bid for this name? { !this.state.nameResolved ? Since this name is not currently resolved, you may bid as low as you want, but higher bids help prevent others from claiming your name. : (this.state.nameIsMine ? Your current bid is {lbry.formatCredits(this.state.claimValue)} credits. : You must bid over {lbry.formatCredits(this.state.claimValue)} credits to claim this name.) }

Fee

How much would you like to charge for this file?

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.

Your Content

Additional Content Information (Optional)

); } });