131 lines
3.8 KiB
JavaScript
131 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
import Preview from './preview.jsx';
|
|
|
|
class Title extends React.Component {
|
|
constructor (props) {
|
|
super(props);
|
|
this.handleInput = this.handleInput.bind(this);
|
|
}
|
|
handleInput (e) {
|
|
e.preventDefault();
|
|
const name = e.target.name;
|
|
const value = e.target.value;
|
|
this.props.updateUploaderState(name, value);
|
|
}
|
|
render () {
|
|
return (
|
|
<input type="text" id="publish-title" className="input-text text--large input-text--full-width" name="title" placeholder="Give your post a title..." onChange={this.handleInput} value={this.props.title}/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class Channel extends React.Component {
|
|
render () {
|
|
return (
|
|
<div>
|
|
<h3>channel component</h3>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
class Url extends React.Component {
|
|
render () {
|
|
return (
|
|
<div>
|
|
<h3>url component</h3>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
class Thumbnail extends React.Component {
|
|
render () {
|
|
return (
|
|
<div>
|
|
<h3>thumbnail component</h3>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
class Details extends React.Component {
|
|
render () {
|
|
return (
|
|
<div>
|
|
<h3>details component</h3>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
class PublishDetails extends React.Component {
|
|
constructor (props) {
|
|
super(props);
|
|
this.state = {
|
|
showThumbnailSelector: false,
|
|
}
|
|
// set defaults
|
|
this.updateUploaderState = this.updateUploaderState.bind(this);
|
|
this.showThumbnailTool = this.showThumbnailTool.bind(this);
|
|
this.hideThumbnailTool = this.hideThumbnailTool.bind(this);
|
|
this.publish = this.publish.bind(this);
|
|
this.clearUploaderState = this.clearUploaderState.bind(this);
|
|
}
|
|
updateUploaderState (name, value) {
|
|
this.props.updateUploaderState(name, value);
|
|
}
|
|
showThumbnailTool () {
|
|
this.setState({showThumbnailSelector: true});
|
|
}
|
|
hideThumbnailTool () {
|
|
this.setState({showThumbnailSelector: false});
|
|
}
|
|
publish () {
|
|
// publish the asset
|
|
}
|
|
clearUploaderState () {
|
|
this.props.clearUploaderState();
|
|
}
|
|
render () {
|
|
return (
|
|
<div className="row row--no-bottom">
|
|
<div className="column column--10">
|
|
<Title title={this.props.title} updateUploaderState={this.updateUploaderState}/>
|
|
</div>
|
|
<div className="column column--5 column--sml-10" >
|
|
<div className="row row--padded">
|
|
<Preview
|
|
file={this.props.file}
|
|
hideThumbnailTool={this.hideThumbnailTool}
|
|
showThumbnailTool={this.showThumbnailTool}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="column column--5 column--sml-10 align-content-top">
|
|
<div id="publish-active-area" className="row row--padded">
|
|
<Channel />
|
|
<Url file={this.props.file}/>
|
|
{ this.state.showThumbnailSelector && <Thumbnail thumbnail={this.props.thumbnail}/> }
|
|
<Details />
|
|
|
|
<div className="row row--padded row--wide">
|
|
<div className="input-error" id="input-error-publish-submit" hidden="true">{this.props.inputError}</div>
|
|
<button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Upload</button>
|
|
</div>
|
|
|
|
<div className="row row--short align-content-center">
|
|
<button className="button--cancel" onClick={this.clearUploaderState}>Cancel</button>
|
|
</div>
|
|
|
|
<div className="row row--short align-content-center">
|
|
<p className="fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className="link--primary" target="_blank" href="https://lbry.io/learn">Read more.</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
module.exports = PublishDetails;
|