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

75 lines
2.3 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';
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,
2019-05-07 04:35:04 +02:00
};
function ChannelThumbnail(props: Props) {
const {
thumbnail: rawThumbnail,
uri,
className,
thumbnailPreview: rawThumbnailPreview,
obscure,
small = false,
allowGifs = false,
} = props;
const [thumbError, setThumbError] = React.useState(false);
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;
2019-12-07 16:56:00 +01:00
const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
// 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`;
}
if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
return <FreezeframeWrapper src={channelThumbnail} className="channel-thumbnail" />;
}
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,
2019-05-11 21:06:22 +02:00
})}
>
2020-01-30 21:55:45 +01:00
{!showThumb && (
<img
alt={__('Channel profile picture')}
className="channel-thumbnail__default"
src={thumbnailPreview || Gerbil}
/>
)}
{showThumb && (
<img
alt={__('Channel profile picture')}
className="channel-thumbnail__custom"
src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
2020-01-30 21:55:45 +01:00
/>
)}
2019-05-07 04:35:04 +02:00
</div>
);
}
export default ChannelThumbnail;