From c9747294ed7c0f0c7ac827d2bd0563605521c73c Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Mar 2018 14:57:25 -0800 Subject: [PATCH] cleaned up thumbnail generation and removed extra props --- react/actions/publish.js | 12 ++---- react/constants/publish_action_types.js | 3 +- react/containers/Dropzone/index.js | 2 +- .../containers/PublishThumbnailInput/index.js | 24 +++-------- .../containers/PublishThumbnailInput/view.jsx | 43 +++++++------------ react/reducers/publish.js | 22 ++-------- 6 files changed, 29 insertions(+), 77 deletions(-) diff --git a/react/actions/publish.js b/react/actions/publish.js index 22d1fb42..f713d993 100644 --- a/react/actions/publish.js +++ b/react/actions/publish.js @@ -72,16 +72,10 @@ export function toggleMetadataInputs (showMetadataInputs) { }; }; -export function updateThumbnailClaim (claim, url) { +export function onNewThumbnail (file) { + console.log('new thumbnail action created'); return { - type: actions.THUMBNAIL_CLAIM_UPDATE, - data: { claim, url }, - }; -}; - -export function updateThumbnailSelectedFile (file) { - return { - type: actions.THUMBNAIL_FILE_SELECT, + type: actions.THUMBNAIL_NEW, data: file, }; }; diff --git a/react/constants/publish_action_types.js b/react/constants/publish_action_types.js index 42487c3b..e165bda0 100644 --- a/react/constants/publish_action_types.js +++ b/react/constants/publish_action_types.js @@ -7,6 +7,5 @@ export const PUBLISH_STATUS_UPDATE = 'PUBLISH_STATUS_UPDATE'; export const ERROR_UPDATE = 'ERROR_UPDATE'; export const SELECTED_CHANNEL_UPDATE = 'SELECTED_CHANNEL_UPDATE'; export const TOGGLE_METADATA_INPUTS = 'TOGGLE_METADATA_INPUTS'; -export const THUMBNAIL_CLAIM_UPDATE = 'THUMBNAIL_CLAIM_UPDATE'; -export const THUMBNAIL_FILE_SELECT = 'THUMBNAIL_FILE_SELECT'; +export const THUMBNAIL_NEW = 'THUMBNAIL_NEW'; export const PUBLISH_START = 'PUBLISH_START'; diff --git a/react/containers/Dropzone/index.js b/react/containers/Dropzone/index.js index 3d77c032..1337f5e8 100644 --- a/react/containers/Dropzone/index.js +++ b/react/containers/Dropzone/index.js @@ -5,7 +5,7 @@ import View from './view'; const mapStateToProps = ({ publish }) => { return { file : publish.file, - thumbnail: publish.thumbnail.selectedFile, + thumbnail: publish.thumbnail, fileError: publish.error.file, }; }; diff --git a/react/containers/PublishThumbnailInput/index.js b/react/containers/PublishThumbnailInput/index.js index b2ba9630..5c337427 100644 --- a/react/containers/PublishThumbnailInput/index.js +++ b/react/containers/PublishThumbnailInput/index.js @@ -1,29 +1,15 @@ import { connect } from 'react-redux'; -import { updateThumbnailClaim, updateThumbnailSelectedFile } from 'actions/publish'; +import { onNewThumbnail } from 'actions/publish'; import View from './view'; -const mapStateToProps = ({ publish, site }) => { +const mapStateToProps = ({ publish: { file } }) => { return { - host : site.host, - // file props - file : publish.file, - claim : publish.claim, - // channel props - thumbnailChannel: publish.thumbnail.channel, - thumbnailClaim : publish.thumbnail.claim, - thumbnailFile : publish.thumbnail.selectedFile, + file, }; }; -const mapDispatchToProps = dispatch => { - return { - onThumbnailChange: (claim, url) => { - dispatch(updateThumbnailClaim(claim, url)); - }, - onThumbnailFileSelect: (file) => { - dispatch(updateThumbnailSelectedFile(file)); - }, - }; +const mapDispatchToProps = { + onNewThumbnail, }; export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/PublishThumbnailInput/view.jsx b/react/containers/PublishThumbnailInput/view.jsx index 3403e0ba..408d2718 100644 --- a/react/containers/PublishThumbnailInput/view.jsx +++ b/react/containers/PublishThumbnailInput/view.jsx @@ -7,7 +7,7 @@ function dataURItoBlob(dataURI) { let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array let ia = new Uint8Array(byteString.length); - for (var i = 0; i < byteString.length; i++) { + for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], {type: mimeString}); @@ -23,36 +23,26 @@ class PublishThumbnailInput extends React.Component { sliderMaxRange: null, sliderValue : null, }; - this.handleSliderChange = this.handleSliderChange.bind(this); this.handleVideoLoadedData = this.handleVideoLoadedData.bind(this); - this.setThumbnailWithSnapshot = this.setThumbnailWithSnapshot.bind(this); + this.handleSliderChange = this.handleSliderChange.bind(this); + this.createThumbnail = this.createThumbnail.bind(this); } componentDidMount () { - console.log('thumbnail input did mount'); - const { claim, file, host, thumbnailChannel } = this.props; - this.setThumbnailClaimAndUrl(claim, host, thumbnailChannel); + const { file } = this.props; this.setVideoSource(file); } componentWillReceiveProps (nextProps) { // if file changes - if (nextProps.file !== this.props.file) { + if (nextProps.file && 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 (file) { const previewReader = new FileReader(); previewReader.readAsDataURL(file); previewReader.onloadend = () => { + console.log('preview reader complete'); this.setState({videoSource: previewReader.result}); }; } @@ -77,22 +67,19 @@ class PublishThumbnailInput extends React.Component { let video = document.getElementById('video-thumb-player'); video.currentTime = value / 100; } - setThumbnailWithSnapshot () { + createThumbnail () { // take a snapshot - const snapshot = this.takeSnapShot(); - // set the thumbnail in redux store - if (snapshot) { - this.props.onThumbnailFileSelect(snapshot); - } - } - takeSnapShot () { let video = document.getElementById('video-thumb-player'); let canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); - const dataUri = canvas.toDataURL(); - return dataURItoBlob(dataUri); + const dataUrl = canvas.toDataURL(); + const snapshot = dataURItoBlob(dataUrl) + // set the thumbnail in redux store + if (snapshot) { + this.props.onNewThumbnail(snapshot); + } } render () { const { error, videoSource, sliderMinRange, sliderMaxRange, sliderValue } = this.state; @@ -112,7 +99,7 @@ class PublishThumbnailInput extends React.Component { playsInline onLoadedData={this.handleVideoLoadedData} src={videoSource} - onTimeUpdate={this.setThumbnailWithSnapshot} + onSeeked={this.createThumbnail} /> { sliderValue ? ( @@ -127,7 +114,7 @@ class PublishThumbnailInput extends React.Component { /> ) : ( -

loading slider...

+

loading...

) } diff --git a/react/reducers/publish.js b/react/reducers/publish.js index dc3da099..8d88a691 100644 --- a/react/reducers/publish.js +++ b/react/reducers/publish.js @@ -25,11 +25,8 @@ const initialState = { license : '', nsfw : false, }, - thumbnail: { - channel : publish.thumbnailChannel, - claim : null, - selectedFile: null, - }, + thumbnailChannel: publish.thumbnailChannel, + thumbnail : null, }; export default function (state = initialState, action) { @@ -72,20 +69,9 @@ export default function (state = initialState, action) { return Object.assign({}, state, { showMetadataInputs: action.data, }); - case actions.THUMBNAIL_CLAIM_UPDATE: + case actions.THUMBNAIL_NEW: return Object.assign({}, state, { - metadata: Object.assign({}, state.metadata, { - thumbnail: action.data.url, - }), - thumbnail: Object.assign({}, state.thumbnail, { - claim: action.data.claim, - }), - }); - case actions.THUMBNAIL_FILE_SELECT: - return Object.assign({}, state, { - thumbnail: Object.assign({}, state.thumbnail, { - selectedFile: action.data, - }), + thumbnail: action.data, }); default: return state;