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

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_LABEL_2: process.env.PINNED_LABEL_2,
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}`;

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

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