LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Disable thumbnail lazy-load for Channels

Browse source 
## Issue
5933: Thumbnail lazy-load causes ChannelSelector icon to not update
This commit is contained in:
infinite-persistence 2021-04-22 23:37:25 +08:00 committed by Sean Yesmunt
parent a3af1ad44d
commit b5cc0bb42d
1 changed files with 2 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,6 @@ import classnames from 'classnames';
import Gerbil from './gerbil.png';
import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
import ChannelStakedIndicator from 'component/channelStakedIndicator';
import useLazyLoading from 'effects/use-lazy-loading';
type Props = {
thumbnail: ?string,
@ -43,7 +42,6 @@ function ChannelThumbnail(props: Props) {
const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
const channelThumbnail = thumbnail || thumbnailPreview;
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;
@ -61,8 +59,6 @@ function ChannelThumbnail(props: Props) {
}
}, [doResolveUri, shouldResolve, uri]);
useLazyLoading(thumbnailRef, 0.25, [showThumb]);
if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
return (
<FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)}>
@ -81,10 +77,9 @@ function ChannelThumbnail(props: Props) {
>
{!showThumb && (
<img
ref={thumbnailRef}
alt={__('Channel profile picture')}
className="channel-thumbnail__default"
data-src={!thumbError && thumbnailPreview ? thumbnailPreview : Gerbil}
src={!thumbError && thumbnailPreview ? thumbnailPreview : Gerbil}
onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
/>
)}
@ -94,10 +89,9 @@ 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"
data-src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
/>
)}