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

Use fallback image for broken thumbnails

Browse source
This commit is contained in:
Franco Montenegro 2020-08-12 16:43:41 -03:00 • committed by Sean Yesmunt
parent 11e4480328
commit 6aae5987e6
2 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
config.js
View file

@ -40,6 +40,7 @@ const config = {
PINNED_URI_2: process.env.PINNED_URI_2, PINNED_URI_2: process.env.PINNED_URI_2,
PINNED_LABEL_2: process.env.PINNED_LABEL_2, PINNED_LABEL_2: process.env.PINNED_LABEL_2,
KNOWN_APP_DOMAINS: process.env.KNOWN_APP_DOMAINS ? process.env.KNOWN_APP_DOMAINS.split(',') : [], KNOWN_APP_DOMAINS: process.env.KNOWN_APP_DOMAINS ? process.env.KNOWN_APP_DOMAINS.split(',') : [],
THUMBNAIL_FALLBACK: process.env.THUMBNAIL_FALLBACK,
}; };
config.URL_LOCAL = `http://localhost:${config.WEB_SERVER_PORT}`; config.URL_LOCAL = `http://localhost:${config.WEB_SERVER_PORT}`;

8
ui/component/fileThumbnail/view.jsx
View file

@ -2,6 +2,7 @@
import type { Node } from 'react'; import type { Node } from 'react';
import { getThumbnailCdnUrl } from 'util/thumbnail'; import { getThumbnailCdnUrl } from 'util/thumbnail';
import React from 'react'; import React from 'react';
import { THUMBNAIL_FALLBACK } from 'config';
import FreezeframeWrapper from './FreezeframeWrapper'; import FreezeframeWrapper from './FreezeframeWrapper';
import Placeholder from './placeholder.png'; import Placeholder from './placeholder.png';
import classnames from 'classnames'; import classnames from 'classnames';
@ -14,10 +15,11 @@ type Props = {
claim: ?StreamClaim, claim: ?StreamClaim,
doResolveUri: string => void, doResolveUri: string => void,
className?: string, className?: string,
fallbackThumbnail?: string,
}; };
function FileThumbnail(props: Props) { function FileThumbnail(props: Props) {
const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className } = props; const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className, fallbackThumbnail = THUMBNAIL_FALLBACK } = props;
const passedThumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://'); const passedThumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
const thumbnailFromClaim = const thumbnailFromClaim =
uri && claim && claim.value && claim.value.thumbnail ? claim.value.thumbnail.url : undefined; uri && claim && claim.value && claim.value.thumbnail ? claim.value.thumbnail.url : undefined;
@ -46,9 +48,11 @@ function FileThumbnail(props: Props) {
} }
// @endif // @endif
const cleanUrl = url ? url.replace(/'/g, "\\'") : '';
return ( return (
<div <div
style={{ backgroundImage: `url('${url ? url.replace(/'/g, "\\'") : ''}')` }} style={{ backgroundImage: `url('${cleanUrl}'), url('${fallbackThumbnail}')` }}
className={classnames('media__thumb', className, { className={classnames('media__thumb', className, {
'media__thumb--resolving': !hasResolvedClaim, 'media__thumb--resolving': !hasResolvedClaim,
})} })}