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

127 lines
4.1 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';
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
import { getThumbnailCdnUrl } from 'util/thumbnail';
import useLazyLoading from 'effects/use-lazy-loading';
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,
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,
hideStakedIndicator?: boolean,
2021-04-23 21:59:48 +02:00
xsmall?: boolean,
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
noOptimization?: 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,
hideStakedIndicator = false,
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
noOptimization,
} = 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 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 thumbnailRef = React.useRef(null);
// 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
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} />}
</FreezeframeWrapper>
);
}
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
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
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 && (
<img
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
ref={thumbnailRef}
2020-01-30 21:55:45 +01:00
alt={__('Channel profile picture')}
className="channel-thumbnail__default"
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
data-src={!thumbError && url ? url : Gerbil}
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>
) : (
<img
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
ref={thumbnailRef}
alt={__('Channel profile picture')}
className="channel-thumbnail__custom"
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
data-src={!thumbError && url ? url : Gerbil}
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;