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 />