FileThumbnail: don't go through optimizer if GIF
## Issue 6301: don't use CDN for GIF thumbnails ## Note Just a minor mistake in the recent thumbnail refactoring; left out the handling when `allowGif` is true.
This commit is contained in:
parent
6d8fce6011
commit
2ba3f05725
2 changed files with 9 additions and 6 deletions
|
@ -19,11 +19,14 @@ type Props = {
|
||||||
|
|
||||||
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 } = 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;
|
||||||
const thumbnail = passedThumbnail || thumbnailFromClaim;
|
const thumbnail = passedThumbnail || thumbnailFromClaim;
|
||||||
|
|
||||||
const hasResolvedClaim = claim !== undefined;
|
const hasResolvedClaim = claim !== undefined;
|
||||||
|
const isGif = thumbnail && thumbnail.endsWith('gif');
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!hasResolvedClaim && uri) {
|
if (!hasResolvedClaim && uri) {
|
||||||
|
@ -31,7 +34,7 @@ function FileThumbnail(props: Props) {
|
||||||
}
|
}
|
||||||
}, [hasResolvedClaim, uri, doResolveUri]);
|
}, [hasResolvedClaim, uri, doResolveUri]);
|
||||||
|
|
||||||
if (!allowGifs && thumbnail && thumbnail.endsWith('gif')) {
|
if (!allowGifs && isGif) {
|
||||||
return (
|
return (
|
||||||
<FreezeframeWrapper src={thumbnail} className={classnames('media__thumb', className)}>
|
<FreezeframeWrapper src={thumbnail} className={classnames('media__thumb', className)}>
|
||||||
{children}
|
{children}
|
||||||
|
@ -42,15 +45,15 @@ function FileThumbnail(props: Props) {
|
||||||
let url = thumbnail || (hasResolvedClaim ? Placeholder : '');
|
let url = thumbnail || (hasResolvedClaim ? Placeholder : '');
|
||||||
// @if TARGET='web'
|
// @if TARGET='web'
|
||||||
// Pass image urls through a compression proxy
|
// Pass image urls through a compression proxy
|
||||||
if (thumbnail) {
|
if (thumbnail && !(isGif && allowGifs)) {
|
||||||
url = getThumbnailCdnUrl({ thumbnail });
|
url = getThumbnailCdnUrl({ thumbnail });
|
||||||
}
|
}
|
||||||
// @endif
|
// @endif
|
||||||
|
|
||||||
const thumnailUrl = url ? url.replace(/'/g, "\\'") : '';
|
const thumbnailUrl = url ? url.replace(/'/g, "\\'") : '';
|
||||||
|
|
||||||
if (hasResolvedClaim || thumnailUrl) {
|
if (hasResolvedClaim || thumbnailUrl) {
|
||||||
return <Thumb thumb={thumnailUrl}>{children}</Thumb>;
|
return <Thumb thumb={thumbnailUrl}>{children}</Thumb>;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -15,7 +15,7 @@ function LoginGraphic(props: any) {
|
||||||
|
|
||||||
let newSrc = imgUrl && imgUrl.trim().replace(/^http:\/\//i, 'https://');
|
let newSrc = imgUrl && imgUrl.trim().replace(/^http:\/\//i, 'https://');
|
||||||
// @if TARGET='web'
|
// @if TARGET='web'
|
||||||
// Pass image urls through a compression proxy, except for GIFs.
|
// Pass image urls through a compression proxy.
|
||||||
newSrc = getThumbnailCdnUrl({ thumbnail: newSrc, width: newWidth, height: newWidth * 2 });
|
newSrc = getThumbnailCdnUrl({ thumbnail: newSrc, width: newWidth, height: newWidth * 2 });
|
||||||
// @endif
|
// @endif
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue