Propagate thumbnail errors to PublishFormData

Thumbnail errors were just being used in `selectThumbnail`. The form doesn't know about it and was using allowing invalid thumbnails like 'helloworld' to pass through.

flow-typed/publish.js

@@ -11,6 +11,7 @@ declare type UpdatePublishFormData = {
   thumbnail_url?: string,
   uploadThumbnailStatus?: string,
   thumbnailPath?: string,
+  thumbnailError?: boolean,
   description?: string,
   language?: string,
   channel?: string,

static/app-strings.json

@@ -310,6 +310,9 @@
   "upload": "upload",
   "Uploading thumbnail": "Uploading thumbnail",
   "Please wait for thumbnail to finish uploading": "Please wait for thumbnail to finish uploading",
+  "A thumbnail is required. Please upload or provide an image URL above.": "A thumbnail is required. Please upload or provide an image URL above.",
+  "Thumbnail is invalid.": "Thumbnail is invalid.",
+  "Please reselect a file after changing the LBRY URL": "Please reselect a file after changing the LBRY URL",
   "API connection string": "API connection string",
   "Method": "Method",
   "Parameters": "Parameters",

ui/component/publishForm/view.jsx

@@ -46,6 +46,7 @@ type Props = {
   editingURI: ?string,
   title: ?string,
   thumbnail: ?string,
+  thumbnailError: ?boolean,
   uploadThumbnailStatus: ?string,
   thumbnailPath: ?string,
   description: ?string,
@@ -95,6 +96,7 @@ function PublishForm(props: Props) {
   // Detect upload type from query in URL
   const {
     thumbnail,
+    thumbnailError,
     name,
     editingURI,
     myClaimForUri,
@@ -227,6 +229,7 @@ function PublishForm(props: Props) {
     thumbnail &&
     !bidError &&
     !emptyPostError &&
+    !thumbnailError &&
     !(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
 
   const isOverwritingExistingClaim = !editingURI && myClaimForUri;

ui/component/publishFormErrors/index.js

@@ -10,6 +10,7 @@ const select = (state) => ({
   editingURI: makeSelectPublishFormValue('editingURI')(state),
   uploadThumbnailStatus: makeSelectPublishFormValue('uploadThumbnailStatus')(state),
   thumbnail: makeSelectPublishFormValue('thumbnail')(state),
+  thumbnailError: makeSelectPublishFormValue('thumbnailError')(state),
   isStillEditing: selectIsStillEditing(state),
 });
 

ui/component/publishFormErrors/view.jsx

@@ -13,6 +13,7 @@ type Props = {
   isStillEditing: boolean,
   uploadThumbnailStatus: string,
   thumbnail: string,
+  thumbnailError: boolean,
   waitForFile: boolean,
 };
 
@@ -27,6 +28,7 @@ function PublishFormErrors(props: Props) {
     isStillEditing,
     uploadThumbnailStatus,
     thumbnail,
+    thumbnailError,
     waitForFile,
   } = props;
   // These are extra help
@@ -46,6 +48,7 @@ function PublishFormErrors(props: Props) {
       {!isUploadingThumbnail && !thumbnail && (
         <div>{__('A thumbnail is required. Please upload or provide an image URL above.')}</div>
       )}
+      {thumbnailError && <div>{__('Thumbnail is invalid.')}</div>}
       {editingURI && !isStillEditing && !filePath && (
         <div>{__('Please reselect a file after changing the LBRY URL')}</div>
       )}

ui/component/selectThumbnail/view.jsx

@@ -17,23 +17,15 @@ type Props = {
   formDisabled: boolean,
   uploadThumbnailStatus: string,
   thumbnailPath: ?string,
+  thumbnailError: ?string,
   openModal: (id: string, {}) => void,
   updatePublishForm: ({}) => void,
   resetThumbnailStatus: () => void,
 };
 
-type State = {
+class SelectThumbnail extends React.PureComponent<Props> {
-  thumbnailError: boolean,
-};
-
-class SelectThumbnail extends React.PureComponent<Props, State> {
   constructor() {
     super();
-
-    this.state = {
-      thumbnailError: false,
-    };
-
     (this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this);
   }
 
@@ -41,8 +33,10 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
     const { updatePublishForm } = this.props;
     const newThumbnail = e.target.value.replace(' ', '');
 
-    updatePublishForm({ thumbnail: newThumbnail });
+    updatePublishForm({
-    this.setState({ thumbnailError: false });
+      thumbnail: newThumbnail,
+      thumbnailError: false,
+    });
   }
 
   render() {
@@ -56,10 +50,10 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
       openModal,
       updatePublishForm,
       thumbnailPath,
+      thumbnailError,
       resetThumbnailStatus,
     } = this.props;
 
-    const { thumbnailError } = this.state;
     const accept = '.png, .jpg, .jpeg, .gif';
 
     const outpoint = myClaimForUri ? `${myClaimForUri.txid}:${myClaimForUri.nout}` : undefined;
@@ -99,10 +93,8 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
                 style={{ display: 'none' }}
                 src={thumbnailSrc}
                 alt={__('Thumbnail Preview')}
-                onError={e => {
+                onError={(e) => {
-                  this.setState({
+                  updatePublishForm({ thumbnailError: true });
-                    thumbnailError: true,
-                  });
                 }}
               />
             </div>
@@ -133,7 +125,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
                 label={__('Thumbnail')}
                 placeholder={__('Choose a thumbnail')}
                 accept={accept}
-                onFileChosen={file => openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, { file })}
+                onFileChosen={(file) => openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, { file })}
               />
             )}
             {status === THUMBNAIL_STATUSES.COMPLETE && thumbnail && (