From 9801f43d3e2c7ce953fe63e6c94211a53b1ed69e Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 19 Nov 2020 12:17:47 -0500
Subject: [PATCH] hack together a thumbnail message on the channel page

---
 config.js                                     |  2 --
 ui/component/channelEdit/view.jsx             |  9 ++++++++-
 ui/component/channelThumbnail/view.jsx        | 20 +++++++++++++------
 ui/modal/modalConfirmThumbnailUpload/view.jsx |  2 +-
 ui/scss/component/_channel.scss               | 15 ++++++++++++++
 5 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/config.js b/config.js
index d62bb3f38..59121e9ae 100644
--- a/config.js
+++ b/config.js
@@ -2,8 +2,6 @@
 // On Desktop App, this will find .env.defaults and optional .env in root dir
 require('dotenv-defaults').config({ silent: false });
 
-console.log('process.env.SIMPLE_SITE', process.env.SIMPLE_SITE);
-
 const config = {
   MATOMO_URL: process.env.MATOMO_URL,
   MATOMO_ID: process.env.MATOMO_ID,
diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx
index cd6df1ddb..dffac967f 100644
--- a/ui/component/channelEdit/view.jsx
+++ b/ui/component/channelEdit/view.jsx
@@ -80,6 +80,7 @@ function ChannelForm(props: Props) {
   } = props;
   const [nameError, setNameError] = React.useState(undefined);
   const [bidError, setBidError] = React.useState('');
+  const [coverError, setCoverError] = React.useState(false);
   const { claim_id: claimId } = claim || {};
   const [params, setParams]: [any, (any) => void] = React.useState(getChannelParams());
   const { channelName } = parseURI(uri);
@@ -228,7 +229,12 @@ function ChannelForm(props: Props) {
               iconSize={18}
             />
           </div>
-          {params.coverUrl && <img className="channel-cover__custom" src={params.coverUrl} />}
+          {params.coverUrl &&
+            (coverError ? (
+              <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)} />
+            ))}
           <div className="channel__primary-info">
             <div className="channel__edit-thumb">
               <Button
@@ -252,6 +258,7 @@ function ChannelForm(props: Props) {
               uri={uri}
               thumbnailPreview={params.thumbnailUrl}
               allowGifs
+              showDelayedMessage
             />
             <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 e4fa81cf3..ca78c46d4 100644
--- a/ui/component/channelThumbnail/view.jsx
+++ b/ui/component/channelThumbnail/view.jsx
@@ -16,6 +16,7 @@ type Props = {
   claim: ?ChannelClaim,
   doResolveUri: string => void,
   isResolving: boolean,
+  showDelayedMessage?: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
@@ -30,6 +31,7 @@ function ChannelThumbnail(props: Props) {
     claim,
     doResolveUri,
     isResolving,
+    showDelayedMessage = false,
   } = props;
   const [thumbError, setThumbError] = React.useState(false);
   const shouldResolve = claim === undefined;
@@ -74,12 +76,18 @@ function ChannelThumbnail(props: Props) {
         />
       )}
       {showThumb && (
-        <img
-          alt={__('Channel profile picture')}
-          className="channel-thumbnail__custom"
-          src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
-          onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
-        />
+        <>
+          {showDelayedMessage && thumbError ? (
+            <div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
+          ) : (
+            <img
+              alt={__('Channel profile picture')}
+              className="channel-thumbnail__custom"
+              src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
+              onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
+            />
+          )}
+        </>
       )}
     </div>
   );
diff --git a/ui/modal/modalConfirmThumbnailUpload/view.jsx b/ui/modal/modalConfirmThumbnailUpload/view.jsx
index 30dd7d6ab..f03569e39 100644
--- a/ui/modal/modalConfirmThumbnailUpload/view.jsx
+++ b/ui/modal/modalConfirmThumbnailUpload/view.jsx
@@ -20,7 +20,7 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
 
   render() {
     const { closeModal, file } = this.props;
-    console.log('file', file);
+
     return (
       <Modal
         isOpen
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index 668057405..063e0cb7b 100644
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@@ -34,6 +34,13 @@ $metadata-z-index: 1;
   }
 }
 
+.channel-cover__custom--waiting {
+  background-color: var(--color-gray-5);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
 .channel-cover__gradient {
   width: 100%;
   height: 100%;
@@ -69,6 +76,14 @@ $metadata-z-index: 1;
   width: 3rem;
 }
 
+.chanel-thumbnail--waiting {
+  background-color: var(--color-gray-5);
+  border-radius: var(--border-radius);
+  padding-top: 4rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .channel__thumbnail--channel-page {
   position: absolute;
   height: var(--channel-thumbnail-width);