lbry-desktop/ui/component/channelThumbnail/view.jsx

115 lines
3.8 KiB
React
Raw Normal View History

2019-05-07 04:35:04 +02:00
// @flow
import React from 'react';
2019-05-11 21:06:22 +02:00
import { parseURI } from 'lbry-redux';
import classnames from 'classnames';
import Gerbil from './gerbil.png';
2020-05-28 19:07:04 +02:00
import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
import ChannelStakedIndicator from 'component/channelStakedIndicator';
import OptimizedImage from 'component/optimizedImage';
2019-05-07 04:35:04 +02:00
type Props = {
thumbnail: ?string,
uri: ?string,
2019-06-11 20:10:58 +02:00
className?: string,
thumbnailPreview: ?string,
obscure?: boolean,
2019-12-04 19:07:40 +01:00
small?: boolean,
ChannelThumbnail improvements - [x] (6332) The IntersectionObserver method of lazy-loading loads cached images visibly late on slower devices. Previously, it was also showing the "broken image" icon briefly, which we mended by placing a dummy transparent image as the initial src. - Reverted that ugly transparent image fix. - Use the browser's built-in `loading="lazy"` instead. Sorry, Safari. - [x] Size-optimization did not take "device pixel ratio" into account. - When resizing an image through the CDN, we can't just take the dimensions of the tag in pixels directly -- we need to take zooming into account, otherwise the image ends up blurry. - Previously, we quickly disabled optimization for the channel avatar in the Channel Page because of this. Now that we know the root-cause, the change was reverted and we now go through the CDN with appropriate sizes. This also improves our Web Vital scores. - [x] Size-optimization wasn't really implemented for all ChannelThumbnail instances. - The CDN-optimized size was hardcoded to the largest instance, so small images like sidebar thumbnails are still loading images that are unnecessarily larger. - There's a little-bit of hardcoding of values from CSS here, but I think it's a ok compromise (not something we change often). It also doesn't need to be exact -- the "device pixel ratio" calculate will ensure it's slightly larger than what we need. - [x] Set `width` and `height` of `<img>` to improve CLS. - Addresses Ligthhouse complaints, although technically the shifting was addressed at the `ClaimPreviewTile` level (sub-container dimensions are well defined). - Notes: the values don't need to be the final CSS-adjusted sizes. It just needs to be in the right aspect ratio to help the browser pre-allocate space to avoid shifts. - [x] Add option to disable lazy-load Channel Thumbnails - The guidelines mentioned that items that are already in the viewport should not enable `loading="lazy"`. - We have a few areas where it doesn't make sense to lazy-load (e.g. thumbnail in Header, channel selector dropdown, publish preview, etc.).
2021-07-05 07:20:40 +02:00
xsmall?: boolean,
2020-05-28 19:07:04 +02:00
allowGifs?: boolean,
2020-07-23 16:22:57 +02:00
claim: ?ChannelClaim,
doResolveUri: (string) => void,
2020-08-24 20:44:41 +02:00
isResolving: boolean,
showDelayedMessage?: boolean,
ChannelThumbnail improvements - [x] (6332) The IntersectionObserver method of lazy-loading loads cached images visibly late on slower devices. Previously, it was also showing the "broken image" icon briefly, which we mended by placing a dummy transparent image as the initial src. - Reverted that ugly transparent image fix. - Use the browser's built-in `loading="lazy"` instead. Sorry, Safari. - [x] Size-optimization did not take "device pixel ratio" into account. - When resizing an image through the CDN, we can't just take the dimensions of the tag in pixels directly -- we need to take zooming into account, otherwise the image ends up blurry. - Previously, we quickly disabled optimization for the channel avatar in the Channel Page because of this. Now that we know the root-cause, the change was reverted and we now go through the CDN with appropriate sizes. This also improves our Web Vital scores. - [x] Size-optimization wasn't really implemented for all ChannelThumbnail instances. - The CDN-optimized size was hardcoded to the largest instance, so small images like sidebar thumbnails are still loading images that are unnecessarily larger. - There's a little-bit of hardcoding of values from CSS here, but I think it's a ok compromise (not something we change often). It also doesn't need to be exact -- the "device pixel ratio" calculate will ensure it's slightly larger than what we need. - [x] Set `width` and `height` of `<img>` to improve CLS. - Addresses Ligthhouse complaints, although technically the shifting was addressed at the `ClaimPreviewTile` level (sub-container dimensions are well defined). - Notes: the values don't need to be the final CSS-adjusted sizes. It just needs to be in the right aspect ratio to help the browser pre-allocate space to avoid shifts. - [x] Add option to disable lazy-load Channel Thumbnails - The guidelines mentioned that items that are already in the viewport should not enable `loading="lazy"`. - We have a few areas where it doesn't make sense to lazy-load (e.g. thumbnail in Header, channel selector dropdown, publish preview, etc.).
2021-07-05 07:20:40 +02:00
noLazyLoad?: boolean,
hideStakedIndicator?: boolean,
2019-05-07 04:35:04 +02:00
};
function ChannelThumbnail(props: Props) {
const {
thumbnail: rawThumbnail,
uri,
className,
thumbnailPreview: rawThumbnailPreview,
obscure,
small = false,
2021-04-23 21:59:48 +02:00
xsmall = false,
allowGifs = false,
2020-07-23 16:22:57 +02:00
claim,
doResolveUri,
2020-08-24 20:44:41 +02:00
isResolving,
showDelayedMessage = false,
ChannelThumbnail improvements - [x] (6332) The IntersectionObserver method of lazy-loading loads cached images visibly late on slower devices. Previously, it was also showing the "broken image" icon briefly, which we mended by placing a dummy transparent image as the initial src. - Reverted that ugly transparent image fix. - Use the browser's built-in `loading="lazy"` instead. Sorry, Safari. - [x] Size-optimization did not take "device pixel ratio" into account. - When resizing an image through the CDN, we can't just take the dimensions of the tag in pixels directly -- we need to take zooming into account, otherwise the image ends up blurry. - Previously, we quickly disabled optimization for the channel avatar in the Channel Page because of this. Now that we know the root-cause, the change was reverted and we now go through the CDN with appropriate sizes. This also improves our Web Vital scores. - [x] Size-optimization wasn't really implemented for all ChannelThumbnail instances. - The CDN-optimized size was hardcoded to the largest instance, so small images like sidebar thumbnails are still loading images that are unnecessarily larger. - There's a little-bit of hardcoding of values from CSS here, but I think it's a ok compromise (not something we change often). It also doesn't need to be exact -- the "device pixel ratio" calculate will ensure it's slightly larger than what we need. - [x] Set `width` and `height` of `<img>` to improve CLS. - Addresses Ligthhouse complaints, although technically the shifting was addressed at the `ClaimPreviewTile` level (sub-container dimensions are well defined). - Notes: the values don't need to be the final CSS-adjusted sizes. It just needs to be in the right aspect ratio to help the browser pre-allocate space to avoid shifts. - [x] Add option to disable lazy-load Channel Thumbnails - The guidelines mentioned that items that are already in the viewport should not enable `loading="lazy"`. - We have a few areas where it doesn't make sense to lazy-load (e.g. thumbnail in Header, channel selector dropdown, publish preview, etc.).
2021-07-05 07:20:40 +02:00
noLazyLoad,
hideStakedIndicator = false,
} = props;
const [thumbError, setThumbError] = React.useState(false);
2020-07-23 16:22:57 +02:00
const shouldResolve = claim === undefined;
const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
2020-05-28 19:07:04 +02:00
const channelThumbnail = thumbnail || thumbnailPreview;
ChannelThumbnail fixes (#6075) * Restore "use cdn for channel thumbnails" This reverts commit e7adc607faa418ee78f1bbff6cca9904e9039323. * 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 b5cc0bb42de162137a3df1b1cebc0b01bd2cee27 * 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.
2021-05-17 21:51:21 +02:00
const isGif = channelThumbnail && channelThumbnail.endsWith('gif');
2019-12-07 16:56:00 +01:00
const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
ChannelThumbnail improvements - [x] (6332) The IntersectionObserver method of lazy-loading loads cached images visibly late on slower devices. Previously, it was also showing the "broken image" icon briefly, which we mended by placing a dummy transparent image as the initial src. - Reverted that ugly transparent image fix. - Use the browser's built-in `loading="lazy"` instead. Sorry, Safari. - [x] Size-optimization did not take "device pixel ratio" into account. - When resizing an image through the CDN, we can't just take the dimensions of the tag in pixels directly -- we need to take zooming into account, otherwise the image ends up blurry. - Previously, we quickly disabled optimization for the channel avatar in the Channel Page because of this. Now that we know the root-cause, the change was reverted and we now go through the CDN with appropriate sizes. This also improves our Web Vital scores. - [x] Size-optimization wasn't really implemented for all ChannelThumbnail instances. - The CDN-optimized size was hardcoded to the largest instance, so small images like sidebar thumbnails are still loading images that are unnecessarily larger. - There's a little-bit of hardcoding of values from CSS here, but I think it's a ok compromise (not something we change often). It also doesn't need to be exact -- the "device pixel ratio" calculate will ensure it's slightly larger than what we need. - [x] Set `width` and `height` of `<img>` to improve CLS. - Addresses Ligthhouse complaints, although technically the shifting was addressed at the `ClaimPreviewTile` level (sub-container dimensions are well defined). - Notes: the values don't need to be the final CSS-adjusted sizes. It just needs to be in the right aspect ratio to help the browser pre-allocate space to avoid shifts. - [x] Add option to disable lazy-load Channel Thumbnails - The guidelines mentioned that items that are already in the viewport should not enable `loading="lazy"`. - We have a few areas where it doesn't make sense to lazy-load (e.g. thumbnail in Header, channel selector dropdown, publish preview, etc.).
2021-07-05 07:20:40 +02:00
// Generate a random color class based on the first letter of the channel name
2019-12-04 19:07:40 +01:00
const { channelName } = parseURI(uri);
let initializer;
2019-12-04 19:07:40 +01:00
let colorClassName;
if (channelName) {
initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
2019-12-04 19:07:40 +01:00
colorClassName = `channel-thumbnail__default--${Math.abs(initializer % 4)}`;
} else {
2019-12-04 19:07:40 +01:00
colorClassName = `channel-thumbnail__default--4`;
}
2020-07-23 16:22:57 +02:00
React.useEffect(() => {
if (shouldResolve && uri) {
doResolveUri(uri);
}
}, [doResolveUri, shouldResolve, uri]);
ChannelThumbnail fixes (#6075) * Restore "use cdn for channel thumbnails" This reverts commit e7adc607faa418ee78f1bbff6cca9904e9039323. * 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 b5cc0bb42de162137a3df1b1cebc0b01bd2cee27 * 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.
2021-05-17 21:51:21 +02:00
if (isGif && !allowGifs) {
return (
<FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)}>
{!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
</FreezeframeWrapper>
);
}
2019-05-07 04:35:04 +02:00
return (
2019-05-11 21:06:22 +02:00
<div
2019-06-11 20:10:58 +02:00
className={classnames('channel-thumbnail', className, {
2019-08-02 17:11:31 +02:00
[colorClassName]: !showThumb,
2019-12-04 19:07:40 +01:00
'channel-thumbnail--small': small,
2021-04-23 21:59:48 +02:00
'channel-thumbnail--xsmall': xsmall,
2020-08-24 20:44:41 +02:00
'channel-thumbnail--resolving': isResolving,
2019-05-11 21:06:22 +02:00
})}
>
2020-01-30 21:55:45 +01:00
{!showThumb && (
<OptimizedImage
2020-01-30 21:55:45 +01:00
alt={__('Channel profile picture')}
className="channel-thumbnail__default"
src={!thumbError && channelThumbnail ? channelThumbnail : Gerbil}
ChannelThumbnail improvements - [x] (6332) The IntersectionObserver method of lazy-loading loads cached images visibly late on slower devices. Previously, it was also showing the "broken image" icon briefly, which we mended by placing a dummy transparent image as the initial src. - Reverted that ugly transparent image fix. - Use the browser's built-in `loading="lazy"` instead. Sorry, Safari. - [x] Size-optimization did not take "device pixel ratio" into account. - When resizing an image through the CDN, we can't just take the dimensions of the tag in pixels directly -- we need to take zooming into account, otherwise the image ends up blurry. - Previously, we quickly disabled optimization for the channel avatar in the Channel Page because of this. Now that we know the root-cause, the change was reverted and we now go through the CDN with appropriate sizes. This also improves our Web Vital scores. - [x] Size-optimization wasn't really implemented for all ChannelThumbnail instances. - The CDN-optimized size was hardcoded to the largest instance, so small images like sidebar thumbnails are still loading images that are unnecessarily larger. - There's a little-bit of hardcoding of values from CSS here, but I think it's a ok compromise (not something we change often). It also doesn't need to be exact -- the "device pixel ratio" calculate will ensure it's slightly larger than what we need. - [x] Set `width` and `height` of `<img>` to improve CLS. - Addresses Ligthhouse complaints, although technically the shifting was addressed at the `ClaimPreviewTile` level (sub-container dimensions are well defined). - Notes: the values don't need to be the final CSS-adjusted sizes. It just needs to be in the right aspect ratio to help the browser pre-allocate space to avoid shifts. - [x] Add option to disable lazy-load Channel Thumbnails - The guidelines mentioned that items that are already in the viewport should not enable `loading="lazy"`. - We have a few areas where it doesn't make sense to lazy-load (e.g. thumbnail in Header, channel selector dropdown, publish preview, etc.).
2021-07-05 07:20:40 +02:00
loading={noLazyLoad ? undefined : 'lazy'}
onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
2020-01-30 21:55:45 +01:00
/>
)}
{showThumb && (
<>
{showDelayedMessage && thumbError ? (
<div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
) : (
<OptimizedImage
alt={__('Channel profile picture')}
className="channel-thumbnail__custom"
src={!thumbError && channelThumbnail ? channelThumbnail : Gerbil}
ChannelThumbnail improvements - [x] (6332) The IntersectionObserver method of lazy-loading loads cached images visibly late on slower devices. Previously, it was also showing the "broken image" icon briefly, which we mended by placing a dummy transparent image as the initial src. - Reverted that ugly transparent image fix. - Use the browser's built-in `loading="lazy"` instead. Sorry, Safari. - [x] Size-optimization did not take "device pixel ratio" into account. - When resizing an image through the CDN, we can't just take the dimensions of the tag in pixels directly -- we need to take zooming into account, otherwise the image ends up blurry. - Previously, we quickly disabled optimization for the channel avatar in the Channel Page because of this. Now that we know the root-cause, the change was reverted and we now go through the CDN with appropriate sizes. This also improves our Web Vital scores. - [x] Size-optimization wasn't really implemented for all ChannelThumbnail instances. - The CDN-optimized size was hardcoded to the largest instance, so small images like sidebar thumbnails are still loading images that are unnecessarily larger. - There's a little-bit of hardcoding of values from CSS here, but I think it's a ok compromise (not something we change often). It also doesn't need to be exact -- the "device pixel ratio" calculate will ensure it's slightly larger than what we need. - [x] Set `width` and `height` of `<img>` to improve CLS. - Addresses Ligthhouse complaints, although technically the shifting was addressed at the `ClaimPreviewTile` level (sub-container dimensions are well defined). - Notes: the values don't need to be the final CSS-adjusted sizes. It just needs to be in the right aspect ratio to help the browser pre-allocate space to avoid shifts. - [x] Add option to disable lazy-load Channel Thumbnails - The guidelines mentioned that items that are already in the viewport should not enable `loading="lazy"`. - We have a few areas where it doesn't make sense to lazy-load (e.g. thumbnail in Header, channel selector dropdown, publish preview, etc.).
2021-07-05 07:20:40 +02:00
loading={noLazyLoad ? undefined : 'lazy'}
onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
/>
)}
</>
2020-01-30 21:55:45 +01:00
)}
{!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
2019-05-07 04:35:04 +02:00
</div>
);
}
export default ChannelThumbnail;