force https thumbs or handle img src error

ui/component/channelThumbnail/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { useState } from 'react';
 import { parseURI } from 'lbry-redux';
 import classnames from 'classnames';
 import Gerbil from './gerbil.png';
@@ -16,9 +16,20 @@ type Props = {
 };
 
 function ChannelThumbnail(props: Props) {
-  const { thumbnail, uri, className, thumbnailPreview, obscure, small = false, allowGifs = false } = props;
+  const {
+    thumbnail: rawThumbnail,
+    uri,
+    className,
+    thumbnailPreview: rawThumbnailPreview,
+    obscure,
+    small = false,
+    allowGifs = false,
+  } = props;
+  const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
+  const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
   const channelThumbnail = thumbnail || thumbnailPreview;
 
+  const [thumbError, setThumbError] = useState(false);
   if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
     return <FreezeframeWrapper src={channelThumbnail} className="channel-thumbnail" />;
   }
@@ -54,7 +65,8 @@ function ChannelThumbnail(props: Props) {
         <img
           alt={__('Channel profile picture')}
           className="channel-thumbnail__custom"
-          src={thumbnailPreview || thumbnail}
+          src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
+          onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
         />
       )}
     </div>

ui/component/fileThumbnail/view.jsx

@@ -14,7 +14,8 @@ const className = 'media__thumb';
 
 class FileThumbnail extends React.PureComponent<Props> {
   render() {
-    const { thumbnail, children, allowGifs = false } = this.props;
+    const { thumbnail: rawThumbnail, children, allowGifs = false } = this.props;
+    const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
 
     if (!allowGifs && thumbnail && thumbnail.endsWith('gif')) {
       return <FreezeframeWrapper src={thumbnail} className={className} />;

ui/page/channel/view.jsx

@@ -82,6 +82,7 @@ function ChannelPage(props: Props) {
   const { search } = location;
   const urlParams = new URLSearchParams(search);
   const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
+  const [coverError, setCoverError] = useState(false);
   const { permanent_url: permanentUrl } = claim;
   const [editing, setEditing] = useState(false);
   const [thumbPreview, setThumbPreview] = useState(thumbnail);
@@ -223,10 +224,11 @@ function ChannelPage(props: Props) {
           {!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
           {!isSubscribed && <BlockButton uri={permanentUrl} />}
         </div>
-        {!editing && cover && (
+        {!editing && cover && !coverError && (
           <img
             className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
             src={cover}
+            onError={() => setCoverError(true)}
           />
         )}
         {editing && <img className="channel-cover__custom" src={coverPreview} />}