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

Add almost all remaining fields + visual fixes and refactoring

Browse source
This commit is contained in:
Alex Liebowitz 2016-07-20 02:25:22 -04:00
parent faca7f18d0
commit 5170222e2d
2 changed files with 165 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
js/lbry.js
View file

@ -162,11 +162,6 @@ lbry.publish = function(params, callback, errorCallback) {
});
}
lbry.publish = function(params, callback) {
// Use ES6 named arguments instead of directly passing param dict?
lbry.call('publish', params, callback);
}
lbry.getVersionInfo = function(callback) {
lbry.call('version', {}, callback);
};

186
js/page/publish.js
View file

@ -1,21 +1,51 @@
var publishBidAmountInputStyle = {
var publishNumberInputStyle = {
width: '50px',
}, publishFieldLabelStyle = {
display: 'inline-block',
width: '118px',
textAlign: 'right',
verticalAlign: 'top',
}, publishFieldStyle = {
width: '330px',
};
var PublishPage = React.createClass({
publish: function() {
var metadata = {
title: this.refs.meta_title.value,
author: this.refs.meta_author.value,
description: this.refs.meta_description.value,
language: this.refs.meta_language.value,
license: this.refs.meta_license.value,
};
if (this.refs.meta_thumbnail.value) {
metadata.thumbnail = this.refs.meta_thumbnail.value;
}
if (this.state.isFee) {
metadata.fee = parseFloat(this.state.fee);
}
lbry.publish({
name: this.state.name,
file_path: this.state.filePath,
file_path: this._tempFilePath,
bid: parseFloat(this.state.bid),
metadata: metadata,
});
},
getInitialState: function() {
this._tempFilePath = null;
return {
name: '',
nameResolved: false,
bid: '',
claimValue: 0,
nameResolved: false,
claimValue: 0.0,
fileInfo: null,
uploadProgress: 0.0,
uploaded: false,
tempFileReady: false,
};
},
handleNameChange: function(event) {
@ -25,7 +55,7 @@ var PublishPage = React.createClass({
this.setState({
name: '',
nameResolved: false,
})
});
return;
}
@ -34,7 +64,7 @@ var PublishPage = React.createClass({
if (!info) {
this.setState({
name: name,
nameResolved: false
nameResolved: false,
});
} else {
lbry.search(name, (results) => {
@ -49,22 +79,89 @@ var PublishPage = React.createClass({
}
});
},
handleFileChange: function(event) {
var filePath = event.target.value;
this.setState({
filePath: (filePath[0] == '/' ? filePath : ('~/Desktop/' + filePath))
});
},
handleBidChange: function(event) {
this.setState({
bid: event.target.value
bid: event.target.value,
});
},
handleFeeChange: function(event) {
this.setState({
fee: 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
});
},
readyToPublish: function() {
var bidFloat = parseFloat(this.state.bid.value);
return (this.state.name && this.state.filePath && !isNaN(bidFloat) && bidFloat > this.state.claimValue);
var bidFloat = parseFloat(this.state.bid);
return (this.state.name && this.state.fileInfo && !isNaN(bidFloat) && (!this.state.claimValue || bidFloat > this.state.claimValue));
},
render: 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 need a value for the progress bar.
if (!this.state.uploaded) {
// Still uploading
var progressOpts = {
value: this.state.uploadProgress,
};
} else {
// Fully uploaded and waiting for server to finish processing, so set progress bar to "indeterminite"
var progressOpts = {};
}
}
return (
<main className="page">
<SubPageLogo />
@ -82,20 +179,67 @@ var PublishPage = React.createClass({
<section>
<h4>Choose file</h4>
<div className="help">Please enter the path of the file you would like to publish on LBRY. (You may also put the file on your desktop and enter just the file name.)</div>
<input type="text" name="path" onChange={this.handleFileChange} />
<form>
<input name="file" type="file" onChange={this.handleFileChange} />
{ !this.state.fileInfo ? '' :
(!this.state.tempFileReady ? <div>
<progress {...progressOpts}></progress>
{!this.state.uploaded ? <span> Importing file into LBRY...</span> : <span> Processing file...</span>}
</div>
: <div>File ready for publishing!</div>) }
</form>
</section>
<section>
<h4>Bid amount</h4>
<div className="help">How much would you like to bid for this name?
<section 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>
: <span> You must bid over <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits to claim this name.</span> }
</div>
Credits: <input style={publishBidAmountInputStyle} type="text" onChange={this.handleBidChange} value={!this.state.name ? '' : this.state.bid} />
</section>
Credits <input style={publishNumberInputStyle} 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> : ''}
</section>
{ /* Many more options here ... */ }
<section>
<h4>Fee</h4>
<section className="help">How much would you like to charge for this file? </section>
<label style={settingsRadioOptionStyles}>
<input type="radio" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} /> No fee
</label>
<label style={settingsRadioOptionStyles}>
<input type="radio" onChange={ () => { this.handleFeePrefChange(true) } } checked={this.state.isFee} /> { !this.state.isFee ? 'Choose fee...' : 'Fee (in LBRY credits) ' }
<input className={ this.state.isFee ? '' : 'hidden '} onChange={this.handleFeeChange} placeholder="5.5" style={publishNumberInputStyle} />
{this.state.fee && isNaN(this.state.fee) ? <span className="warning"> Must be a number</span> : ''}
</label>
</section>
<section>
<h4>Your content</h4>
<section><label for="title" style={publishFieldLabelStyle}>Title</label> <input ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} /></section>
<section><label for="author" style={publishFieldLabelStyle}>Author</label> <input ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} /></section>
<section><label for="license" style={publishFieldLabelStyle}>License info</label> <input ref="meta_license" name="license" placeholder={'Copyright My Company, Inc. ' + (new Date().getFullYear()) + '.'} style={publishFieldStyle} /></section>
<section>
<label for="language" style={publishFieldLabelStyle}>Language</label> <select ref="meta_language" name="language">
<option value="en" selected>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>
</select>
</section>
<section>
<label for="description" style={publishFieldLabelStyle}>Description</label> <textarea ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle}></textarea>
</section>
</section>
<h4>Additional content information (optional)</h4>
<section><label for="meta_thumbnail" style={publishFieldLabelStyle}>Thumbnail URL</label> <input ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} /></section>
<section>
<Link button="primary" label="Publish" onClick={this.publish} disabled={!this.readyToPublish()} />