ChannelThumbnail fixes #6075
1 changed files with 6 additions and 0 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Reference in a new issue