LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

React/Redux - publish component #323

Merged
bones7242 merged 80 commits from react-upload into master 2018-01-25 22:43:20 +01:00
Conversation 1 Commits 80 Files changed 82 +111 -83
15 changed files with 111 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit a88459003e - Show all commits

22
react/uploader.js → react/PublishTool.js
View file

@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Dropzone from './components/dropzone.jsx';
import PublishForm from './components/publishForm.jsx';
import PublishStatus from './components/publishStatus.jsx';
import PublishDropzone from './components/PublishDropzone.jsx';
import PublishForm from './components/PublishForm.jsx';
import PublishStatus from './components/PublishStatus.jsx';
const DROPZONE = 'DROPZONE';
const DETAILS = 'DETAILS';
@ -12,6 +12,7 @@ const initialState = {
loggedInChannelName : null,
loggedInChannelShortId: null,
publishToChannel : false,
error : null,
file : null,
title : '',
claim : '',
@ -21,7 +22,7 @@ const initialState = {
nsfw : '',
};
class Uploader extends React.Component {
class PublishTool extends React.Component {
constructor (props) {
super(props);
this.state = initialState;
@ -54,10 +55,10 @@ class Uploader extends React.Component {
xhttp.open('GET', url, true);
xhttp.responseType = 'json';
xhttp.onreadystatechange = () => {
if (xhttp.readyState == 4 ) {
if ( xhttp.status == 200) {
if (xhttp.readyState === 4) {
if (xhttp.status === 200) {
resolve(xhttp.response);
} else if (xhttp.status == 403) {
} else if (xhttp.status === 401) {
reject('Wrong channel name or password');
} else {
reject('request failed with status:' + xhttp.status);
@ -77,7 +78,7 @@ class Uploader extends React.Component {
if (xhttp.readyState === 4) {
if (xhttp.status === 200) {
resolve(xhttp.response);
} else if (xhttp.status === 403) {
} else if (xhttp.status === 401) {
reject('Wrong channel name or password');
} else {
reject('request failed with status:' + xhttp.status);
@ -111,7 +112,7 @@ class Uploader extends React.Component {
return (
<div className="row row--tall flex-container--column">
{ this.state.showComponent === DROPZONE &&
<Dropzone
<PublishDropzone
updateUploaderState={this.updateUploaderState}
cleanseInput={this.cleanseInput}
/>
@ -126,6 +127,7 @@ class Uploader extends React.Component {
loggedInChannelName={this.state.loggedInChannelName}
loggedInChannelShortId={this.state.loggedInChannelShortId}
publishToChannel={this.state.publishToChannel}
error={this.state.error}
file={this.state.file}
title={this.state.title}
claim={this.state.claim}
@ -144,6 +146,6 @@ class Uploader extends React.Component {
};
ReactDOM.render(
<Uploader />,
<PublishTool />,
document.getElementById('react-uploader')
);

36
react/components/AnonymousOrChannelSelect.jsx Normal file
View file

@ -0,0 +1,36 @@
import React from 'react';
class AnonymousOrChannelSelect extends React.Component {
constructor (props) {
super(props);
this.toggleAnonymousPublish = this.toggleAnonymousPublish.bind(this);
}
toggleAnonymousPublish (event) {
const value = event.target.value;
if (value === 'anonymous') {
this.props.updateUploaderState('publishToChannel', false);
} else {
this.props.updateUploaderState('publishToChannel', true);
}
}
render () {
return (
<div className="row row--padded row--short row--wide">
<div className="column column--10">
<form>
<div className="column column--3 column--med-10">
<input type="radio" name="anonymous-or-channel" id="anonymous-radio" className="input-radio" value="anonymous" checked={!this.props.publishToChannel} onChange={this.toggleAnonymousPublish}/>
<label className="label label--pointer" htmlFor="anonymous-radio">Anonymous</label>
</div>
<div className="column column--7 column--med-10">
<input type="radio" name="anonymous-or-channel" id="channel-radio" className="input-radio" value="in a channel" checked={this.props.publishToChannel} onChange={this.toggleAnonymousPublish}/>
<label className="label label--pointer" htmlFor="channel-radio">In a channel</label>
</div>
</form>
</div>
</div>
);
}
}
module.exports = AnonymousOrChannelSelect;

0
react/components/channelCreateForm.jsx → react/components/ChannelCreateForm.jsx
View file

0
react/components/channelLoginForm.jsx → react/components/ChannelLoginForm.jsx
View file

4
react/components/channelSelector.jsx → react/components/ChannelSelector.jsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import ChannelLoginForm from './channelLoginForm.jsx';
import ChannelCreateForm from './channelCreateForm.jsx';
import ChannelLoginForm from './ChannelLoginForm.jsx';
import ChannelCreateForm from './ChannelCreateForm.jsx';
const LOGIN = 'login';
const CREATE = 'create';

0
react/components/previewDropzone.jsx → react/components/PreviewDropzone.jsx
View file

4
react/components/dropzone.jsx → react/components/PublishDropzone.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
const DETAILS = 'DETAILS';
class Dropzone extends React.Component {
class PublishDropzone extends React.Component {
constructor (props) {
super(props);
this.state = {
@ -154,4 +154,4 @@ class Dropzone extends React.Component {
}
};
module.exports = Dropzone;
module.exports = PublishDropzone;

82
react/components/publishForm.jsx → react/components/PublishForm.jsx
View file

@ -1,58 +1,22 @@
import React from 'react';
import PreviewDropzone from './previewDropzone.jsx';
import TitleInput from './titleInput.jsx';
import ChannelSelector from './channelSelector.jsx';
import UrlChooser from './urlChooser.jsx';
import ThumbnailInput from './thumbnailInput.jsx';
import MetadataInputs from './metadataInputs.jsx';
class AnonymousOrChannelSelect extends React.Component {
constructor (props) {
super(props);
this.toggleAnonymousPublish = this.toggleAnonymousPublish.bind(this);
}
toggleAnonymousPublish (event) {
const value = event.target.value;
if (value === 'anonymous') {
this.props.updateUploaderState('publishToChannel', false);
} else {
this.props.updateUploaderState('publishToChannel', true);
}
}
render () {
return (
<div className="row row--padded row--short row--wide">
<div className="column column--10">
<form>
<div className="column column--3 column--med-10">
<input type="radio" name="anonymous-or-channel" id="anonymous-radio" className="input-radio" value="anonymous" checked={!this.props.publishToChannel} onChange={this.toggleAnonymousPublish}/>
<label className="label label--pointer" htmlFor="anonymous-radio">Anonymous</label>
</div>
<div className="column column--7 column--med-10">
<input type="radio" name="anonymous-or-channel" id="channel-radio" className="input-radio" value="in a channel" checked={this.props.publishToChannel} onChange={this.toggleAnonymousPublish}/>
<label className="label label--pointer" htmlFor="channel-radio">In a channel</label>
</div>
</form>
</div>
</div>
);
}
}
import PreviewDropzone from './PreviewDropzone.jsx';
import TitleInput from './PublishTitleInput.jsx';
import ChannelSelector from './ChannelSelector.jsx';
import UrlChooser from './PublishUrlInput.jsx';
import PublishThumbnailInput from './PublishThumbnailInput.jsx';
import PublishMetadataInputs from './PublishMetadataInputs.jsx';
import AnonymousOrChannelSelect from './AnonymousOrChannelSelect.jsx';
class PublishForm extends React.Component {
constructor (props) {
super(props);
// set defaults
this.updateUploaderState = this.updateUploaderState.bind(this);
this.clearUploaderState = this.clearUploaderState.bind(this);
this.state = {
error : null,
showMetadataInputs: false,
}
this.publish = this.publish.bind(this);
}
updateUploaderState (name, value) {
this.props.updateUploaderState(name, value);
}
clearUploaderState () {
this.props.clearUploaderState();
}
publish () {
// publish the asset
}
@ -61,7 +25,10 @@ class PublishForm extends React.Component {
<div className="row row--no-bottom">
<div className="column column--10">
<TitleInput title={this.props.title} updateUploaderState={this.updateUploaderState}/>
<TitleInput
title={this.props.title}
updateUploaderState={this.updateUploaderState}
/>
</div>
<div className="column column--5 column--sml-10" >
@ -70,7 +37,11 @@ class PublishForm extends React.Component {
<PreviewDropzone
file={this.props.file}
/>
{ (this.props.file.type === 'video/mp4') && <ThumbnailInput thumbnail={this.props.thumbnail}/> }
{ (this.props.file.type === 'video/mp4') &&
<PublishThumbnailInput
thumbnail={this.props.thumbnail}
/>
}
</div>
</div>
<div className="column column--5 column--sml-10 align-content-top">
@ -83,7 +54,7 @@ class PublishForm extends React.Component {
loggedInChannelName={this.props.loggedInChannelName}
loggedInChannelShortId={this.props.loggedInChannelShortId}
cleanseInput={this.props.cleanseInput}
updateUploaderState={this.updateUploaderState}
updateUploaderState={this.props.updateUploaderState}
makeGetRequest={this.props.makeGetRequest}
/>
<AnonymousOrChannelSelect
@ -94,21 +65,22 @@ class PublishForm extends React.Component {
loggedInChannelName={this.props.loggedInChannelName}
publishToChannel={this.props.publishToChannel}
cleanseInput={this.props.cleanseInput}
updateUploaderState={this.updateUploaderState}
updateUploaderState={this.props.updateUploaderState}
makeGetRequest={this.props.makeGetRequest}
makePostRequest={this.props.makePostRequest}
/>
<PublishMetadataInputs
updateUploaderState={this.props.updateUploaderState}
/>
<MetadataInputs />
<div className="row row--padded row--wide">
<div className="input-error" id="input-error-publish-submit" hidden="true">{this.props.inputError}</div>
<div className="input-error" id="input-error-publish-submit" hidden="true">{this.state.error}</div>
<button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
</div>
<div className="row row--short align-content-center">
<button className="button--cancel" onClick={this.clearUploaderState}>Cancel</button>
<button className="button--cancel" onClick={this.props.clearUploaderState}>Cancel</button>
</div>
<div className="row row--short align-content-center">

31
react/components/PublishMetadataInputs.jsx Normal file
View file

@ -0,0 +1,31 @@
import React from 'react';
class MetadataInputs extends React.Component {
constructor (props) {
super(props);
this.state = {
showInputs: false,
};
this.toggleShowInputs = this.toggleShowInputs.bind(this);
}
toggleShowInputs () {
if (this.state.showInputs) {
this.setState({'showInputs': false});
} else {
this.setState({'showInputs': true});
}
}
render () {
return (
<div>
<div className="row row--padded row--no-top row--no-bottom row--wide">
<div className="column column--10">
<a className="label link--primary" id="publish-details-toggle" href="#" onClick={this.toggleShowInputs}>{this.state.showInputs ? '[hide]' : '[show]'}</a>
</div>
</div>
</div>
);
}
}
module.exports = MetadataInputs;

0
react/components/publishStatus.jsx → react/components/PublishStatus.jsx
View file

0
react/components/thumbnailInput.jsx → react/components/PublishThumbnailInput.jsx
View file

0
react/components/titleInput.jsx → react/components/PublishTitleInput.jsx
View file

0
react/components/urlChooser.jsx → react/components/PublishUrlInput.jsx
View file

13
react/components/metadataInputs.jsx
View file

@ -1,13 +0,0 @@
import React from 'react';
class MetadataInputs extends React.Component {
render () {
return (
<div>
<h3>details component</h3>
</div>
);
}
}
module.exports = MetadataInputs;

2
webpack.config.js
View file

@ -1,7 +1,7 @@
const path = require('path');
module.exports = {
entry : './react/uploader.js',
entry : './react/PublishTool.js',
output: {
path : path.join(__dirname, '/public/bundle/'),
filename: 'bundle.js',