From ef5c67f293cd1c38512b41ea66e0554f892cded2 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 10 Jan 2018 17:41:17 -0800 Subject: [PATCH] added thumbnail input with redux --- react/components/Preview.jsx | 11 +-- react/components/PublishForm.jsx | 12 +-- react/components/PublishMetadataInputs.jsx | 8 ++ react/components/PublishThumbnailInput.jsx | 79 ++++++++++++++++++- views/partials/publishForm-Channel.handlebars | 0 views/partials/publishForm-Details.handlebars | 50 ------------ .../partials/publishForm-Thumbnail.handlebars | 53 +------------ 7 files changed, 97 insertions(+), 116 deletions(-) delete mode 100644 views/partials/publishForm-Channel.handlebars delete mode 100644 views/partials/publishForm-Details.handlebars diff --git a/react/components/Preview.jsx b/react/components/Preview.jsx index da800820..8b246fdd 100644 --- a/react/components/Preview.jsx +++ b/react/components/Preview.jsx @@ -15,9 +15,9 @@ class Preview extends React.Component { this.previewFile(this.props.file); } } - componentWillReceiveProps ({ file }) { - console.log('Preview will receive props'); - this.previewFile(file); + componentWillReceiveProps (newProps) { + console.log('Preview will receive props', newProps); + this.previewFile(newProps.file); } previewFile (file) { console.log('previewFile', file) @@ -29,7 +29,7 @@ class Preview extends React.Component { that.setState({previewSource: previewReader.result}); }; } else { - that.setState({previewSource: '/assets/img/video_thumb_default.png'}); + that.setState({previewSource: (this.props.thumbnail || '/assets/img/video_thumb_default.png')}); } } render () { @@ -46,7 +46,8 @@ class Preview extends React.Component { const mapStateToProps = state => { return { - file: state.file, + file : state.file, + thumbnail: state.metadata.thumbnail, }; }; diff --git a/react/components/PublishForm.jsx b/react/components/PublishForm.jsx index 5a87b66e..8f3a5884 100644 --- a/react/components/PublishForm.jsx +++ b/react/components/PublishForm.jsx @@ -41,12 +41,11 @@ class PublishForm extends React.Component {
+
- - { (this.props.fileType === 'video/mp4') && } -
+
@@ -63,6 +62,8 @@ class PublishForm extends React.Component {
+ { (this.props.fileType === 'video/mp4') && } +
@@ -89,9 +90,8 @@ class PublishForm extends React.Component { const mapStateToProps = state => { return { - fileType : state.file.type, - claim : state.claim, - thumbnail: state.thumbnail, + fileType: state.file.type, + claim : state.claim, }; }; diff --git a/react/components/PublishMetadataInputs.jsx b/react/components/PublishMetadataInputs.jsx index 7cf51502..d8b405dc 100644 --- a/react/components/PublishMetadataInputs.jsx +++ b/react/components/PublishMetadataInputs.jsx @@ -2,6 +2,14 @@ import React from 'react'; import { connect } from 'react-redux'; import { updateMetadata } from '../actions'; +/* + const textarea = document.getElementById('publish-description'); + const limit = 200; + textarea.oninput = () => { + textarea.style.height = ''; + textarea.style.height = Math.min(textarea.scrollHeight, limit) + 'px'; +*/ + class MetadataInputs extends React.Component { constructor (props) { super(props); diff --git a/react/components/PublishThumbnailInput.jsx b/react/components/PublishThumbnailInput.jsx index 1f578b00..77c11042 100644 --- a/react/components/PublishThumbnailInput.jsx +++ b/react/components/PublishThumbnailInput.jsx @@ -1,13 +1,86 @@ import React from 'react'; +import { connect } from 'react-redux'; +import { updateMetadata } from '../actions'; class ThumbnailInput extends React.Component { + constructor (props) { + super(props); + this.state = { + videoPreviewSrc: null, + } + this.urlIsAnImage = this.urlIsAnImage.bind(this); + this.testImage = this.testImage.bind(this); + this.updateVideoThumb = this.updateVideoThumb.bind(this); + } + urlIsAnImage (url) { + return (url.match(/\.(jpeg|jpg|gif|png)$/) != null); + } + testImage (url, timeoutT) { + return new Promise(function (resolve, reject) { + const timeout = timeoutT || 5000; + let timer; + let img = new Image(); + img.onerror = img.onabort = function () { + clearTimeout(timer); + reject('error'); + }; + img.onload = function () { + clearTimeout(timer); + resolve('success'); + }; + timer = setTimeout(function () { + // reset .src to invalid URL so it stops previous + // loading, but doesn't trigger new load + img.src = '//!!!!/test.jpg'; + reject('timeout'); + }, timeout); + img.src = url; + }); + } + updateVideoThumb (event) { + var imageUrl = event.target.value; + const that = this; + if (this.urlIsAnImage(imageUrl)) { + this.testImage(imageUrl, 3000) + .then(function (result) { + if (result === 'success') { + that.props.onThumbnailChange('thumbnail', imageUrl); + } else if (result === 'timeout') { + console.log('could not resolve the provided thumbnail image url'); + } + }) + .catch(error => { + console.log('encountered an error loading thumbnail image url:', error); + }); + } + } render () { return ( -
-

thumbnail component

+
+
+ +
+
+ +
+
); } } -module.exports = ThumbnailInput; +const mapStateToProps = state => { + return { + thumbnail: state.metadata.thumbnail, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onThumbnailChange: (name, value) => { + dispatch(updateMetadata(name, value)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(ThumbnailInput); diff --git a/views/partials/publishForm-Channel.handlebars b/views/partials/publishForm-Channel.handlebars deleted file mode 100644 index e69de29b..00000000 diff --git a/views/partials/publishForm-Details.handlebars b/views/partials/publishForm-Details.handlebars deleted file mode 100644 index d5bca747..00000000 --- a/views/partials/publishForm-Details.handlebars +++ /dev/null @@ -1,50 +0,0 @@ -
-
- [more] -
-
- - - - - - - diff --git a/views/partials/publishForm-Thumbnail.handlebars b/views/partials/publishForm-Thumbnail.handlebars index 3d582159..435020b3 100644 --- a/views/partials/publishForm-Thumbnail.handlebars +++ b/views/partials/publishForm-Thumbnail.handlebars @@ -1,56 +1,5 @@ - \ No newline at end of file +