ChannelThumbnail fixes #6075

Merged
infinite-persistence merged 4 commits from ip/reenable-channel-thumbnail-optimization into master 2021-05-17 21:51:21 +02:00
Showing only changes of commit 117fcc43d0 - Show all commits

View file

@ -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 (
<FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)}>
@ -92,6 +96,7 @@ function ChannelThumbnail(props: Props) {
>
{!showThumb && (
<img
ref={thumbnailRef}
alt={__('Channel profile picture')}
className="channel-thumbnail__default"
src={!thumbError && url ? url : Gerbil}
@ -104,6 +109,7 @@ 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 && url ? url : Gerbil}