Optimize ChannelThumbnail using the new method

ui/component/channelThumbnail/view.jsx

@@ -5,12 +5,7 @@ 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';
-
-const FONT_PX = 16.0;
-const IMG_XSMALL_REM = 2.1;
-const IMG_SMALL_REM = 3.0;
-const IMG_NORMAL_REM = 10.0;
+import OptimizedImage from 'component/optimizedImage';
 
 type Props = {
   thumbnail: ?string,
@@ -53,8 +48,6 @@ function ChannelThumbnail(props: Props) {
   const channelThumbnail = thumbnail || thumbnailPreview;
   const isGif = channelThumbnail && channelThumbnail.endsWith('gif');
   const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
-  const thumbnailRef = React.useRef(null);
-  const thumbnailSize = calcRenderedImgWidth(); // currently always 1:1
 
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
@@ -67,20 +60,6 @@ function ChannelThumbnail(props: Props) {
     colorClassName = `channel-thumbnail__default--4`;
   }
 
-  function calcRenderedImgWidth() {
-    let rem;
-    if (xsmall) {
-      rem = IMG_XSMALL_REM;
-    } else if (small) {
-      rem = IMG_SMALL_REM;
-    } else {
-      rem = IMG_NORMAL_REM;
-    }
-
-    const devicePixelRatio = window.devicePixelRatio || 1.0;
-    return Math.ceil(rem * devicePixelRatio * FONT_PX);
-  }
-
   React.useEffect(() => {
     if (shouldResolve && uri) {
       doResolveUri(uri);
@@ -94,15 +73,6 @@ function ChannelThumbnail(props: Props) {
       </FreezeframeWrapper>
     );
   }
-
-  let url = channelThumbnail;
-  // @if TARGET='web'
-  // Pass image urls through a compression proxy, except for GIFs.
-  if (thumbnail && !(isGif && allowGifs)) {
-    url = getThumbnailCdnUrl({ thumbnail, width: thumbnailSize, height: thumbnailSize, quality: 85 });
-  }
-  // @endif
-
   return (
     <div
       className={classnames('channel-thumbnail', className, {
@@ -113,13 +83,10 @@ function ChannelThumbnail(props: Props) {
       })}
     >
       {!showThumb && (
-        <img
-          ref={thumbnailRef}
+        <OptimizedImage
           alt={__('Channel profile picture')}
           className="channel-thumbnail__default"
-          src={!thumbError && url ? url : Gerbil}
-          width={thumbnailSize}
-          height={thumbnailSize}
+          src={!thumbError && channelThumbnail ? channelThumbnail : Gerbil}
           loading={noLazyLoad ? undefined : 'lazy'}
           onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
         />
@@ -129,13 +96,10 @@ function ChannelThumbnail(props: Props) {
           {showDelayedMessage && thumbError ? (
             <div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
           ) : (
-            <img
-              ref={thumbnailRef}
+            <OptimizedImage
               alt={__('Channel profile picture')}
               className="channel-thumbnail__custom"
-              src={!thumbError && url ? url : Gerbil}
-              width={thumbnailSize}
-              height={thumbnailSize}
+              src={!thumbError && channelThumbnail ? channelThumbnail : Gerbil}
               loading={noLazyLoad ? undefined : 'lazy'}
               onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
             />