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

Refactor and new features for Publish page

Browse source 
- Publish button no longer grayed out when form is incomplete
 - Now warns about individual missing fields using the new FormField
   component
 - Fixed relaying of error messages from daemon
 - New license URL field
 - License broken into two sub-fields (.license.name, .license.url)
This commit is contained in:
Alex Liebowitz 2016-07-26 06:09:09 -04:00
parent e4f439c12c
commit 45840838b9
1 changed files with 59 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
js/page/publish.js
View file

@ -1,4 +1,4 @@
var publishNumberInputStyle = { var publishNumberStyle = {
width: '50px', width: '50px',
}, publishFieldLabelStyle = { }, publishFieldLabelStyle = {
display: 'inline-block', display: 'inline-block',
@ -10,21 +10,47 @@ var publishNumberInputStyle = {
}; };
var PublishPage = React.createClass({ var PublishPage = React.createClass({
publish: function() { _requiredFields: ['name', 'file', 'meta_title', 'meta_author', 'meta_license', 'meta_description'],
handleSubmit: function() {
this.setState({ this.setState({
submitting: true, submitting: true,
}); });
var metadata = { var missingFieldFound = false;
title: this.refs.meta_title.value, for (let fieldName of this._requiredFields) {
author: this.refs.meta_author.value, var field = this.refs[fieldName];
description: this.refs.meta_description.value, if (field.getValue() == '') {
language: this.refs.meta_language.value, field.warnRequired();
license: this.refs.meta_license.value, if (!missingFieldFound) {
}; field.focus();
missingFieldFound = true;
}
}
}
if (this.refs.meta_thumbnail.value) { if (missingFieldFound) {
metadata.thumbnail = this.refs.meta_thumbnail.value; this.setState({
submitting: false,
});
//return;
}
var metadata = {};
for (let metaField of ['meta_title', 'meta_author', 'meta_description', 'meta_thumbnail',
'meta_language']) {
var value = this.refs[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 = this.refs.meta_license_url.getValue();
} }
var doPublish = () => { var doPublish = () => {
@ -34,7 +60,7 @@ var PublishPage = React.createClass({
bid: parseFloat(this.state.bid), bid: parseFloat(this.state.bid),
metadata: metadata, metadata: metadata,
}, (message) => { }, (message) => {
this.handlePublishSuccess(this.state.name, this.state.title); this.handlePublishSuccess();
this.setState({ this.setState({
submitting: false, submitting: false,
}); });
@ -76,8 +102,8 @@ var PublishPage = React.createClass({
submitting: false, submitting: false,
}; };
}, },
handlePublishSuccess: function(name, title) { handlePublishSuccess: function() {
alert(`Your file ${title} has been published to LBRY at the address lbry://${name}!\n\n` + alert(`Your file ${this.refs.meta_title.value} 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 should appear within a few minutes.`); `You will now be taken to your My Files page, where your newly published file should appear within a few minutes.`);
window.location = "?files"; window.location = "?files";
}, },
@ -200,12 +226,12 @@ var PublishPage = React.createClass({
} }
return ( return (
<main className="page"> <main className="page" ref="page">
<SubPageLogo /> <SubPageLogo />
<h1>Publish Content</h1> <h1>Publish Content</h1>
<section className="section-block"> <section className="section-block">
<h4>LBRY Name</h4> <h4>LBRY Name</h4>
lbry://<input type="text" ref="name" onChange={this.handleNameChange} /> lbry://<FormField type="text" ref="name" onChange={this.handleNameChange} />
{ {
(!this.state.name ? '' : (!this.state.name ? '' :
(this.state.nameResolved ? <em> This name is currently claimed for <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits</em> (this.state.nameResolved ? <em> This name is currently claimed for <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits</em>
@ -217,7 +243,7 @@ var PublishPage = React.createClass({
<section className="section-block"> <section className="section-block">
<h4>Choose File</h4> <h4>Choose File</h4>
<form> <form>
<input name="file" type="file" onChange={this.handleFileChange} /> <FormField name="file" ref="file" type="file" onChange={this.handleFileChange} />
{ !this.state.fileInfo ? '' : { !this.state.fileInfo ? '' :
(!this.state.tempFileReady ? <div> (!this.state.tempFileReady ? <div>
<progress {...progressOpts}></progress> <progress {...progressOpts}></progress>
@ -229,7 +255,7 @@ var PublishPage = React.createClass({
<section className="section-block"> <section className="section-block">
<h4>Bid Amount</h4> <h4>Bid Amount</h4>
Credits <input style={publishNumberInputStyle} type="text" onChange={this.handleBidChange} value={this.state.bid} placeholder={this.state.nameResolved ? lbry.formatCredits(this.state.claimValue + 10) : 100} /> Credits <FormField style={publishNumberStyle} type="text" onChange={this.handleBidChange} value={this.state.bid} placeholder={this.state.nameResolved ? lbry.formatCredits(this.state.claimValue + 10) : 100} />
{this.state.bid && isNaN(this.state.bid) ? <span className="warning"> Must be a number</span> : ''} {this.state.bid && isNaN(this.state.bid) ? <span className="warning"> Must be a number</span> : ''}
<div className="help">How much would you like to bid for this name? <div className="help">How much would you like to bid for this name?
{ !this.state.nameResolved ? <span> 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.</span> { !this.state.nameResolved ? <span> 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.</span>
@ -241,11 +267,11 @@ var PublishPage = React.createClass({
<h4>Fee</h4> <h4>Fee</h4>
<div className="spacer-bottom--sm"> <div className="spacer-bottom--sm">
<label> <label>
<input type="radio" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} /> No fee <FormField type="radio" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} /> No fee
</label> </label>
<label> <label>
<input type="radio" onChange={ () => { this.handleFeePrefChange(true) } } checked={this.state.isFee} /> { !this.state.isFee ? 'Choose fee...' : 'Fee (in LBRY credits) ' } <FormField type="radio" onChange={ () => { this.handleFeePrefChange(true) } } checked={this.state.isFee} /> { !this.state.isFee ? 'Choose fee...' : 'Fee (in LBRY credits) ' }
<input type="text" className={ this.state.isFee ? '' : 'hidden '} onChange={this.handleFeeChange} placeholder="5.5" style={publishNumberInputStyle} /> <FormField type="text" hidden={!this.state.isFee} onChange={this.handleFeeChange} placeholder="5.5" style={publishNumberStyle} />
{this.state.fee && isNaN(this.state.fee) ? <span className="warning"> Must be a number</span> : ''} {this.state.fee && isNaN(this.state.fee) ? <span className="warning"> Must be a number</span> : ''}
</label> </label>
</div> </div>
@ -256,10 +282,10 @@ var PublishPage = React.createClass({
<section className="section-block"> <section className="section-block">
<h4>Your Content</h4> <h4>Your Content</h4>
<label for="title">Title</label><input type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} /> <label htmlFor="title">Title</label><FormField type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} />
<label for="author">Author</label><input type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} /> <label htmlFor="author">Author</label><FormField type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} />
<label for="license">License info</label><input type="text" ref="meta_license" name="license" placeholder={'Copyright My Company, Inc. ' + (new Date().getFullYear()) + '.'} style={publishFieldStyle} /> <label htmlFor="license">License info</label><FormField type="text" ref="meta_license" name="license" defaultValue="Creative Commons Attribution 3.0 United States" style={publishFieldStyle} />
<label for="language">Language</label> <select ref="meta_language" name="language"> <label htmlFor="language">Language</label> <FormField type="select" ref="meta_language" name="language">
<option value="en" selected>English</option> <option value="en" selected>English</option>
<option value="zh">Chinese</option> <option value="zh">Chinese</option>
<option value="fr">French</option> <option value="fr">French</option>
@ -267,19 +293,22 @@ var PublishPage = React.createClass({
<option value="jp">Japanese</option> <option value="jp">Japanese</option>
<option value="ru">Russian</option> <option value="ru">Russian</option>
<option value="es">Spanish</option> <option value="es">Spanish</option>
</select> </FormField>
<label for="description">Description</label> <textarea ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle}></textarea> <label htmlFor="description">Description</label> <FormField type="textarea" ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle} />
</section> </section>
<section className="section-block"><h4>Additional Content Information (Optional)</h4> <section className="section-block">
<label for="meta_thumbnail">Thumbnail URL</label> <input type="text" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} /></section> <h4>Additional Content Information (Optional)</h4>
<label htmlFor="meta_thumbnail">Thumbnail URL</label> <FormField type="text" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} />
<label htmlFor="meta_license_url">License URL</label> <FormField type="text" ref="meta_license_url" name="license_url" defaultValue="https://creativecommons.org/licenses/by/3.0/us/legalcode" style={publishFieldStyle} />
</section>
<div className="footer-buttons"> <div className="footer-buttons">
<Link button="alt" href="/" label="Cancel"/> <Link button="alt" href="/" label="Cancel"/>
<Link button="primary" label="Publish" onClick={this.publish} disabled={!this.readyToPublish() || this.state.submitting} /> <Link button="primary" label="Publish" onClick={this.handleSubmit} disabled={this.state.submitting} />
</div> </div>
</main> </main>
); );