56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import { parseURI } from 'lbry-redux';
|
|
import classnames from 'classnames';
|
|
import Gerbil from './gerbil.png';
|
|
|
|
type Props = {
|
|
thumbnail: ?string,
|
|
uri: ?string,
|
|
className?: string,
|
|
thumbnailPreview: ?string,
|
|
obscure?: boolean,
|
|
small?: boolean,
|
|
};
|
|
|
|
function ChannelThumbnail(props: Props) {
|
|
const { thumbnail, uri, className, thumbnailPreview, obscure, small = false } = props;
|
|
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`;
|
|
}
|
|
return (
|
|
<div
|
|
className={classnames('channel-thumbnail', className, {
|
|
[colorClassName]: !showThumb,
|
|
'channel-thumbnail--small': small,
|
|
})}
|
|
>
|
|
{!showThumb && (
|
|
<img
|
|
alt={__('Channel profile picture')}
|
|
className="channel-thumbnail__default"
|
|
src={thumbnailPreview || Gerbil}
|
|
/>
|
|
)}
|
|
{showThumb && (
|
|
<img
|
|
alt={__('Channel profile picture')}
|
|
className="channel-thumbnail__custom"
|
|
src={thumbnailPreview || thumbnail}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ChannelThumbnail;
|