From 289ed12f0f2fae60fdb2bd0a8386ecba9910b1a6 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Mon, 17 May 2021 09:12:37 +0800 Subject: [PATCH 1/4] Restore "use cdn for channel thumbnails" This reverts commit e7adc607faa418ee78f1bbff6cca9904e9039323. --- ui/component/channelThumbnail/view.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx index 09692fb15..6407f228d 100644 --- a/ui/component/channelThumbnail/view.jsx +++ b/ui/component/channelThumbnail/view.jsx @@ -5,6 +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'; type Props = { thumbnail: ?string, @@ -69,6 +70,14 @@ function ChannelThumbnail(props: Props) { ); } + let url = channelThumbnail; + // @if TARGET='web' + // Pass image urls through a compression proxy + if (thumbnail) { + url = getThumbnailCdnUrl({ thumbnail }); + } + // @endif + return (
setThumbError(true)} // if thumb fails (including due to https replace, show gerbil. /> )} @@ -94,7 +103,7 @@ function ChannelThumbnail(props: Props) { {__('Channel setThumbError(true)} // if thumb fails (including due to https replace, show gerbil. /> )} -- 2.45.2 From 2cc42477beca5f467b2c92524b6b3dca90317306 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Mon, 17 May 2021 10:50:02 +0800 Subject: [PATCH 2/4] 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. --- ui/component/channelThumbnail/view.jsx | 9 ++++++--- ui/page/channel/view.jsx | 8 +++++++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx index 6407f228d..6079504c1 100644 --- a/ui/component/channelThumbnail/view.jsx +++ b/ui/component/channelThumbnail/view.jsx @@ -21,6 +21,7 @@ type Props = { showDelayedMessage?: boolean, hideStakedIndicator?: boolean, xsmall?: boolean, + noOptimization?: boolean, }; function ChannelThumbnail(props: Props) { @@ -38,12 +39,14 @@ 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; // Generate a random color class based on the first letter of the channel name const { channelName } = parseURI(uri); @@ -62,7 +65,7 @@ function ChannelThumbnail(props: Props) { } }, [doResolveUri, shouldResolve, uri]); - if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) { + if (isGif && !allowGifs) { return ( {!hideStakedIndicator && } @@ -72,8 +75,8 @@ function ChannelThumbnail(props: Props) { let url = channelThumbnail; // @if TARGET='web' - // Pass image urls through a compression proxy - if (thumbnail) { + // Pass image urls through a compression proxy, except for GIFs. + if (thumbnail && !noOptimization && !(isGif && allowGifs)) { url = getThumbnailCdnUrl({ thumbnail }); } // @endif diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx index ce2b68a05..41b8021c4 100644 --- a/ui/page/channel/view.jsx +++ b/ui/page/channel/view.jsx @@ -168,7 +168,13 @@ function ChannelPage(props: Props) {
{cover && }
- +

{title || '@' + channelName} -- 2.45.2 From 117fcc43d0725990e593f29cae69fd47f814958b Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Mon, 17 May 2021 14:17:31 +0800 Subject: [PATCH 3/4] Restore channel selector This reverts b5cc0bb42de162137a3df1b1cebc0b01bd2cee27 --- ui/component/channelThumbnail/view.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx index 6079504c1..94e43118f 100644 --- a/ui/component/channelThumbnail/view.jsx +++ b/ui/component/channelThumbnail/view.jsx @@ -6,6 +6,7 @@ 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, @@ -48,6 +49,7 @@ function ChannelThumbnail(props: Props) { 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; @@ -65,6 +67,8 @@ function ChannelThumbnail(props: Props) { } }, [doResolveUri, shouldResolve, uri]); + useLazyLoading(thumbnailRef, 0.25, [showThumb]); + if (isGif && !allowGifs) { return ( @@ -92,6 +96,7 @@ function ChannelThumbnail(props: Props) { > {!showThumb && ( {__('Channel{__('This will be visible in a few minutes.')}

) : ( {__('Channel Date: Mon, 17 May 2021 15:24:03 +0800 Subject: [PATCH 4/4] 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 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx index 94e43118f..bc0d56441 100644 --- a/ui/component/channelThumbnail/view.jsx +++ b/ui/component/channelThumbnail/view.jsx @@ -67,7 +67,7 @@ function ChannelThumbnail(props: Props) { } }, [doResolveUri, shouldResolve, uri]); - useLazyLoading(thumbnailRef, 0.25, [showThumb]); + useLazyLoading(thumbnailRef, 0.25, [showThumb, thumbError, channelThumbnail]); if (isGif && !allowGifs) { return ( @@ -99,7 +99,7 @@ function ChannelThumbnail(props: Props) { ref={thumbnailRef} alt={__('Channel profile picture')} className="channel-thumbnail__default" - src={!thumbError && url ? url : Gerbil} + data-src={!thumbError && url ? url : Gerbil} onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil. /> )} @@ -112,7 +112,7 @@ function ChannelThumbnail(props: Props) { ref={thumbnailRef} alt={__('Channel profile picture')} className="channel-thumbnail__custom" - src={!thumbError && url ? url : Gerbil} + data-src={!thumbError && url ? url : Gerbil} onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil. /> )} -- 2.45.2