ChannelThumbnail fixes (#6075)

* Restore "use cdn for channel thumbnails"

This reverts commit e7adc607fa.

* ChannelThumbnail: disable optimization in Channel Page and for GIFs

## Issue
5564: Don't use optimized URLs on channel pages (profile/banner)

## Notes
This is not the best/full solution yet, but it is better than what we have to today (one step in the right direction).

Optimized channel thumbnail size is currently hardcoded to a lowest common denominator.
- Pro(s):
  - For images used in multiple places (different sizes) in a page, the total time needed to get the optimized version for each size is too much. Also, the optimizer seems to increase the size of the image in some cases. So, getting 1 image and re-using it is faster for this scenario.
  - Simpler code (no need to mount first -> get dimension -> load image)
- Cons:
  - We aren't fully optimizing the size, so not really addressing Core Web Vitals score problem.
    - e.g. in the front page, we could have used a smaller image for the channel thumbnails.
  - We haven't address the problem with large screen sizes.

* Restore channel selector

This reverts b5cc0bb42d

* ChannelThumbnail: fix lazy-loading

- Closes 6066: Revisit lazy-loading Channel thumbnails
- Properly fixes 5933: Thumbnail lazy-load causes ChannelSelector icon to not update.
    - Add effect-dependency on `channelThumbnail` and `thumbError`.
- Really perform the lazy-loading now.
    - `data-src` was not used, so it wasn't actually lazy loading previously.

ui/component/channelThumbnail/view.jsx

@@ -5,6 +5,8 @@ import classnames from 'classnames';
 import Gerbil from './gerbil.png';
 import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
 import ChannelStakedIndicator from 'component/channelStakedIndicator';
+import { getThumbnailCdnUrl } from 'util/thumbnail';
+import useLazyLoading from 'effects/use-lazy-loading';
 
 type Props = {
   thumbnail: ?string,
@@ -20,6 +22,7 @@ type Props = {
   showDelayedMessage?: boolean,
   hideStakedIndicator?: boolean,
   xsmall?: boolean,
+  noOptimization?: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
@@ -37,13 +40,16 @@ function ChannelThumbnail(props: Props) {
     isResolving,
     showDelayedMessage = false,
     hideStakedIndicator = false,
+    noOptimization,
   } = 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 isGif = channelThumbnail && channelThumbnail.endsWith('gif');
   const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
+  const thumbnailRef = React.useRef(null);
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
   let initializer;
@@ -61,7 +67,9 @@ function ChannelThumbnail(props: Props) {
     }
   }, [doResolveUri, shouldResolve, uri]);
 
-  if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
+  useLazyLoading(thumbnailRef, 0.25, [showThumb, thumbError, channelThumbnail]);
+
+  if (isGif && !allowGifs) {
     return (
       <FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)}>
         {!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
@@ -69,6 +77,14 @@ function ChannelThumbnail(props: Props) {
     );
   }
 
+  let url = channelThumbnail;
+  // @if TARGET='web'
+  // Pass image urls through a compression proxy, except for GIFs.
+  if (thumbnail && !noOptimization && !(isGif && allowGifs)) {
+    url = getThumbnailCdnUrl({ thumbnail });
+  }
+  // @endif
+
   return (
     <div
       className={classnames('channel-thumbnail', className, {
@@ -80,9 +96,10 @@ function ChannelThumbnail(props: Props) {
     >
       {!showThumb && (
         <img
+          ref={thumbnailRef}
           alt={__('Channel profile picture')}
           className="channel-thumbnail__default"
-          src={!thumbError && thumbnailPreview ? thumbnailPreview : Gerbil}
+          data-src={!thumbError && url ? url : Gerbil}
           onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
         />
       )}
@@ -92,9 +109,10 @@ function ChannelThumbnail(props: Props) {
             <div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
           ) : (
             <img
+              ref={thumbnailRef}
               alt={__('Channel profile picture')}
               className="channel-thumbnail__custom"
-              src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
+              data-src={!thumbError && url ? url : Gerbil}
               onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
             />
           )}

ui/page/channel/view.jsx

@@ -168,7 +168,13 @@ function ChannelPage(props: Props) {
         </div>
         {cover && <img className={classnames('channel-cover__custom')} src={cover} />}
         <div className="channel__primary-info">
-          <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} allowGifs hideStakedIndicator />
+          <ChannelThumbnail
+            className="channel__thumbnail--channel-page"
+            uri={uri}
+            allowGifs
+            hideStakedIndicator
+            noOptimization
+          />
           <h1 className="channel__title">
             {title || '@' + channelName}
             <ChannelStakedIndicator uri={uri} large />