LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-23 17:47:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Optimize ChannelThumbnail using the new method

Browse source
This commit is contained in:
infinite-persistence 2021-07-16 11:28:17 +08:00
parent a21b4c5cf3
commit 11b5eb49a0
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 5 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
ui/component/channelThumbnail/view.jsx
View file

@ -5,12 +5,7 @@ import classnames from 'classnames';
import Gerbil from './gerbil.png'; import Gerbil from './gerbil.png';
import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper'; import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
import ChannelStakedIndicator from 'component/channelStakedIndicator'; import ChannelStakedIndicator from 'component/channelStakedIndicator';
import { getThumbnailCdnUrl } from 'util/thumbnail'; import OptimizedImage from 'component/optimizedImage';
const FONT_PX = 16.0;
const IMG_XSMALL_REM = 2.1;
const IMG_SMALL_REM = 3.0;
const IMG_NORMAL_REM = 10.0;
type Props = { type Props = {
thumbnail: ?string, thumbnail: ?string,
@ -53,8 +48,6 @@ function ChannelThumbnail(props: Props) {
const channelThumbnail = thumbnail || thumbnailPreview; const channelThumbnail = thumbnail || thumbnailPreview;
const isGif = channelThumbnail && channelThumbnail.endsWith('gif'); const isGif = channelThumbnail && channelThumbnail.endsWith('gif');
const showThumb = (!obscure && !!thumbnail) || thumbnailPreview; const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
const thumbnailRef = React.useRef(null);
const thumbnailSize = calcRenderedImgWidth(); // currently always 1:1
// Generate a random color class based on the first letter of the channel name // Generate a random color class based on the first letter of the channel name
const { channelName } = parseURI(uri); const { channelName } = parseURI(uri);
@ -67,20 +60,6 @@ function ChannelThumbnail(props: Props) {
colorClassName = `channel-thumbnail__default--4`; colorClassName = `channel-thumbnail__default--4`;
} }
function calcRenderedImgWidth() {
let rem;
if (xsmall) {
rem = IMG_XSMALL_REM;
} else if (small) {
rem = IMG_SMALL_REM;
} else {
rem = IMG_NORMAL_REM;
}
const devicePixelRatio = window.devicePixelRatio || 1.0;
return Math.ceil(rem * devicePixelRatio * FONT_PX);
}
React.useEffect(() => { React.useEffect(() => {
if (shouldResolve && uri) { if (shouldResolve && uri) {
doResolveUri(uri); doResolveUri(uri);
@ -94,15 +73,6 @@ function ChannelThumbnail(props: Props) {
</FreezeframeWrapper> </FreezeframeWrapper>
); );
} }
let url = channelThumbnail;
// @if TARGET='web'
// Pass image urls through a compression proxy, except for GIFs.
if (thumbnail && !(isGif && allowGifs)) {
url = getThumbnailCdnUrl({ thumbnail, width: thumbnailSize, height: thumbnailSize, quality: 85 });
}
// @endif
return ( return (
<div <div
className={classnames('channel-thumbnail', className, { className={classnames('channel-thumbnail', className, {
@ -113,13 +83,10 @@ function ChannelThumbnail(props: Props) {
})} })}
> >
{!showThumb && ( {!showThumb && (
<img <OptimizedImage
ref={thumbnailRef}
alt={__('Channel profile picture')} alt={__('Channel profile picture')}
className="channel-thumbnail__default" className="channel-thumbnail__default"
src={!thumbError && url ? url : Gerbil} src={!thumbError && channelThumbnail ? channelThumbnail : Gerbil}
width={thumbnailSize}
height={thumbnailSize}
loading={noLazyLoad ? undefined : 'lazy'} loading={noLazyLoad ? undefined : 'lazy'}
onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil. onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
/> />
@ -129,13 +96,10 @@ function ChannelThumbnail(props: Props) {
{showDelayedMessage && thumbError ? ( {showDelayedMessage && thumbError ? (
<div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div> <div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
) : ( ) : (
<img <OptimizedImage
ref={thumbnailRef}
alt={__('Channel profile picture')} alt={__('Channel profile picture')}
className="channel-thumbnail__custom" className="channel-thumbnail__custom"
src={!thumbError && url ? url : Gerbil} src={!thumbError && channelThumbnail ? channelThumbnail : Gerbil}
width={thumbnailSize}
height={thumbnailSize}
loading={noLazyLoad ? undefined : 'lazy'} loading={noLazyLoad ? undefined : 'lazy'}
onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil. onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
/> />