more
This commit is contained in:
Jeremy Kauffman
parent
cbb3da2795
commit
029b0b9c3a
10 changed files with 265 additions and 200 deletions
|
|
@ -157,7 +157,7 @@ export const AuthOverlay = React.createClass({
|
|||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
stage: "welcome",
|
||||
stage: "pending",
|
||||
stageProps: {}
|
||||
};
|
||||
},
|
||||
|
|
@ -167,36 +167,36 @@ export const AuthOverlay = React.createClass({
|
|||
});
|
||||
},
|
||||
componentWillMount: function() {
|
||||
// lbryio.authenticate().then(function(user) {
|
||||
// if (!user.HasVerifiedEmail) { //oops I fucked this up
|
||||
// this.setState({
|
||||
// stage: "email",
|
||||
// stageProps: {
|
||||
// onEmailSaved: function() {
|
||||
// this.setState({
|
||||
// stage: "confirm",
|
||||
// stageProps: {
|
||||
// onEmailConfirmed: function() { this.setState({ stage: "welcome"}) }.bind(this)
|
||||
// }
|
||||
// })
|
||||
// }.bind(this)
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// this.endAuth()
|
||||
// }
|
||||
// }.bind(this)).catch((err) => {
|
||||
// this.setState({
|
||||
// stage: "error",
|
||||
// stageProps: { errorText: err.message }
|
||||
// })
|
||||
// document.dispatchEvent(new CustomEvent('unhandledError', {
|
||||
// detail: {
|
||||
// message: err.message,
|
||||
// data: err.stack
|
||||
// }
|
||||
// }));
|
||||
// })
|
||||
lbryio.authenticate().then(function(user) {
|
||||
if (!user.HasVerifiedEmail) { //oops I fucked this up
|
||||
this.setState({
|
||||
stage: "email",
|
||||
stageProps: {
|
||||
onEmailSaved: function() {
|
||||
this.setState({
|
||||
stage: "confirm",
|
||||
stageProps: {
|
||||
onEmailConfirmed: function() { this.setState({ stage: "welcome"}) }.bind(this)
|
||||
}
|
||||
})
|
||||
}.bind(this)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.endAuth()
|
||||
}
|
||||
}.bind(this)).catch((err) => {
|
||||
this.setState({
|
||||
stage: "error",
|
||||
stageProps: { errorText: err.message }
|
||||
})
|
||||
document.dispatchEvent(new CustomEvent('unhandledError', {
|
||||
detail: {
|
||||
message: err.message,
|
||||
data: err.stack
|
||||
}
|
||||
}));
|
||||
})
|
||||
},
|
||||
render: function() {
|
||||
if (!this.state.stage || lbryio.user && lbryio.user.HasVerifiedEmail) {
|
||||
|
|
|
|||
|
|
@ -294,7 +294,7 @@ export let FileActions = React.createClass({
|
|||
? <FileActionsRow outpoint={this.props.outpoint} metadata={this.props.metadata} uri={this.props.uri}
|
||||
contentType={this.props.contentType} />
|
||||
: <div>
|
||||
<div className="button-set-item empty">This file is not currently available.</div>
|
||||
<div className="button-set-item empty">Content unavailable.</div>
|
||||
<ToolTip label="Why?"
|
||||
body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment."
|
||||
className="button-set-item" />
|
||||
|
|
|
|||
|
|
@ -140,6 +140,7 @@ export let FileTileStream = React.createClass({
|
|||
{ !this.props.hidePrice
|
||||
? <FilePrice uri={this.props.uri} />
|
||||
: null}
|
||||
<<<<<<< dd3f3ec4d00066633b136925111bae7193b3c6a8
|
||||
<div className="card__title-primary">
|
||||
<div className="meta"><a href={'?show=' + this.props.uri}>{lbryUri}</a></div>
|
||||
<h3>
|
||||
|
|
@ -159,9 +160,25 @@ export let FileTileStream = React.createClass({
|
|||
{isConfirmed
|
||||
? metadata.description
|
||||
: <span className="empty">This file is pending confirmation.</span>}
|
||||
=======
|
||||
<div className="meta"><a href={'?show=' + this.props.uri}>{'lbry://' + this.props.uri}</a></div>
|
||||
<h3 className="file-tile__title">
|
||||
<a href={'?show=' + this.props.uri}>
|
||||
<TruncatedText lines={1}>
|
||||
{title}
|
||||
>>>>>>> more
|
||||
</TruncatedText>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</h3>
|
||||
<ChannelIndicator uri={this.props.uri} claimInfo={this.props.claimInfo} />
|
||||
<FileActions uri={this.props.uri} outpoint={this.props.outpoint} metadata={metadata} contentType={this._contentType} />
|
||||
<p className="file-tile__description">
|
||||
<TruncatedText lines={3}>
|
||||
{isConfirmed
|
||||
? metadata.description
|
||||
: <span className="empty">This file is pending confirmation.</span>}
|
||||
</TruncatedText>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.showNsfwHelp
|
||||
|
|
@ -180,9 +197,12 @@ export let FileTileStream = React.createClass({
|
|||
export let FileCardStream = React.createClass({
|
||||
_fileInfoSubscribeId: null,
|
||||
_isMounted: null,
|
||||
_metadata: null,
|
||||
|
||||
|
||||
propTypes: {
|
||||
metadata: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]),
|
||||
uri: React.PropTypes.string,
|
||||
claimInfo: React.PropTypes.object,
|
||||
outpoint: React.PropTypes.string,
|
||||
hideOnRemove: React.PropTypes.bool,
|
||||
hidePrice: React.PropTypes.bool,
|
||||
|
|
@ -207,6 +227,11 @@ export let FileCardStream = React.createClass({
|
|||
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
|
||||
}
|
||||
},
|
||||
componentWillMount: function() {
|
||||
const {value: {stream: {metadata, source: {contentType}}}} = this.props.claimInfo;
|
||||
this._metadata = metadata;
|
||||
this._contentType = contentType;
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
if (this._fileInfoSubscribeId) {
|
||||
lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId);
|
||||
|
|
@ -220,7 +245,7 @@ export let FileCardStream = React.createClass({
|
|||
}
|
||||
},
|
||||
handleMouseOver: function() {
|
||||
if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) {
|
||||
if (this.props.obscureNsfw && this.props.metadata && this._metadata.nsfw) {
|
||||
this.setState({
|
||||
showNsfwHelp: true,
|
||||
});
|
||||
|
|
@ -238,11 +263,16 @@ export let FileCardStream = React.createClass({
|
|||
return null;
|
||||
}
|
||||
|
||||
<<<<<<< dd3f3ec4d00066633b136925111bae7193b3c6a8
|
||||
const lbryUri = uri.normalizeLbryUri(this.props.uri);
|
||||
const metadata = this.props.metadata;
|
||||
=======
|
||||
const metadata = this._metadata;
|
||||
>>>>>>> more
|
||||
const isConfirmed = typeof metadata == 'object';
|
||||
const title = isConfirmed ? metadata.title : lbryUri;
|
||||
const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
|
||||
console.log(this.props);
|
||||
return (
|
||||
<section className={ 'card card--small ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
|
||||
<div className="card__inner">
|
||||
|
|
@ -254,10 +284,15 @@ export let FileCardStream = React.createClass({
|
|||
</TruncatedText>
|
||||
</a>
|
||||
</h4>
|
||||
<<<<<<< dd3f3ec4d00066633b136925111bae7193b3c6a8
|
||||
<div className="card__subtitle"><a href={'?show=' + lbryUri}>{lbryUri}</a></div></div>
|
||||
<ChannelIndicator uri={lbryUri} metadata={metadata} contentType={this.props.contentType}
|
||||
hasSignature={this.props.hasSignature} signatureIsValid={this.props.signatureIsValid} />
|
||||
|
||||
=======
|
||||
<ChannelIndicator uri={this.props.uri} claimInfo={this.props.claimInfo} />
|
||||
</div>
|
||||
>>>>>>> more
|
||||
<div className="card__media">
|
||||
<a href={'?show=' + this.props.uri}><Thumbnail src={metadata.thumbnail} alt={'Photo for ' + (title || this.props.uri)} /></a>
|
||||
</div>
|
||||
|
|
@ -325,7 +360,11 @@ export let FileTile = React.createClass({
|
|||
|
||||
const {txid, nout, has_signature, signature_is_valid,
|
||||
value: {stream: {metadata, source: {contentType}}}} = this.state.claimInfo;
|
||||
return <FileTileStream outpoint={txid + ':' + nout} metadata={metadata} contentType={contentType}
|
||||
hasSignature={has_signature} signatureIsValid={signature_is_valid} {... this.props} />;
|
||||
return
|
||||
return this.props.displayStyle == 'card' ?
|
||||
<FileCardStream outpoint={txid + ':' + nout} metadata={metadata} contentType={contentType}
|
||||
hasSignature={has_signature} signatureIsValid={signature_is_valid} {... this.props}/> :
|
||||
<FileTileStream outpoint={txid + ':' + nout} metadata={metadata} contentType={contentType}
|
||||
hasSignature={has_signature} signatureIsValid={signature_is_valid} {... this.props} />;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export let FormField = React.createClass({
|
|||
if (this.props.type == 'checkbox') {
|
||||
return this.refs.field.checked;
|
||||
} else if (this.props.type == 'file') {
|
||||
return this.refs.field.files[0].path;
|
||||
return this.refs.field.files.length && this.refs.field.files[0].path;
|
||||
} else {
|
||||
return this.refs.field.value;
|
||||
}
|
||||
|
|
@ -121,6 +121,9 @@ export let FormRow = React.createClass({
|
|||
getValue: function() {
|
||||
return this.refs.field.getValue();
|
||||
},
|
||||
getSelectedElement: function() {
|
||||
return this.refs.field.getSelectedElement();
|
||||
},
|
||||
render: function() {
|
||||
const fieldProps = Object.assign({}, this.props),
|
||||
elementId = formFieldId(),
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@ lbryio.call = function(resource, action, params={}, method='get') {
|
|||
}));
|
||||
}
|
||||
} else {
|
||||
console.info(`${resource}.${action} response data:`, response);
|
||||
resolve(response.data);
|
||||
}
|
||||
});
|
||||
|
|
@ -75,11 +74,9 @@ lbryio.call = function(resource, action, params={}, method='get') {
|
|||
const fullParams = {app_id: lbryio._accessToken, ...params};
|
||||
|
||||
if (method == 'get') {
|
||||
console.info('GET ', CONNECTION_STRING + resource + '/' + action, ' | params:', fullParams);
|
||||
xhr.open('get', CONNECTION_STRING + resource + '/' + action + '?' + querystring.stringify(fullParams), true);
|
||||
xhr.send();
|
||||
} else if (method == 'post') {
|
||||
console.info('POST ', CONNECTION_STRING + resource + '/' + action, '| params: ', fullParams);
|
||||
xhr.open('post', CONNECTION_STRING + resource + '/' + action, true);
|
||||
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
xhr.send(querystring.stringify(fullParams));
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import {Link} from '../component/link.js';
|
|||
import Modal from '../component/modal.js';
|
||||
|
||||
var PublishPage = React.createClass({
|
||||
_requiredFields: ['name', 'bid', 'meta_title', 'meta_author', 'meta_license', 'meta_description'],
|
||||
_requiredFields: ['name', 'bid', 'meta_title'],
|
||||
|
||||
_updateChannelList: function(channel) {
|
||||
// Calls API to update displayed list of channels. If a channel name is provided, will select
|
||||
|
|
@ -85,7 +85,9 @@ var PublishPage = React.createClass({
|
|||
publishArgs.file_path = this.refs.file.getValue();
|
||||
}
|
||||
|
||||
console.log(publishArgs);
|
||||
lbry.publish(publishArgs, (message) => {
|
||||
console.log(message);
|
||||
this.handlePublishStarted();
|
||||
}, null, (error) => {
|
||||
this.handlePublishError(error);
|
||||
|
|
@ -112,6 +114,7 @@ var PublishPage = React.createClass({
|
|||
rawName: '',
|
||||
name: '',
|
||||
bid: '',
|
||||
hasFile: false,
|
||||
feeAmount: '',
|
||||
feeCurrency: 'USD',
|
||||
channel: 'anonymous',
|
||||
|
|
@ -237,7 +240,7 @@ var PublishPage = React.createClass({
|
|||
isFee: feeEnabled
|
||||
});
|
||||
},
|
||||
handeLicenseChange: function(event) {
|
||||
handleLicenseChange: function(event) {
|
||||
var licenseType = event.target.options[event.target.selectedIndex].getAttribute('data-license-type');
|
||||
var newState = {
|
||||
copyrightChosen: licenseType == 'copyright',
|
||||
|
|
@ -245,8 +248,7 @@ var PublishPage = React.createClass({
|
|||
};
|
||||
|
||||
if (licenseType == 'copyright') {
|
||||
var author = this.refs.meta_author.getValue();
|
||||
newState.copyrightNotice = 'Copyright ' + (new Date().getFullYear()) + (author ? ' ' + author : '');
|
||||
newState.copyrightNotice = 'All rights reserved.'
|
||||
}
|
||||
|
||||
this.setState(newState);
|
||||
|
|
@ -277,7 +279,7 @@ var PublishPage = React.createClass({
|
|||
const newChannelName = (event.target.value.startsWith('@') ? event.target.value : '@' + event.target.value);
|
||||
|
||||
if (newChannelName.length > 1 && !lbry.nameIsValid(newChannelName.substr(1), false)) {
|
||||
this.refs.newChannelName.showAdvice('LBRY channel names must contain only letters, numbers and dashes.');
|
||||
this.refs.newChannelName.showError('LBRY channel names must contain only letters, numbers and dashes.');
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -292,7 +294,7 @@ var PublishPage = React.createClass({
|
|||
},
|
||||
handleCreateChannelClick: function (event) {
|
||||
if (this.state.newChannelName.length < 5) {
|
||||
this.refs.newChannelName.showAdvice('LBRY channel names must be at least 4 characters in length.');
|
||||
this.refs.newChannelName.showError('LBRY channel names must be at least 4 characters in length.');
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -311,7 +313,7 @@ var PublishPage = React.createClass({
|
|||
}, 5000);
|
||||
}, (error) => {
|
||||
// TODO: better error handling
|
||||
this.refs.newChannelName.showAdvice('Unable to create channel due to an internal error.');
|
||||
this.refs.newChannelName.showError('Unable to create channel due to an internal error.');
|
||||
this.setState({
|
||||
creatingChannel: false,
|
||||
});
|
||||
|
|
@ -334,7 +336,27 @@ var PublishPage = React.createClass({
|
|||
},
|
||||
componentDidUpdate: function() {
|
||||
},
|
||||
// Also getting a type warning here too
|
||||
onFileChange: function() {
|
||||
if (this.refs.file.getValue()) {
|
||||
this.setState({ hasFile: true })
|
||||
} else {
|
||||
this.setState({ hasFile: false })
|
||||
}
|
||||
},
|
||||
getNameBidHelpText: function() {
|
||||
if (!this.state.name) {
|
||||
return "Select a URL for this publish.";
|
||||
} else if (!this.state.nameResolved) {
|
||||
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) {
|
||||
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 perminent URL for any amount.</span>
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
if (this.state.channels === null) {
|
||||
return null;
|
||||
|
|
@ -345,153 +367,136 @@ var PublishPage = React.createClass({
|
|||
<form onSubmit={this.handleSubmit}>
|
||||
<section className="card">
|
||||
<div className="card__title-primary">
|
||||
<h4>LBRY Name</h4>
|
||||
<h4>Content</h4>
|
||||
<div className="card__subtitle">
|
||||
What are you publishing?
|
||||
</div>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormRow label="lbry://" type="text" ref="name" placeholder="lbry://myname" value={this.state.rawName} onChange={this.handleNameChange}
|
||||
helper={(<div>What LBRY name would you like to claim for this file? <Link label="Read more" href="https://lbry.io/faq/naming" />.</div>)} />
|
||||
{
|
||||
(!this.state.name
|
||||
? null
|
||||
: (!this.state.nameResolved
|
||||
? <em> The name <strong>{this.state.name}</strong> is available.</em>
|
||||
: (this.state.myClaimExists
|
||||
? <em> You already have a claim on the name <strong>{this.state.name}</strong>. You can use this page to update your claim.</em>
|
||||
: <em> The name <strong>{this.state.name}</strong> is currently claimed for <strong>{this.state.topClaimValue}</strong> {this.state.topClaimValue == 1 ? 'credit' : 'credits'}.</em>)))
|
||||
}
|
||||
<FormRow name="file" label="File" ref="file" type="file" onChange={this.onFileChange}
|
||||
helper={this.state.myClaimExists ? "If you don't choose a file, the file from your existing claim will be used." : null}/>
|
||||
</div>
|
||||
{ !this.state.hasFile ? '' :
|
||||
<div className="card__content">
|
||||
<FormRow label="Title" type="text" ref="meta_title" name="title" placeholder="Me Not Being A Loser" />
|
||||
<FormRow type="text" label="Thumbnail URL" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" />
|
||||
<FormRow label="Description" type="textarea" ref="meta_description" name="description" placeholder="Description of your content" />
|
||||
<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>
|
||||
<FormRow type="select" label="Maturity" defaultValue="en" ref="meta_nsfw" name="nsfw">
|
||||
<option value=""></option>
|
||||
<option value="0">All Ages</option>
|
||||
<option value="1">Adults Only</option>
|
||||
</FormRow>
|
||||
</div> }
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<div className="card__title-primary">
|
||||
<h4>Access</h4>
|
||||
<div className="card__subtitle">
|
||||
How much does this content cost ?
|
||||
</div>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<div className="form-row__label-row">
|
||||
<label className="form-row__label">Price</label>
|
||||
</div>
|
||||
<FormRow label="Free" type="radio" name="isFree" value="1" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} />
|
||||
<FormField type="radio" name="isFree" label={!this.state.isFee ? 'Choose price...' : 'Price ' }
|
||||
onChange={ () => { this.handleFeePrefChange(true) } } checked={this.state.isFee} />
|
||||
<span className={!this.state.isFee ? 'hidden' : ''}>
|
||||
<FormField type="number" step="0.01" placeholder="1.00" onChange={this.handleFeeAmountChange} /> <FormField type="select" onChange={this.handleFeeCurrencyChange}>
|
||||
<option value="USD">US Dollars</option>
|
||||
<option value="LBC">LBRY credits</option>
|
||||
</FormField>
|
||||
</span>
|
||||
{ this.state.isFee ?
|
||||
<div className="help">
|
||||
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={this.handleLicenseChange}>
|
||||
<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>Public Domain</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={this.handleCopyrightNoticeChange} />
|
||||
: null}
|
||||
{this.state.otherLicenseChosen ?
|
||||
<FormRow label="License description" type="text" name="other-license-description" onChange={this.handleOtherLicenseDescriptionChange} />
|
||||
: null}
|
||||
{this.state.otherLicenseChosen ?
|
||||
<FormRow label="License URL" type="text" name="other-license-url" onChange={this.handleOtherLicenseUrlChange} />
|
||||
: null}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<h4>Channel</h4>
|
||||
<div className="form-row">
|
||||
<FormField type="select" onChange={this.handleChannelChange} value={this.state.channel}>
|
||||
<div className="card__title-primary">
|
||||
<h4>Identity</h4>
|
||||
<div className="card__subtitle">
|
||||
Who created this content?
|
||||
</div>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormRow type="select" tabIndex="1" onChange={this.handleChannelChange} value={this.state.channel}>
|
||||
<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 channel...</option>
|
||||
</FormField>
|
||||
{this.state.channel == 'new'
|
||||
? <section>
|
||||
<label>Name <FormField type="text" onChange={this.handleNewChannelNameChange} ref={newChannelName => { this.refs.newChannelName = newChannelName }}
|
||||
value={this.state.newChannelName} /></label>
|
||||
<label>Bid amount <FormField type="text-number" onChange={this.handleNewChannelBidChange} value={this.state.newChannelBid} /> LBC</label>
|
||||
<Link button="primary" label={!this.state.creatingChannel ? 'Create channel' : 'Creating channel...'} onClick={this.handleCreateChannelClick} disabled={this.state.creatingChannel} />
|
||||
</section>
|
||||
: null}
|
||||
<div className="help">What channel would you like to publish this file under?</div>
|
||||
<option key="new" value="new">New identity...</option>
|
||||
</FormRow>
|
||||
</div>
|
||||
{this.state.channel == 'new' ?
|
||||
<div className="card__content">
|
||||
<FormRow label="Name" type="text" onChange={this.handleNewChannelNameChange} ref={newChannelName => { this.refs.newChannelName = newChannelName }}
|
||||
value={this.state.newChannelName} />
|
||||
<FormRow label="Deposit" step="0.01" defaultValue="0.01" type="number" onChange={this.handleNewChannelBidChange} value={this.state.newChannelBid} />
|
||||
<div className="form-row-submit">
|
||||
<Link button="primary" label={!this.state.creatingChannel ? 'Creating identity' : 'Creating identity...'} onClick={this.handleCreateChannelClick} disabled={this.state.creatingChannel} />
|
||||
</div>
|
||||
</div>
|
||||
: null}
|
||||
</section>
|
||||
|
||||
|
||||
<section className="card">
|
||||
<div className="card__title-primary"><h4>Choose File</h4></div>
|
||||
<div className="card__title-primary">
|
||||
<h4>Address</h4>
|
||||
<div className="card__subtitle">Where should this content permanently reside?</div>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormField name="file" ref="file" type="file" />
|
||||
{ this.state.myClaimExists ? <div className="help">If you don't choose a file, the file from your existing claim will be used.</div> : null }
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<h4>Bid Amount</h4>
|
||||
<div className="form-row">
|
||||
Credits <FormField ref="bid" type="text-number" onChange={this.handleBidChange} value={this.state.bid} placeholder={this.state.nameResolved ? this.state.topClaimValue + 10 : 100} />
|
||||
<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.topClaimIsMine ? <span> You currently control this name with a bid of <strong>{this.state.myClaimValue}</strong> {this.state.myClaimValue == 1 ? 'credit' : 'credits'}.</span>
|
||||
: (this.state.myClaimExists ? <span> You have a non-winning bid on this name for <strong>{this.state.myClaimValue}</strong> {this.state.myClaimValue == 1 ? 'credit' : 'credits'}.
|
||||
To control this name, you'll need to increase your bid to more than <strong>{this.state.topClaimValue}</strong> {this.state.topClaimValue == 1 ? 'credit' : 'credits'}.</span>
|
||||
: <span> You must bid over <strong>{this.state.topClaimValue}</strong> {this.state.topClaimValue == 1 ? 'credit' : 'credits'} to claim this name.</span>)) }
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<h4>Fee</h4>
|
||||
<div className="form-row">
|
||||
<label>
|
||||
<FormField type="radio" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} /> No fee
|
||||
</label>
|
||||
<label>
|
||||
<FormField type="radio" onChange={ () => { this.handleFeePrefChange(true) } } checked={this.state.isFee} /> { !this.state.isFee ? 'Choose fee...' : 'Fee ' }
|
||||
<span className={!this.state.isFee ? 'hidden' : ''}>
|
||||
<FormField type="text-number" onChange={this.handleFeeAmountChange} /> <FormField type="select" onChange={this.handleFeeCurrencyChange}>
|
||||
<option value="USD">US Dollars</option>
|
||||
<option value="LBC">LBRY credits</option>
|
||||
</FormField>
|
||||
</span>
|
||||
</label>
|
||||
<div className="help">
|
||||
<p>How much would you like to charge for this file?</p>
|
||||
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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section className="card">
|
||||
<h4>Your Content</h4>
|
||||
|
||||
<div className="form-row">
|
||||
<label htmlFor="title">Title</label><FormField type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" />
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="author">Author</label><FormField type="text" ref="meta_author" name="author" placeholder="My Company, Inc." />
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="license">License</label><FormField type="select" ref="meta_license" name="license" onChange={this.handeLicenseChange}>
|
||||
<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>Public Domain</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>
|
||||
</FormField>
|
||||
<FormField type="hidden" ref="meta_license_url" name="license_url" value={this.getLicenseUrl()} />
|
||||
</div>
|
||||
{this.state.copyrightChosen
|
||||
? <div className="form-row">
|
||||
<label htmlFor="copyright-notice" value={this.state.copyrightNotice}>Copyright notice</label><FormField type="text" name="copyright-notice" value={this.state.copyrightNotice} onChange={this.handleCopyrightNoticeChange} />
|
||||
</div>
|
||||
: null}
|
||||
{this.state.otherLicenseChosen
|
||||
? <div className="form-row">
|
||||
<label htmlFor="other-license-description">License description</label><FormField type="text" name="other-license-description" onChange={this.handleOtherLicenseDescriptionChange} />
|
||||
</div>
|
||||
: null}
|
||||
{this.state.otherLicenseChosen
|
||||
? <div className="form-row">
|
||||
<label htmlFor="other-license-url">License URL</label> <FormField type="text" name="other-license-url" onChange={this.handleOtherLicenseUrlChange} />
|
||||
</div>
|
||||
: null}
|
||||
|
||||
<div className="form-row">
|
||||
<label htmlFor="language">Language</label> <FormField 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>
|
||||
</FormField>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="description">Description</label> <FormField type="textarea" ref="meta_description" name="description" placeholder="Description of your content" />
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label><FormField type="checkbox" ref="meta_nsfw" name="nsfw" placeholder="Description of your content" /> Not Safe For Work</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section className="card">
|
||||
<h4>Additional Content Information (Optional)</h4>
|
||||
<div className="form-row">
|
||||
<label htmlFor="meta_thumbnail">Thumbnail URL</label> <FormField type="text" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" />
|
||||
<FormRow label="lbry://" type="text" ref="name" placeholder="lbry://myname" value={this.state.rawName} onChange={this.handleNameChange}
|
||||
helper={(<div>Select a URL for this publish. <Link label="Read more" href="https://lbry.io/faq/naming" />.</div>)} />
|
||||
</div>
|
||||
{ this.state.rawName ?
|
||||
<div className="card__content">
|
||||
<FormRow ref="bid"
|
||||
type="number"
|
||||
step="0.01"
|
||||
label="Deposit"
|
||||
defaultValue="0.01"
|
||||
onChange={this.handleBidChange}
|
||||
value={this.state.bid}
|
||||
placeholder={this.state.nameResolved ? this.state.topClaimValue + 10 : 100}
|
||||
helper={this.getNameBidHelpText()} />
|
||||
</div> : '' }
|
||||
</section>
|
||||
|
||||
<div className="card-series-submit">
|
||||
|
|
|
|||
|
|
@ -95,12 +95,12 @@ var SettingsPage = React.createClass({
|
|||
</div>
|
||||
<div className="card__content">
|
||||
<h4>Max Upload</h4>
|
||||
<FormField type="radio"
|
||||
<FormRow type="radio"
|
||||
name="max_upload_pref"
|
||||
onChange={this.onMaxUploadPrefChange.bind(this, false)}
|
||||
defaultChecked={!this.state.isMaxUpload}
|
||||
label="Unlimited" />
|
||||
<FormField type="radio"
|
||||
<FormRow type="radio"
|
||||
name="max_upload_pref"
|
||||
onChange={this.onMaxUploadPrefChange.bind(this, true)}
|
||||
defaultChecked={this.state.isMaxUpload}
|
||||
|
|
@ -116,20 +116,23 @@ var SettingsPage = React.createClass({
|
|||
</div>
|
||||
<div className="card__content">
|
||||
<h4>Max Download</h4>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
|
||||
</label>
|
||||
<FormField label="Unlimited"
|
||||
type="radio"
|
||||
name="max_download_pref"
|
||||
onChange={this.onMaxDownloadPrefChange.bind(this, false)}
|
||||
defaultChecked={!this.state.isMaxDownload} />
|
||||
{ /*
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxDownload}/> { this.state.isMaxDownload ? 'Up to' : 'Choose limit...' }
|
||||
<span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.daemonSettings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
|
||||
</label>
|
||||
</label> */ }
|
||||
</div>
|
||||
</section>
|
||||
<section className="card">
|
||||
<div className="card__content">
|
||||
<h3>Content</h3>
|
||||
</div>
|
||||
<div class="card__content">
|
||||
<div className="card__content">
|
||||
<FormRow type="checkbox"
|
||||
onChange={this.onShowUnavailableChange}
|
||||
defaultChecked={this.state.showUnavailable}
|
||||
|
|
@ -145,7 +148,7 @@ var SettingsPage = React.createClass({
|
|||
<div className="card__content">
|
||||
<h3>Share Diagnostic Data</h3>
|
||||
</div>
|
||||
<div class="card__content">
|
||||
<div className="card__content">
|
||||
<FormRow type="checkbox"
|
||||
onChange={this.onShareDataChange}
|
||||
defaultChecked={this.state.daemonSettings.share_debug_info}
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ var SendToAddressSection = React.createClass({
|
|||
<h3>Send Credits</h3>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormRow label="Amount" type="number" placeholder="1.23" size="10" onChange={this.setAmount} />
|
||||
<FormRow label="Amount" step="0.01" type="number" placeholder="1.23" size="10" onChange={this.setAmount} />
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={this.setAddress} />
|
||||
|
|
|
|||
|
|
@ -95,8 +95,9 @@ $width-card-small: $spacing-vertical * 12;
|
|||
}
|
||||
|
||||
.card__subtitle {
|
||||
color: $color-meta-light;
|
||||
color: $color-help;
|
||||
font-size: 0.85em;
|
||||
line-height: $font-line-height * 1 / 0.85;
|
||||
}
|
||||
|
||||
.card-series-submit
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
@import "../global";
|
||||
|
||||
$width-input-border: 2px;
|
||||
|
||||
.form-row-submit
|
||||
{
|
||||
margin-top: $spacing-vertical;
|
||||
}
|
||||
|
||||
$height-input: $spacing-vertical * 1.5;
|
||||
|
||||
.form-row__label-row {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
margin-bottom: $spacing-vertical * 1/3;
|
||||
line-height: 1;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.form-row__label-row--prefix {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
line-height: $height-input;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
|
|
@ -26,8 +26,19 @@ $height-input: $spacing-vertical * 1.5;
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
transition: outline $transition-standard;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
height: $spacing-vertical;
|
||||
&:focus {
|
||||
outline: $width-input-border solid $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
textarea,
|
||||
select,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
|
|
@ -54,9 +65,10 @@ $height-input: $spacing-vertical * 1.5;
|
|||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="date"] {
|
||||
border-bottom: 2px solid $color-form-border;
|
||||
line-height: $spacing-vertical - 4;
|
||||
height: $height-input;
|
||||
border-bottom: $width-input-border solid $color-form-border;
|
||||
line-height: 1px;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
padding-bottom: $spacing-vertical * 1/3;
|
||||
&.form-field__input--error {
|
||||
border-color: $color-error;
|
||||
}
|
||||
|
|
@ -73,7 +85,7 @@ $height-input: $spacing-vertical * 1.5;
|
|||
}
|
||||
|
||||
textarea {
|
||||
border: 2px solid $color-form-border;
|
||||
border: $width-input-border solid $color-form-border;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -93,7 +105,12 @@ $height-input: $spacing-vertical * 1.5;
|
|||
}
|
||||
|
||||
.form-field__input-number {
|
||||
width: 100px;
|
||||
width: 70px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-field__input-textarea {
|
||||
width: 330px;
|
||||
}
|
||||
|
||||
.form-field__error, .form-field__helper {
|
||||
|
|
|
|||
Loading…
Reference in a new issue