From caa4705de24ba92f47b4d84fb23558847713c191 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 1 Mar 2018 19:38:02 -0800 Subject: [PATCH] updated thumbnail claim along with publish claim --- react/containers/Dropzone/index.js | 4 --- react/containers/Dropzone/view.jsx | 10 +++--- .../containers/PublishThumbnailInput/view.jsx | 24 +++++++++---- react/containers/PublishUrlInput/view.jsx | 35 +++++++++---------- react/reducers/publish.js | 2 +- 5 files changed, 40 insertions(+), 35 deletions(-) diff --git a/react/containers/Dropzone/index.js b/react/containers/Dropzone/index.js index 658021c8..3d77c032 100644 --- a/react/containers/Dropzone/index.js +++ b/react/containers/Dropzone/index.js @@ -14,15 +14,11 @@ const mapDispatchToProps = dispatch => { return { selectFile: (file) => { dispatch(selectFile(file)); - dispatch(updateError('publishSubmit', null)); }, setFileError: (value) => { dispatch(clearFile()); dispatch(updateError('file', value)); }, - clearFileError: () => { - dispatch(updateError('file', null)); - }, }; }; diff --git a/react/containers/Dropzone/view.jsx b/react/containers/Dropzone/view.jsx index 28ca85e4..4d0b9ca5 100644 --- a/react/containers/Dropzone/view.jsx +++ b/react/containers/Dropzone/view.jsx @@ -19,7 +19,7 @@ class Dropzone extends React.Component { this.handleMouseLeave = this.handleMouseLeave.bind(this); this.handleClick = this.handleClick.bind(this); this.handleFileInput = this.handleFileInput.bind(this); - this.selectFile = this.selectFile.bind(this); + this.chooseFile = this.chooseFile.bind(this); } handleDrop (event) { event.preventDefault(); @@ -30,7 +30,7 @@ class Dropzone extends React.Component { if (dt.items) { if (dt.items[0].kind === 'file') { const droppedFile = dt.items[0].getAsFile(); - this.selectFile(droppedFile); + this.chooseFile(droppedFile); } } } @@ -61,15 +61,14 @@ class Dropzone extends React.Component { } handleClick (event) { event.preventDefault(); - // trigger file input document.getElementById('file_input').click(); } handleFileInput (event) { event.preventDefault(); const fileList = event.target.files; - this.selectFile(fileList[0]); + this.chooseFile(fileList[0]); } - selectFile (file) { + chooseFile (file) { if (file) { try { validateFile(file); // validate the file's name, type, and size @@ -77,7 +76,6 @@ class Dropzone extends React.Component { return this.props.setFileError(error.message); } // stage it so it will be ready when the publish button is clicked - this.props.clearFileError(null); this.props.selectFile(file); } } diff --git a/react/containers/PublishThumbnailInput/view.jsx b/react/containers/PublishThumbnailInput/view.jsx index b964248b..cbae141d 100644 --- a/react/containers/PublishThumbnailInput/view.jsx +++ b/react/containers/PublishThumbnailInput/view.jsx @@ -15,16 +15,28 @@ class PublishThumbnailInput extends React.Component { this.setThumbnailWithSnapshot = this.setThumbnailWithSnapshot.bind(this); } componentDidMount () { - this.setThumbnailClaimAndUrl(); - this.setVideoSource(); + console.log('thumbnail input did mount'); + const { claim, file, host, thumbnailChannel } = this.props; + this.setThumbnailClaimAndUrl(claim, host, thumbnailChannel); + this.setVideoSource(file); } - setThumbnailClaimAndUrl () { - const { claim, host, thumbnailChannel } = this.props; + componentWillReceiveProps (nextProps) { + // if file changes + if (nextProps.file !== this.props.file) { + const { file } = nextProps; + this.setVideoSource(file); + }; + // if claim changes + if (nextProps.claim !== this.props.claim) { + const { claim, host, thumbnailChannel } = nextProps; + this.setThumbnailClaimAndUrl(claim, host, thumbnailChannel); + } + } + setThumbnailClaimAndUrl (claim, host, thumbnailChannel) { const url = `${host}/${thumbnailChannel}/${claim}-thumb.png`; this.props.onThumbnailChange(`${claim}-thumb`, url); } - setVideoSource () { - const { file } = this.props; + setVideoSource (file) { const previewReader = new FileReader(); previewReader.readAsDataURL(file); previewReader.onloadend = () => { diff --git a/react/containers/PublishUrlInput/view.jsx b/react/containers/PublishUrlInput/view.jsx index 38ed7c91..8c238118 100644 --- a/react/containers/PublishUrlInput/view.jsx +++ b/react/containers/PublishUrlInput/view.jsx @@ -8,16 +8,16 @@ class PublishUrlInput extends React.Component { this.handleInput = this.handleInput.bind(this); } componentDidMount () { - if (!this.props.claim || this.props.claim === '') { - this.setClaimNameFromFileName(); + const { claim, fileName } = this.props; + if (!claim) { + this.setClaimName(fileName); } } - componentWillReceiveProps ({claim: newClaim}) { - if (newClaim) { - this.checkClaimIsAvailable(newClaim); - } else { - this.props.onUrlError('Please enter a URL'); + componentWillReceiveProps ({ claim, fileName }) { + if (!claim) { + return this.setClaimName(fileName); } + this.checkClaimIsAvailable(claim); } handleInput (event) { let value = event.target.value; @@ -30,8 +30,7 @@ class PublishUrlInput extends React.Component { input = input.replace(/[^A-Za-z0-9-]/g, ''); // remove all characters that are not A-Z, a-z, 0-9, or '-' return input; } - setClaimNameFromFileName () { - const fileName = this.props.fileName; + setClaimName (fileName) { const fileNameWithoutEnding = fileName.substring(0, fileName.lastIndexOf('.')); const cleanClaimName = this.cleanseInput(fileNameWithoutEnding); this.props.onClaimChange(cleanClaimName); @@ -39,7 +38,7 @@ class PublishUrlInput extends React.Component { checkClaimIsAvailable (claim) { request(`/api/claim/availability/${claim}`) .then(isAvailable => { - // console.log('checkClaimIsAvailable request response:', isAvailable); + console.log('checkClaimIsAvailable request response:', isAvailable); if (isAvailable) { this.props.onUrlError(null); } else { @@ -53,12 +52,12 @@ class PublishUrlInput extends React.Component { render () { return (
-

{this.props.urlError}

-
- -
+

{this.props.urlError}

+
+ +
- spee.ch / + spee.ch / - - { (this.props.claim && !this.props.urlError) && {'\u2713'} } - { this.props.urlError && {'\u2716'} } + + { (this.props.claim && !this.props.urlError) && {'\u2713'} } + { this.props.urlError && {'\u2716'} }
); diff --git a/react/reducers/publish.js b/react/reducers/publish.js index 10cb14ca..dc3da099 100644 --- a/react/reducers/publish.js +++ b/react/reducers/publish.js @@ -35,7 +35,7 @@ const initialState = { export default function (state = initialState, action) { switch (action.type) { case actions.FILE_SELECTED: - return Object.assign({}, state, { + return Object.assign({}, initialState, { // note: clears to initial state file: action.data, }); case actions.FILE_CLEAR: