b256a4396b
more improvements, fix url, do the same for cover remember url, error if invalid unneeded addition Fix delayed message Lint Allow empty values (placeholder and Gerbil) Fix filepath crash Fix button
109 lines
3.4 KiB
JavaScript
109 lines
3.4 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import { parseURI } from 'lbry-redux';
|
|
import classnames from 'classnames';
|
|
import Gerbil from './gerbil.png';
|
|
import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
|
|
import ChannelStakedIndicator from 'component/channelStakedIndicator';
|
|
import OptimizedImage from 'component/optimizedImage';
|
|
import { AVATAR_DEFAULT } from 'config';
|
|
|
|
type Props = {
|
|
thumbnail: ?string,
|
|
uri: ?string,
|
|
className?: string,
|
|
thumbnailPreview: ?string,
|
|
obscure?: boolean,
|
|
small?: boolean,
|
|
xsmall?: boolean,
|
|
allowGifs?: boolean,
|
|
claim: ?ChannelClaim,
|
|
doResolveUri: (string) => void,
|
|
isResolving: boolean,
|
|
showDelayedMessage?: boolean,
|
|
noLazyLoad?: boolean,
|
|
hideStakedIndicator?: boolean,
|
|
xsmall?: boolean,
|
|
noOptimization?: boolean,
|
|
setThumbError: (boolean) => void,
|
|
thumbError: boolean,
|
|
};
|
|
|
|
function ChannelThumbnail(props: Props) {
|
|
const {
|
|
thumbnail: rawThumbnail,
|
|
uri,
|
|
className,
|
|
thumbnailPreview: rawThumbnailPreview,
|
|
obscure,
|
|
small = false,
|
|
xsmall = false,
|
|
allowGifs = false,
|
|
claim,
|
|
doResolveUri,
|
|
isResolving,
|
|
showDelayedMessage = false,
|
|
noLazyLoad,
|
|
hideStakedIndicator = false,
|
|
setThumbError,
|
|
} = props;
|
|
const shouldResolve = claim === undefined;
|
|
const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
|
|
const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
|
|
const defaultAvater = AVATAR_DEFAULT || Gerbil;
|
|
const channelThumbnail = thumbnailPreview || thumbnail || defaultAvater;
|
|
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);
|
|
let initializer;
|
|
let colorClassName;
|
|
if (channelName) {
|
|
initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
|
|
colorClassName = `channel-thumbnail__default--${Math.abs(initializer % 4)}`;
|
|
} else {
|
|
colorClassName = `channel-thumbnail__default--4`;
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
if (shouldResolve && uri) {
|
|
doResolveUri(uri);
|
|
}
|
|
}, [doResolveUri, shouldResolve, uri]);
|
|
|
|
if (isGif && !allowGifs) {
|
|
return (
|
|
<FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)}>
|
|
{!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
|
|
</FreezeframeWrapper>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={classnames('channel-thumbnail', className, {
|
|
[colorClassName]: !showThumb,
|
|
'channel-thumbnail--small': small,
|
|
'channel-thumbnail--xsmall': xsmall,
|
|
'channel-thumbnail--resolving': isResolving,
|
|
})}
|
|
>
|
|
{showDelayedMessage ? (
|
|
<div className="channel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
|
|
) : (
|
|
<OptimizedImage
|
|
alt={__('Channel profile picture')}
|
|
className={!channelThumbnail ? 'channel-thumbnail__default' : 'channel-thumbnail__custom'}
|
|
src={channelThumbnail}
|
|
loading={noLazyLoad ? undefined : 'lazy'}
|
|
onError={() => setThumbError(true)}
|
|
/>
|
|
)}
|
|
{!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ChannelThumbnail;
|