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

Merge pull request #362 from lbryio/309-invalid-video

Browse source 
309 invalid video
This commit is contained in:
Bill Bittner 2018-02-25 17:50:34 -08:00 committed by GitHub
commit 1420d68d45
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 55 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
react/containers/Dropzone/index.js
View file

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { selectFile, updateError } from 'actions/publish'; import { selectFile, updateError, clearFile } from 'actions/publish';
import View from './view'; import View from './view';
const mapStateToProps = ({ publish }) => { const mapStateToProps = ({ publish }) => {
@ -12,13 +12,17 @@ const mapStateToProps = ({ publish }) => {
const mapDispatchToProps = dispatch => { const mapDispatchToProps = dispatch => {
return { return {
onFileSelect: (file) => { selectFile: (file) => {
dispatch(selectFile(file)); dispatch(selectFile(file));
dispatch(updateError('publishSubmit', null)); dispatch(updateError('publishSubmit', null));
}, },
onFileError: (value) => { setFileError: (value) => {
dispatch(clearFile());
dispatch(updateError('file', value)); dispatch(updateError('file', value));
}, },
clearFileError: () => {
dispatch(updateError('file', null));
},
}; };
}; };

62
react/containers/Dropzone/view.jsx
View file

@ -74,20 +74,20 @@ class Dropzone extends React.Component {
try { try {
validateFile(file); // validate the file's name, type, and size validateFile(file); // validate the file's name, type, and size
} catch (error) { } catch (error) {
return this.props.onFileError(error.message); return this.props.setFileError(error.message);
} }
// stage it so it will be ready when the publish button is clicked // stage it so it will be ready when the publish button is clicked
this.props.onFileError(null); this.props.clearFileError(null);
this.props.onFileSelect(file); this.props.selectFile(file);
} }
} }
render () { render () {
return ( return (
<div className="row row--tall flex-container--column"> <div className='row row--tall flex-container--column'>
<form> <form>
<input className="input-file" type="file" id="file_input" name="file_input" accept="video/*,image/*" onChange={this.handleFileInput} encType="multipart/form-data"/> <input className='input-file' type='file' id='file_input' name='file_input' accept='video/*,image/*' onChange={this.handleFileInput} encType='multipart/form-data' />
</form> </form>
<div id="preview-dropzone" className={'row row--padded row--tall dropzone' + (this.state.dragOver ? ' dropzone--drag-over' : '')} onDrop={this.handleDrop} onDragOver={this.handleDragOver} onDragEnd={this.handleDragEnd} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick}> <div id='preview-dropzone' className={'row row--padded row--tall dropzone' + (this.state.dragOver ? ' dropzone--drag-over' : '')} onDrop={this.handleDrop} onDragOver={this.handleDragOver} onDragEnd={this.handleDragEnd} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick}>
{this.props.file ? ( {this.props.file ? (
<div> <div>
<Preview <Preview
@ -95,38 +95,38 @@ class Dropzone extends React.Component {
file={this.props.file} file={this.props.file}
thumbnail={this.props.thumbnail} thumbnail={this.props.thumbnail}
/> />
<div id="dropzone-text-holder" className={'flex-container--column flex-container--center-center'}> <div id='dropzone-text-holder' className={'flex-container--column flex-container--center-center'}>
{ this.state.dragOver ? ( { this.state.dragOver ? (
<div id="dropzone-dragover"> <div id='dropzone-dragover'>
<p className="blue">Drop it.</p> <p className='blue'>Drop it.</p>
</div> </div>
) : ( ) : (
null null
)} )}
{ this.state.mouseOver ? ( { this.state.mouseOver ? (
<div id="dropzone-instructions"> <div id='dropzone-instructions'>
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.props.fileError}</p> <p className='info-message-placeholder info-message--failure' id='input-error-file-selection'>{this.props.fileError}</p>
<p>Drag & drop image or video here to publish</p> <p>Drag & drop image or video here to publish</p>
<p className="fine-print">OR</p> <p className='fine-print'>OR</p>
<p className="blue--underlined">CHOOSE FILE</p> <p className='blue--underlined'>CHOOSE FILE</p>
</div> </div>
) : ( ) : (
null null
)} )}
</div> </div>
</div> </div>
) : ( ) : (
<div id="dropzone-text-holder" className={'flex-container--column flex-container--center-center'}> <div id='dropzone-text-holder' className={'flex-container--column flex-container--center-center'}>
{ this.state.dragOver ? ( { this.state.dragOver ? (
<div id="dropzone-dragover"> <div id='dropzone-dragover'>
<p className="blue">Drop it.</p> <p className='blue'>Drop it.</p>
</div> </div>
) : ( ) : (
<div id="dropzone-instructions"> <div id='dropzone-instructions'>
<p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.props.fileError}</p> <p className='info-message-placeholder info-message--failure' id='input-error-file-selection'>{this.props.fileError}</p>
<p>Drag & drop image or video here to publish</p> <p>Drag & drop image or video here to publish</p>
<p className="fine-print">OR</p> <p className='fine-print'>OR</p>
<p className="blue--underlined">CHOOSE FILE</p> <p className='blue--underlined'>CHOOSE FILE</p>
</div> </div>
)} )}
</div> </div>

9
react/containers/PublishForm/index.js
View file

@ -1,6 +1,5 @@
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {clearFile, selectFile, updateError, updatePublishStatus} from 'actions/publish'; import {clearFile, updateError, updatePublishStatus} from 'actions/publish';
import {updateLoggedInChannel} from 'actions/channel';
import View from './view'; import View from './view';
const mapStateToProps = ({ channel, publish }) => { const mapStateToProps = ({ channel, publish }) => {
@ -23,15 +22,9 @@ const mapStateToProps = ({ channel, publish }) => {
const mapDispatchToProps = dispatch => { const mapDispatchToProps = dispatch => {
return { return {
onFileSelect: (file) => {
dispatch(selectFile(file));
},
onFileClear: () => { onFileClear: () => {
dispatch(clearFile()); dispatch(clearFile());
}, },
onChannelLogin: (name, shortId, longId) => {
dispatch(updateLoggedInChannel(name, shortId, longId));
},
onPublishStatusChange: (status, message) => { onPublishStatusChange: (status, message) => {
dispatch(updatePublishStatus(status, message)); dispatch(updatePublishStatus(status, message));
}, },

32
react/containers/PublishForm/view.jsx
View file

@ -128,39 +128,39 @@ class PublishForm extends React.Component {
} }
render () { render () {
return ( return (
<div className="row row--no-bottom"> <div className='row row--no-bottom'>
<div className="column column--10"> <div className='column column--10'>
<PublishTitleInput /> <PublishTitleInput />
</div> </div>
<div className="column column--5 column--sml-10" > <div className='column column--5 column--sml-10' >
<div className="row row--padded"> <div className='row row--padded'>
<Dropzone /> <Dropzone />
</div> </div>
</div> </div>
<div className="column column--5 column--sml-10 align-content-top"> <div className='column column--5 column--sml-10 align-content-top'>
<div id="publish-active-area" className="row row--padded"> <div id='publish-active-area' className='row row--padded'>
<div className="row row--padded row--no-top row--wide"> <div className='row row--padded row--no-top row--wide'>
<PublishUrlInput /> <PublishUrlInput />
</div> </div>
<div className="row row--padded row--no-top row--wide"> <div className='row row--padded row--no-top row--wide'>
<ChannelSelect /> <ChannelSelect />
</div> </div>
{ (this.props.file.type === 'video/mp4') && ( { (this.props.file.type === 'video/mp4') && (
<div className="row row--padded row--no-top row--wide "> <div className='row row--padded row--no-top row--wide '>
<PublishThumbnailInput /> <PublishThumbnailInput />
</div> </div>
)} )}
<div className="row row--padded row--no-top row--no-bottom row--wide"> <div className='row row--padded row--no-top row--no-bottom row--wide'>
<PublishMetadataInputs /> <PublishMetadataInputs />
</div> </div>
<div className="row row--wide align-content-center"> <div className='row row--wide align-content-center'>
<button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button> <button id='publish-submit' className='button--primary button--large' onClick={this.publish}>Publish</button>
</div> </div>
<div className="row row--padded row--no-bottom align-content-center"> <div className='row row--padded row--no-bottom align-content-center'>
<button className="button--cancel" onClick={this.props.onFileClear}>Cancel</button> <button className='button--cancel' onClick={this.props.onFileClear}>Cancel</button>
</div> </div>
<div className="row row--short align-content-center"> <div className='row row--short align-content-center'>
<p className="fine-print">By clicking 'Publish', 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> <p className='fine-print'>By clicking 'Publish', 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>
</div> </div>