From b256a4396b2669e0e1a30e6cb1c26a644745f860 Mon Sep 17 00:00:00 2001
From: saltrafael <76502841+saltrafael@users.noreply.github.com>
Date: Tue, 24 Aug 2021 21:28:23 -0300
Subject: [PATCH] Thumbnail upload fixes (#6860)

more improvements, fix url, do the same for cover

remember url, error if invalid

unneeded addition

Fix delayed message

Lint

Allow empty values (placeholder and Gerbil)

Fix filepath crash

Fix button
---
 ui/component/channelEdit/view.jsx             | 53 ++++++++++++---
 ui/component/channelThumbnail/view.jsx        | 36 ++++------
 ui/component/common/file-selector.jsx         | 15 +---
 ui/component/selectAsset/view.jsx             | 68 +++++++------------
 ui/component/selectThumbnail/view.jsx         | 11 +--
 ui/modal/modalConfirmThumbnailUpload/view.jsx | 11 +--
 ui/modal/modalImageUpload/index.js            |  6 +-
 ui/modal/modalImageUpload/view.jsx            |  4 +-
 ui/scss/component/_channel.scss               |  2 +-
 9 files changed, 97 insertions(+), 109 deletions(-)

diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx
index 61c9df69f..0ba9e4bac 100644
--- a/ui/component/channelEdit/view.jsx
+++ b/ui/component/channelEdit/view.jsx
@@ -22,6 +22,8 @@ import SUPPORTED_LANGUAGES from 'constants/supported_languages';
 import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
 import { SIMPLE_SITE } from 'config';
 import { sortLanguageMap } from 'util/default-languages';
+import ThumbnailBrokenImage from 'component/selectThumbnail/thumbnail-broken.png';
+import Gerbil from 'component/channelThumbnail/gerbil.png';
 
 const LANG_NONE = 'none';
 
@@ -52,7 +54,7 @@ type Props = {
   onDone: () => void,
   openModal: (
     id: string,
-    { onUpdate: (string) => void, assetName: string, helpText: string, currentValue: string, title: string }
+    { onUpdate: (string, boolean) => void, assetName: string, helpText: string, currentValue: string, title: string }
   ) => void,
   uri: string,
   disabled: boolean,
@@ -90,7 +92,9 @@ function ChannelForm(props: Props) {
   } = props;
   const [nameError, setNameError] = React.useState(undefined);
   const [bidError, setBidError] = React.useState('');
+  const [isUpload, setIsUpload] = React.useState({ cover: false, thumbnail: false });
   const [coverError, setCoverError] = React.useState(false);
+  const [thumbError, setThumbError] = React.useState(false);
   const { claim_id: claimId } = claim || {};
   const [params, setParams]: [any, (any) => void] = React.useState(getChannelParams());
   const { channelName } = parseURI(uri);
@@ -112,10 +116,12 @@ function ChannelForm(props: Props) {
       creatingChannel ||
       updatingChannel ||
       nameError ||
+      thumbError ||
+      coverError ||
       bidError ||
       (isNewChannel && !params.name)
     );
-  }, [isClaimingInitialRewards, creatingChannel, updatingChannel, nameError, bidError, isNewChannel, params]);
+  }, [isClaimingInitialRewards, creatingChannel, updatingChannel, nameError, thumbError, coverError, bidError, isNewChannel, params.name]);
 
   function getChannelParams() {
     // fill this in with sdk data
@@ -195,12 +201,16 @@ function ChannelForm(props: Props) {
     setParams({ ...params, languages: langs });
   }
 
-  function handleThumbnailChange(thumbnailUrl: string) {
+  function handleThumbnailChange(thumbnailUrl: string, uploadSelected: boolean) {
     setParams({ ...params, thumbnailUrl });
+    setIsUpload({ ...isUpload, thumbnail: uploadSelected });
+    setThumbError(false);
   }
 
-  function handleCoverChange(coverUrl: string) {
+  function handleCoverChange(coverUrl: string, uploadSelected: boolean) {
     setParams({ ...params, coverUrl });
+    setIsUpload({ ...isUpload, cover: uploadSelected });
+    setCoverError(false);
   }
 
   function handleSubmit() {
@@ -225,6 +235,9 @@ function ChannelForm(props: Props) {
   if (errorMsg && errorMsg.includes(LIMIT_ERR_PARTIAL_MSG)) {
     errorMsg = __('Transaction limit reached. Try reducing the Description length.');
   }
+  if ((!isUpload.thumbnail && thumbError) || (!isUpload.cover && coverError)) {
+    errorMsg = __('Invalid %error_type%', { error_type: (thumbError && 'thumbnail') || (coverError && 'cover image') });
+  }
 
   React.useEffect(() => {
     let nameError;
@@ -247,6 +260,17 @@ function ChannelForm(props: Props) {
     }
   }, [hasClaimedInitialRewards, claimInitialRewards]);
 
+  const coverSrc = coverError ? ThumbnailBrokenImage : params.coverUrl;
+
+  let thumbnailPreview;
+  if (!params.thumbnailUrl) {
+    thumbnailPreview = Gerbil;
+  } else if (thumbError) {
+    thumbnailPreview = ThumbnailBrokenImage;
+  } else {
+    thumbnailPreview = params.thumbnailUrl;
+  }
+
   // TODO clear and bail after submit
   return (
     <>
@@ -258,7 +282,7 @@ function ChannelForm(props: Props) {
               title={__('Cover')}
               onClick={() =>
                 openModal(MODALS.IMAGE_UPLOAD, {
-                  onUpdate: (coverUrl) => handleCoverChange(coverUrl),
+                  onUpdate: (coverUrl, isUpload) => handleCoverChange(coverUrl, isUpload),
                   title: __('Edit Cover Image'),
                   helpText: __('(6.25:1)'),
                   assetName: __('Cover Image'),
@@ -270,11 +294,16 @@ function ChannelForm(props: Props) {
             />
           </div>
           {params.coverUrl &&
-            (coverError ? (
+            (coverError && isUpload.cover ? (
               <div className="channel-cover__custom--waiting">{__('This will be visible in a few minutes.')}</div>
             ) : (
-              <img className="channel-cover__custom" src={params.coverUrl} onError={() => setCoverError(true)} />
-            ))}
+              <img
+                className="channel-cover__custom"
+                src={coverSrc}
+                onError={() => setCoverError(true)}
+              />
+            )
+          )}
           <div className="channel__primary-info">
             <div className="channel__edit-thumb">
               <Button
@@ -282,7 +311,7 @@ function ChannelForm(props: Props) {
                 title={__('Edit')}
                 onClick={() =>
                   openModal(MODALS.IMAGE_UPLOAD, {
-                    onUpdate: (v) => handleThumbnailChange(v),
+                    onUpdate: (thumbnailUrl, isUpload) => handleThumbnailChange(thumbnailUrl, isUpload),
                     title: __('Edit Thumbnail Image'),
                     helpText: __('(1:1)'),
                     assetName: __('Thumbnail'),
@@ -296,9 +325,11 @@ function ChannelForm(props: Props) {
             <ChannelThumbnail
               className="channel__thumbnail--channel-page"
               uri={uri}
-              thumbnailPreview={params.thumbnailUrl}
+              thumbnailPreview={thumbnailPreview}
               allowGifs
-              showDelayedMessage
+              showDelayedMessage={isUpload.thumbnail}
+              setThumbError={(v) => setThumbError(v)}
+              thumbError={thumbError}
             />
             <h1 className="channel__title">
               {params.title || (channelName && '@' + channelName) || (params.name && '@' + params.name)}
diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx
index b09846840..ea30366ab 100644
--- a/ui/component/channelThumbnail/view.jsx
+++ b/ui/component/channelThumbnail/view.jsx
@@ -23,6 +23,10 @@ type Props = {
   showDelayedMessage?: boolean,
   noLazyLoad?: boolean,
   hideStakedIndicator?: boolean,
+  xsmall?: boolean,
+  noOptimization?: boolean,
+  setThumbError: (boolean) => void,
+  thumbError: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
@@ -41,15 +45,15 @@ function ChannelThumbnail(props: Props) {
     showDelayedMessage = false,
     noLazyLoad,
     hideStakedIndicator = false,
+    setThumbError,
   } = props;
-  const [thumbError, setThumbError] = React.useState(false);
   const shouldResolve = claim === undefined;
   const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
   const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
-  const channelThumbnail = thumbnail || thumbnailPreview;
+  const defaultAvater = AVATAR_DEFAULT || Gerbil;
+  const channelThumbnail = thumbnailPreview || thumbnail || defaultAvater;
   const isGif = channelThumbnail && channelThumbnail.endsWith('gif');
   const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
-  const defaultAvater = AVATAR_DEFAULT || Gerbil;
 
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
@@ -75,6 +79,7 @@ function ChannelThumbnail(props: Props) {
       </FreezeframeWrapper>
     );
   }
+
   return (
     <div
       className={classnames('channel-thumbnail', className, {
@@ -84,30 +89,17 @@ function ChannelThumbnail(props: Props) {
         'channel-thumbnail--resolving': isResolving,
       })}
     >
-      {!showThumb && (
+      {showDelayedMessage ? (
+        <div className="channel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
+        ) : (
         <OptimizedImage
           alt={__('Channel profile picture')}
-          className="channel-thumbnail__default"
-          src={!thumbError && channelThumbnail ? channelThumbnail : defaultAvater}
+          className={!channelThumbnail ? 'channel-thumbnail__default' : 'channel-thumbnail__custom'}
+          src={channelThumbnail}
           loading={noLazyLoad ? undefined : 'lazy'}
-          onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
+          onError={() => setThumbError(true)}
         />
       )}
-      {showThumb && (
-        <>
-          {showDelayedMessage && thumbError ? (
-            <div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
-          ) : (
-            <OptimizedImage
-              alt={__('Channel profile picture')}
-              className="channel-thumbnail__custom"
-              src={!thumbError && channelThumbnail ? channelThumbnail : defaultAvater}
-              loading={noLazyLoad ? undefined : 'lazy'}
-              onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
-            />
-          )}
-        </>
-      )}
       {!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
     </div>
   );
diff --git a/ui/component/common/file-selector.jsx b/ui/component/common/file-selector.jsx
index 9341b0952..9e428986a 100644
--- a/ui/component/common/file-selector.jsx
+++ b/ui/component/common/file-selector.jsx
@@ -7,7 +7,7 @@ import { FormField } from 'component/common/form';
 type Props = {
   type: string,
   currentPath?: ?string,
-  onFileChosen: WebFile => void,
+  onFileChosen: (WebFile) => void,
   label?: string,
   placeholder?: string,
   accept?: string,
@@ -19,17 +19,6 @@ type Props = {
 class FileSelector extends React.PureComponent<Props> {
   static defaultProps = {
     autoFocus: false,
-  };
-
-  componentDidUpdate(prevProps: Props) {
-    // If the form has just been cleared,
-    // clear the file input
-    if (prevProps.currentPath && !this.props.currentPath) {
-      this.fileInput.current.value = null;
-    }
-  }
-
-  static defaultProps = {
     type: 'file',
   };
 
@@ -39,6 +28,7 @@ class FileSelector extends React.PureComponent<Props> {
     super();
     this.fileInput = React.createRef();
     this.handleFileInputSelection = this.handleFileInputSelection.bind(this);
+    this.handleDirectoryInputSelection = this.handleDirectoryInputSelection.bind(this);
     this.fileInputButton = this.fileInputButton.bind(this);
   }
 
@@ -53,6 +43,7 @@ class FileSelector extends React.PureComponent<Props> {
     if (this.props.onFileChosen) {
       this.props.onFileChosen(file);
     }
+    this.fileInput.current.value = null; // clear the file input
   };
 
   handleDirectoryInputSelection = () => {
diff --git a/ui/component/selectAsset/view.jsx b/ui/component/selectAsset/view.jsx
index 124edeedd..56f4d5e56 100644
--- a/ui/component/selectAsset/view.jsx
+++ b/ui/component/selectAsset/view.jsx
@@ -1,5 +1,4 @@
 // @flow
-
 import React from 'react';
 import FileSelector from 'component/common/file-selector';
 import { SPEECH_URLS } from 'lbry-redux';
@@ -8,7 +7,6 @@ import Button from 'component/button';
 import Card from 'component/common/card';
 import { generateThumbnailName } from 'util/generate-thumbnail-name';
 import usePersistedState from 'effects/use-persisted-state';
-import classnames from 'classnames';
 
 const accept = '.png, .jpg, .jpeg, .gif';
 const SPEECH_READY = 'READY';
@@ -17,7 +15,7 @@ const SPEECH_UPLOADING = 'UPLOADING';
 type Props = {
   assetName: string,
   currentValue: ?string,
-  onUpdate: (string) => void,
+  onUpdate: (string, boolean) => void,
   recommended: string,
   title: string,
   onDone?: () => void,
@@ -25,27 +23,14 @@ type Props = {
 };
 
 function SelectAsset(props: Props) {
-  const { onUpdate, onDone, assetName, recommended, title, inline } = props;
+  const { onUpdate, onDone, assetName, currentValue, recommended, title, inline } = props;
   const [pathSelected, setPathSelected] = React.useState('');
   const [fileSelected, setFileSelected] = React.useState<any>(null);
   const [uploadStatus, setUploadStatus] = React.useState(SPEECH_READY);
   const [useUrl, setUseUrl] = usePersistedState('thumbnail-upload:mode', false);
-  const [url, setUrl] = React.useState('');
+  const [url, setUrl] = React.useState(currentValue);
   const [error, setError] = React.useState();
 
-  React.useEffect(() => {
-    if (pathSelected && fileSelected) {
-      doUploadAsset();
-    }
-  }, [pathSelected, fileSelected]);
-
-  function handleToggleMode(useUrl) {
-    setPathSelected('');
-    setFileSelected(null);
-    setUrl('');
-    setUseUrl(useUrl);
-  }
-
   function doUploadAsset() {
     const uploadError = (error = '') => {
       setError(error);
@@ -53,7 +38,7 @@ function SelectAsset(props: Props) {
 
     const onSuccess = (thumbnailUrl) => {
       setUploadStatus(SPEECH_READY);
-      onUpdate(thumbnailUrl);
+      onUpdate(thumbnailUrl, !useUrl);
 
       if (onDone) {
         onDone();
@@ -93,30 +78,6 @@ function SelectAsset(props: Props) {
   }
   const formBody = (
     <>
-      <div className={'section__header--actions'}>
-        <div>
-          <Button
-            button="alt"
-            className={classnames('button-toggle', {
-              'button-toggle--active': useUrl, // disable on upload status
-            })}
-            label={__('URL')}
-            onClick={() => {
-              handleToggleMode(true);
-            }}
-          />
-          <Button
-            button="alt"
-            className={classnames('button-toggle', {
-              'button-toggle--active': !useUrl, // disable on upload status
-            })}
-            label={__('Upload')}
-            onClick={() => {
-              handleToggleMode(false);
-            }}
-          />
-        </div>
-      </div>
       <fieldset-section>
         {error && <div className="error__text">{error}</div>}
         {useUrl ? (
@@ -129,7 +90,7 @@ function SelectAsset(props: Props) {
             value={url}
             onChange={(e) => {
               setUrl(e.target.value);
-              onUpdate(e.target.value);
+              onUpdate(e.target.value, !useUrl);
             }}
           />
         ) : (
@@ -151,6 +112,25 @@ function SelectAsset(props: Props) {
           />
         )}
       </fieldset-section>
+
+      <div className="section__actions">
+        {onDone && (
+          <Button
+            button="primary"
+            type="submit"
+            label={__('Done')}
+            disabled={!useUrl && ((uploadStatus === SPEECH_UPLOADING) || !pathSelected || !fileSelected)}
+            onClick={() => doUploadAsset()}
+          />
+        )}
+        <FormField
+          name="toggle-upload"
+          type="checkbox"
+          label={__('Use a URL')}
+          checked={useUrl}
+          onChange={() => setUseUrl(!useUrl)}
+        />
+      </div>
     </>
   );
 
diff --git a/ui/component/selectThumbnail/view.jsx b/ui/component/selectThumbnail/view.jsx
index ca8ed5a28..969821f94 100644
--- a/ui/component/selectThumbnail/view.jsx
+++ b/ui/component/selectThumbnail/view.jsx
@@ -93,9 +93,7 @@ class SelectThumbnail extends React.PureComponent<Props> {
                 style={{ display: 'none' }}
                 src={thumbnailSrc}
                 alt={__('Thumbnail Preview')}
-                onError={(e) => {
-                  updatePublishForm({ thumbnailError: true });
-                }}
+                onError={() => updatePublishForm({ thumbnailError: true })}
               />
             </div>
             <div className="column__item">
@@ -130,12 +128,7 @@ class SelectThumbnail extends React.PureComponent<Props> {
             )}
             {status === THUMBNAIL_STATUSES.COMPLETE && thumbnail && (
               <div className="column column--space-between">
-                <div
-                  className="column__item thumbnail-preview"
-                  // style={{ backgroundImage: `url(${thumbnail})` }}
-                >
-                  {__('This will be visible in a few minutes.')}
-                </div>
+                <div className="column__item thumbnail-preview" style={{ backgroundImage: `url(${thumbnail})` }} />
                 <div className="column__item">
                   <p>{__('Upload complete.')}</p>
                   <div className="section__actions">
diff --git a/ui/modal/modalConfirmThumbnailUpload/view.jsx b/ui/modal/modalConfirmThumbnailUpload/view.jsx
index f03569e39..4f2380b27 100644
--- a/ui/modal/modalConfirmThumbnailUpload/view.jsx
+++ b/ui/modal/modalConfirmThumbnailUpload/view.jsx
@@ -13,13 +13,16 @@ type Props = {
 class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
   upload() {
     const { upload, updatePublishForm, closeModal, file } = this.props;
-    upload(file);
-    updatePublishForm({ thumbnailPath: file.path });
-    closeModal();
+    if (file) {
+      upload(file);
+      updatePublishForm({ thumbnailPath: file.path });
+      closeModal();
+    }
   }
 
   render() {
     const { closeModal, file } = this.props;
+    const filePath = file && (file.path || file.name);
 
     return (
       <Modal
@@ -33,7 +36,7 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
       >
         <label>{__('Are you sure you want to upload this thumbnail to %domain%', { domain: DOMAIN })}?</label>
 
-        <blockquote>{file.path || file.name}</blockquote>
+        <blockquote>{filePath}</blockquote>
       </Modal>
     );
   }
diff --git a/ui/modal/modalImageUpload/index.js b/ui/modal/modalImageUpload/index.js
index 8a7428e4e..f44a80f8c 100644
--- a/ui/modal/modalImageUpload/index.js
+++ b/ui/modal/modalImageUpload/index.js
@@ -2,10 +2,8 @@ import { connect } from 'react-redux';
 import { doHideModal } from 'redux/actions/app';
 import ModalImageUpload from './view';
 
-const perform = dispatch => () => ({
-  closeModal: () => {
-    dispatch(doHideModal());
-  },
+const perform = dispatch => ({
+  closeModal: () => dispatch(doHideModal()),
 });
 
 export default connect(null, perform)(ModalImageUpload);
diff --git a/ui/modal/modalImageUpload/view.jsx b/ui/modal/modalImageUpload/view.jsx
index dc0ad52a2..c5f5e3871 100644
--- a/ui/modal/modalImageUpload/view.jsx
+++ b/ui/modal/modalImageUpload/view.jsx
@@ -8,7 +8,7 @@ type Props = {
   currentValue: string,
   title: string,
   helpText: string,
-  onUpdate: string => void,
+  onUpdate: (string, boolean) => void,
   assetName: string,
 };
 
@@ -18,7 +18,7 @@ function ModalImageUpload(props: Props) {
   return (
     <Modal isOpen type="card" onAborted={closeModal} contentLabel={title}>
       <SelectAsset
-        onUpdate={v => onUpdate(v)}
+        onUpdate={(a, b) => onUpdate(a, b)}
         currentValue={currentValue}
         assetName={assetName}
         recommended={helpText}
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index 00d48c7bc..28df3462a 100644
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@@ -84,7 +84,7 @@ $actions-z-index: 2;
   margin-right: var(--spacing-xs);
 }
 
-.chanel-thumbnail--waiting {
+.channel-thumbnail--waiting {
   background-color: var(--color-gray-5);
   border-radius: var(--border-radius);
   padding-top: 4rem;