From fe2142ba49281789ce7e88de294e6d10e2454820 Mon Sep 17 00:00:00 2001
From: saltrafael <76502841+saltrafael@users.noreply.github.com>
Date: Thu, 26 Aug 2021 11:51:53 -0300
Subject: [PATCH] Thumbnail fixes (#6969)

* Fix Newly-uploaded thumbnail stays blank

* Fix ChannelThumbnail fallback broken

* Hide earnings for pending
---
 ui/component/channelEdit/view.jsx       | 27 +++++++++++++++----------
 ui/component/channelThumbnail/view.jsx  | 24 ++++++++++++++--------
 ui/component/publishForm/view.jsx       |  3 ++-
 ui/component/publishFormErrors/view.jsx |  3 ++-
 ui/component/selectThumbnail/view.jsx   | 23 ++++++++++++++-------
 ui/page/channels/index.js               | 25 +++++++++++++++++------
 ui/page/channels/view.jsx               | 16 +++++++++++----
 7 files changed, 83 insertions(+), 38 deletions(-)

diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx
index 0ba9e4bac..3e84e40ff 100644
--- a/ui/component/channelEdit/view.jsx
+++ b/ui/component/channelEdit/view.jsx
@@ -108,7 +108,7 @@ function ChannelForm(props: Props) {
     if (isClaimingInitialRewards) {
       return __('Claiming credits...');
     }
-    return creatingChannel || updatingChannel ? __('Submitting') : __('Submit');
+    return creatingChannel || updatingChannel ? __('Submitting...') : __('Submit');
   }, [isClaimingInitialRewards, creatingChannel, updatingChannel]);
   const submitDisabled = React.useMemo(() => {
     return (
@@ -121,7 +121,17 @@ function ChannelForm(props: Props) {
       bidError ||
       (isNewChannel && !params.name)
     );
-  }, [isClaimingInitialRewards, creatingChannel, updatingChannel, nameError, thumbError, coverError, bidError, isNewChannel, params.name]);
+  }, [
+    isClaimingInitialRewards,
+    creatingChannel,
+    updatingChannel,
+    nameError,
+    thumbError,
+    coverError,
+    bidError,
+    isNewChannel,
+    params.name,
+  ]);
 
   function getChannelParams() {
     // fill this in with sdk data
@@ -297,13 +307,8 @@ function ChannelForm(props: Props) {
             (coverError && isUpload.cover ? (
               <div className="channel-cover__custom--waiting">{__('This will be visible in a few minutes.')}</div>
             ) : (
-              <img
-                className="channel-cover__custom"
-                src={coverSrc}
-                onError={() => setCoverError(true)}
-              />
-            )
-          )}
+              <img className="channel-cover__custom" src={coverSrc} onError={() => setCoverError(true)} />
+            ))}
           <div className="channel__primary-info">
             <div className="channel__edit-thumb">
               <Button
@@ -328,8 +333,8 @@ function ChannelForm(props: Props) {
               thumbnailPreview={thumbnailPreview}
               allowGifs
               showDelayedMessage={isUpload.thumbnail}
-              setThumbError={(v) => setThumbError(v)}
-              thumbError={thumbError}
+              setThumbUploadError={setThumbError}
+              thumbUploadError={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 ea30366ab..572a36028 100644
--- a/ui/component/channelThumbnail/view.jsx
+++ b/ui/component/channelThumbnail/view.jsx
@@ -25,8 +25,8 @@ type Props = {
   hideStakedIndicator?: boolean,
   xsmall?: boolean,
   noOptimization?: boolean,
-  setThumbError: (boolean) => void,
-  thumbError: boolean,
+  setThumbUploadError: (boolean) => void,
+  ThumbUploadError: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
@@ -45,13 +45,15 @@ function ChannelThumbnail(props: Props) {
     showDelayedMessage = false,
     noLazyLoad,
     hideStakedIndicator = false,
-    setThumbError,
+    setThumbUploadError,
+    ThumbUploadError,
   } = props;
+  const [thumbLoadError, setThumbLoadError] = React.useState(ThumbUploadError);
   const shouldResolve = claim === undefined;
   const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
   const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
-  const defaultAvater = AVATAR_DEFAULT || Gerbil;
-  const channelThumbnail = thumbnailPreview || thumbnail || defaultAvater;
+  const defaultAvatar = AVATAR_DEFAULT || Gerbil;
+  const channelThumbnail = thumbnailPreview || thumbnail || defaultAvatar;
   const isGif = channelThumbnail && channelThumbnail.endsWith('gif');
   const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
 
@@ -91,13 +93,19 @@ function ChannelThumbnail(props: Props) {
     >
       {showDelayedMessage ? (
         <div className="channel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
-        ) : (
+      ) : (
         <OptimizedImage
           alt={__('Channel profile picture')}
           className={!channelThumbnail ? 'channel-thumbnail__default' : 'channel-thumbnail__custom'}
-          src={channelThumbnail}
+          src={(!thumbLoadError && channelThumbnail) || defaultAvatar}
           loading={noLazyLoad ? undefined : 'lazy'}
-          onError={() => setThumbError(true)}
+          onError={() => {
+            if (setThumbUploadError) {
+              setThumbUploadError(true);
+            } else {
+              setThumbLoadError(true);
+            }
+          }}
         />
       )}
       {!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index bf48a1907..f5e0e6e46 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -224,6 +224,7 @@ function PublishForm(props: Props) {
     (activeChannelClaim && activeChannelClaim.claim_id);
 
   const nameEdited = isStillEditing && name !== prevName;
+  const thumbnailUploaded = uploadThumbnailStatus === THUMBNAIL_STATUSES.COMPLETE && thumbnail;
 
   const waitingForFile = waitForFile && !remoteUrl && !filePath;
   // If they are editing, they don't need a new file chosen
@@ -235,7 +236,7 @@ function PublishForm(props: Props) {
     thumbnail &&
     !bidError &&
     !emptyPostError &&
-    !thumbnailError &&
+    !(thumbnailError && !thumbnailUploaded) &&
     !(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
 
   const isOverwritingExistingClaim = !editingURI && myClaimForUri;
diff --git a/ui/component/publishFormErrors/view.jsx b/ui/component/publishFormErrors/view.jsx
index 36fa4d355..1c9e96416 100644
--- a/ui/component/publishFormErrors/view.jsx
+++ b/ui/component/publishFormErrors/view.jsx
@@ -35,6 +35,7 @@ function PublishFormErrors(props: Props) {
   // If there is an error it will be presented as an inline error as well
 
   const isUploadingThumbnail = uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS;
+  const thumbnailUploaded = uploadThumbnailStatus === THUMBNAIL_STATUSES.COMPLETE && thumbnail;
 
   return (
     <div className="error__text">
@@ -48,7 +49,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>}
+      {thumbnailError && !thumbnailUploaded && <div>{__('Thumbnail is invalid.')}</div>}
       {editingURI && !isStillEditing && !filePath && (
         <div>{__('Please reselect a file after changing the LBRY URL')}</div>
       )}
diff --git a/ui/component/selectThumbnail/view.jsx b/ui/component/selectThumbnail/view.jsx
index 969821f94..c3eded83e 100644
--- a/ui/component/selectThumbnail/view.jsx
+++ b/ui/component/selectThumbnail/view.jsx
@@ -68,13 +68,13 @@ class SelectThumbnail extends React.PureComponent<Props> {
       isSupportedVideo = actualFilePath.type.split('/')[0] === 'video';
     }
 
-    let thumbnailSrc;
+    let thumbnailInputSrc;
     if (!thumbnail) {
-      thumbnailSrc = ThumbnailMissingImage;
+      thumbnailInputSrc = ThumbnailMissingImage;
     } else if (thumbnailError) {
-      thumbnailSrc = ThumbnailBrokenImage;
+      thumbnailInputSrc = ThumbnailBrokenImage;
     } else {
-      thumbnailSrc = thumbnail;
+      thumbnailInputSrc = thumbnail;
     }
 
     /*
@@ -88,10 +88,10 @@ class SelectThumbnail extends React.PureComponent<Props> {
       <div>
         {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
           <div className="column">
-            <div className="column__item thumbnail-preview" style={{ backgroundImage: `url(${thumbnailSrc})` }}>
+            <div className="column__item thumbnail-preview" style={{ backgroundImage: `url(${thumbnailInputSrc})` }}>
               <img
                 style={{ display: 'none' }}
-                src={thumbnailSrc}
+                src={thumbnailInputSrc}
                 alt={__('Thumbnail Preview')}
                 onError={() => updatePublishForm({ thumbnailError: true })}
               />
@@ -128,7 +128,16 @@ 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})` }} />
+                <div className="column__item thumbnail-preview" style={{ backgroundImage: `url(${thumbnail})` }}>
+                  {(thumbnailError !== false) && __('This will be visible in a few minutes.')}
+                  <img
+                    style={{ display: 'none' }}
+                    src={thumbnail}
+                    alt={__('Thumbnail Preview')}
+                    onError={() => updatePublishForm({ thumbnailError: true })}
+                    onLoad={() => updatePublishForm({ thumbnailError: false })}
+                  />
+                </div>
                 <div className="column__item">
                   <p>{__('Upload complete.')}</p>
                   <div className="section__actions">
diff --git a/ui/page/channels/index.js b/ui/page/channels/index.js
index a2f9321ab..bcad229ff 100644
--- a/ui/page/channels/index.js
+++ b/ui/page/channels/index.js
@@ -4,17 +4,30 @@ import {
   selectMyChannelUrls,
   doFetchChannelListMine,
   selectFetchingMyChannels,
+  makeSelectClaimIsPending,
 } from 'lbry-redux';
 import { doSetActiveChannel } from 'redux/actions/app';
 import { selectYoutubeChannels } from 'redux/selectors/user';
 import ChannelsPage from './view';
 
-const select = (state) => ({
-  channelUrls: selectMyChannelUrls(state),
-  channels: selectMyChannelClaims(state),
-  fetchingChannels: selectFetchingMyChannels(state),
-  youtubeChannels: selectYoutubeChannels(state),
-});
+const select = (state) => {
+  const channelUrls = selectMyChannelUrls(state);
+  let pendingChannels = [];
+  if (channelUrls) {
+    channelUrls.map((channelUrl) => {
+      const isPendingUrl = makeSelectClaimIsPending(channelUrl)(state);
+      if (isPendingUrl) pendingChannels.push(channelUrl);
+    });
+  }
+
+  return {
+    channelUrls,
+    channels: selectMyChannelClaims(state),
+    fetchingChannels: selectFetchingMyChannels(state),
+    youtubeChannels: selectYoutubeChannels(state),
+    pendingChannels,
+  };
+};
 
 const perform = (dispatch) => ({
   fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
diff --git a/ui/page/channels/view.jsx b/ui/page/channels/view.jsx
index aa4e41c52..740456040 100644
--- a/ui/page/channels/view.jsx
+++ b/ui/page/channels/view.jsx
@@ -20,18 +20,26 @@ type Props = {
   fetchingChannels: boolean,
   youtubeChannels: ?Array<any>,
   doSetActiveChannel: (string) => void,
+  pendingChannels: Array<string>,
 };
 
 export default function ChannelsPage(props: Props) {
-  const { channels, channelUrls, fetchChannelListMine, fetchingChannels, youtubeChannels, doSetActiveChannel } = props;
+  const {
+    channelUrls,
+    fetchChannelListMine,
+    fetchingChannels,
+    youtubeChannels,
+    doSetActiveChannel,
+    pendingChannels,
+  } = props;
   const [rewardData, setRewardData] = React.useState();
   const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
-  const hasPendingChannels = channels && channels.some((channel) => channel.confirmations < 0);
+
   const { push } = useHistory();
 
   useEffect(() => {
     fetchChannelListMine();
-  }, [fetchChannelListMine, hasPendingChannels]);
+  }, [fetchChannelListMine]);
 
   useEffect(() => {
     Lbryio.call('user_rewards', 'view_rate').then((data) => setRewardData(data));
@@ -86,7 +94,7 @@ export default function ChannelsPage(props: Props) {
                   return data.channel_claim_id === claim.claim_id;
                 });
 
-              if (channelRewardData) {
+              if (channelRewardData && !pendingChannels.includes(claim.permanent_url)) {
                 return (
                   <span className="claim-preview__custom-properties">
                     <span className="help--inline">