diff --git a/ui/component/collectionEdit/index.js b/ui/component/collectionEdit/index.js index 1f0fb52c8..dcda3c8ab 100644 --- a/ui/component/collectionEdit/index.js +++ b/ui/component/collectionEdit/index.js @@ -23,6 +23,7 @@ import CollectionForm from './view'; import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app'; import { doSetActiveChannel, doSetIncognito } from 'redux/actions/app'; import { doCollectionEdit } from 'redux/actions/collections'; +import { doResetThumbnailStatus } from 'redux/actions/publish'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), @@ -52,6 +53,7 @@ const perform = (dispatch, ownProps) => ({ setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)), setIncognito: (incognito) => dispatch(doSetIncognito(incognito)), doCollectionEdit: (params) => dispatch(doCollectionEdit(ownProps.collectionId, params)), + resetThumbnailStatus: () => dispatch(doResetThumbnailStatus()), }); export default connect(select, perform)(CollectionForm); diff --git a/ui/component/collectionEdit/view.jsx b/ui/component/collectionEdit/view.jsx index 97f2bf7b1..8976fa97f 100644 --- a/ui/component/collectionEdit/view.jsx +++ b/ui/component/collectionEdit/view.jsx @@ -58,6 +58,7 @@ type Props = { setActiveChannel: (string) => void, setIncognito: (boolean) => void, doCollectionEdit: (CollectionEditParams) => void, + resetThumbnailStatus: () => void, }; function CollectionForm(props: Props) { @@ -92,6 +93,7 @@ function CollectionForm(props: Props) { setIncognito, onDone, doCollectionEdit, + resetThumbnailStatus, } = props; const activeChannelName = activeChannelClaim && activeChannelClaim.name; let prefix = 'lbry://'; @@ -158,7 +160,7 @@ function CollectionForm(props: Props) { } function handleUpdateThumbnail(update: { [string]: string }) { - if (update.thumbnail_url) { + if (update.thumbnail_url !== undefined) { setParam(update); } else if (update.thumbnail_status) { setThumbStatus(update.thumbnail_status); @@ -309,6 +311,10 @@ function CollectionForm(props: Props) { } }, [uri, hasClaim]); + React.useEffect(() => { + resetThumbnailStatus(); + }, [resetThumbnailStatus]); + return ( <>
@@ -358,8 +364,8 @@ function CollectionForm(props: Props) { /> ({ - ...selectPublishFormValues(state), - fileInfos: selectFileInfosByOutpoint(state), - myClaimForUri: selectMyClaimForUri(state), -}); +const select = (state, props) => { + const publishFormFields = selectPublishFormValues(state); + return { + ...publishFormFields, + thumbnail: props.thumbnail || publishFormFields.thumbnail, + fileInfos: selectFileInfosByOutpoint(state), + myClaimForUri: selectMyClaimForUri(state), + }; +}; const perform = (dispatch) => ({ updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)), diff --git a/ui/component/selectThumbnail/view.jsx b/ui/component/selectThumbnail/view.jsx index 5690988fc..8998272ae 100644 --- a/ui/component/selectThumbnail/view.jsx +++ b/ui/component/selectThumbnail/view.jsx @@ -69,10 +69,10 @@ function SelectThumbnail(props: Props) { function handleThumbnailChange(e: SyntheticInputEvent<*>) { const newThumbnail = e.target.value.replace(' ', ''); - if (updateThumbnailParams) { updateThumbnailParams({ thumbnail_url: newThumbnail }); - } else { + } + if (updatePublishForm) { updatePublishForm({ thumbnail: newThumbnail }); } } @@ -108,16 +108,22 @@ function SelectThumbnail(props: Props) { style={{ display: 'none' }} src={thumbnail} alt={__('Thumbnail Preview')} - onError={() => - publishForm - ? updatePublishForm({ thumbnailError: true }) - : updateThumbnailParams({ thumbnail_error: Boolean(thumbnail) }) - } - onLoad={() => - publishForm - ? updatePublishForm({ thumbnailError: !isUrlInput }) - : updateThumbnailParams({ thumbnail_error: !isUrlInput }) - } + onError={() => { + if (updateThumbnailParams) { + updateThumbnailParams({ thumbnail_error: Boolean(thumbnail) }); + } + if (publishForm) { + updatePublishForm({ thumbnailError: true }); + } + }} + onLoad={() => { + if (updateThumbnailParams) { + updateThumbnailParams({ thumbnail_error: !isUrlInput }); + } + if (publishForm) { + updatePublishForm({ thumbnailError: !isUrlInput }); + } + }} />
); @@ -157,7 +163,7 @@ function SelectThumbnail(props: Props) { onFileChosen={(file) => openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, { file, - cb: (url) => !publishForm && updateThumbnailParams({ thumbnail_url: url }), + cb: (url) => updateThumbnailParams && updateThumbnailParams({ thumbnail_url: url }), }) } />