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

ChannelThumbnail: use 1x1 transparent image as starting point instead of 'undefined'.

Browse source 
## Issue
6135

While waiting for the lazy-loader IntersectionObserver to initialize, and for the real image to be fetched, an undefined `src` results in the "broken image" thumbnail.

## Fix
Use a transparent image as the starting point. This visually retains the current behavior but minus the "broken image" part.
This commit is contained in:
infinite-persistence 2021-06-01 19:12:08 +08:00 • committed by infinite-persistence
parent b90066b3f5
commit dec38e1770
2 changed files with 3 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
ui/component/channelThumbnail/transparent_1x1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 120 B

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

@ -3,6 +3,7 @@ import React from 'react';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
import classnames from 'classnames'; import classnames from 'classnames';
import Gerbil from './gerbil.png'; import Gerbil from './gerbil.png';
import Transparent from './transparent_1x1.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 { getThumbnailCdnUrl } from 'util/thumbnail';
@ -100,6 +101,7 @@ function ChannelThumbnail(props: Props) {
alt={__('Channel profile picture')} alt={__('Channel profile picture')}
className="channel-thumbnail__default" className="channel-thumbnail__default"
data-src={!thumbError && url ? url : Gerbil} data-src={!thumbError && url ? url : Gerbil}
src={Transparent}
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.
/> />
)} )}
@ -113,6 +115,7 @@ function ChannelThumbnail(props: Props) {
alt={__('Channel profile picture')} alt={__('Channel profile picture')}
className="channel-thumbnail__custom" className="channel-thumbnail__custom"
data-src={!thumbError && url ? url : Gerbil} data-src={!thumbError && url ? url : Gerbil}
src={Transparent}
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.
/> />
)} )}