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

Apply placeholder images

Browse source 
https://lbryians.slack.com/archives/C81FGKR51/p1624278721203900?thread_ts=1624269131.202200&cid=C81FGKR51

The intrinsic size needs to be at least equal the final image's size. Stretching, SVGs, etc. doesn't count.
This commit is contained in:
infinite-persistence 2021-07-19 09:42:04 +08:00
parent 1745f08fb8
commit 6f4ce0a57c
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
4 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
static/img/placeholderTx.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

7
ui/component/claimPreviewTile/view.jsx
View file

@ -17,6 +17,8 @@ import FileWatchLaterLink from 'component/fileWatchLaterLink';
import ClaimRepostAuthor from 'component/claimRepostAuthor';
import ClaimMenuList from 'component/claimMenuList';
import CollectionPreviewOverlay from 'component/collectionPreviewOverlay';
// $FlowFixMe cannot resolve ...
import PlaceholderTx from 'static/img/placeholderTx.gif';
type Props = {
uri: string,
@ -37,7 +39,6 @@ type Props = {
}>,
blockedChannelUris: Array<string>,
getFile: (string) => void,
placeholder: boolean,
streamingUrl: string,
isMature: boolean,
showMature: boolean,
@ -170,7 +171,9 @@ function ClaimPreviewTile(props: Props) {
if (placeholder || (!claim && isResolvingUri)) {
return (
<li className={classnames('claim-preview--tile', {})}>
<div className="placeholder media__thumb" />
<div className="placeholder media__thumb">
<img src={PlaceholderTx} alt="Placeholder" />
</div>
<div className="placeholder__wrapper">
<div className="placeholder claim-tile__title" />
<div className="placeholder claim-tile__info" />

3
ui/page/channel/view.jsx
View file

@ -23,6 +23,8 @@ import ChannelStakedIndicator from 'component/channelStakedIndicator';
import ClaimMenuList from 'component/claimMenuList';
import Yrbl from 'component/yrbl';
import I18nMessage from 'component/i18nMessage';
// $FlowFixMe cannot resolve ...
import PlaceholderTx from 'static/img/placeholderTx.gif';
export const PAGE_VIEW_QUERY = `view`;
const CONTENT_PAGE = 'content';
@ -217,6 +219,7 @@ function ChannelPage(props: Props) {
{/* TODO: add channel collections <ClaimCollectionAddButton uri={uri} fileAction /> */}
<ClaimMenuList uri={claim.permanent_url} channelUri={claim.permanent_url} inline isChannelPage />
</div>
{cover && <img className={classnames('channel-cover__custom')} src={PlaceholderTx} />}
{cover && <img className={classnames('channel-cover__custom')} src={cover} />}
<div className="channel__primary-info">
<ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} allowGifs hideStakedIndicator />

1
web/middleware/cache-control.js
View file

@ -14,6 +14,7 @@ const STATIC_ASSET_PATHS = [
'/public/img/gerbil-happy.png',
'/public/img/gerbil-sad.png',
'/public/img/placeholder.png',
'/public/img/placeholderTx.gif',
'/public/img/thumbnail-broken.png',
'/public/img/thumbnail-missing.png',
'/public/img/total-background.png',