Only apply the larger thumbnail width on mobile + tile layout

## Ticket
1526 strange thumbnail size requested on mobile layout (pc only?)

## Notes
The 900px was to account for blur tile thumbnails in mobile homepage (4f4803c6).
Fix to only do that in tile mode.
This commit is contained in:
infinite-persistence 2022-06-17 09:12:07 +08:00 committed by Thomas Zarebczan
parent eea0ec16e0
commit b8fceacb8a
3 changed files with 15 additions and 5 deletions

View file

@ -251,7 +251,7 @@ function ClaimPreviewTile(props: Props) {
})}
>
<NavLink {...navLinkProps} role="none" tabIndex={-1} aria-hidden>
<FileThumbnail thumbnail={thumbnailUrl} allowGifs>
<FileThumbnail thumbnail={thumbnailUrl} allowGifs tileLayout>
{!isChannel && (
<React.Fragment>
<div className="claim-preview__hover-actions">

View file

@ -142,7 +142,7 @@ function CollectionPreviewTile(props: Props) {
})}
>
<NavLink {...navLinkProps}>
<FileThumbnail uri={collectionItemUrls && collectionItemUrls.length && collectionItemUrls[0]}>
<FileThumbnail uri={collectionItemUrls && collectionItemUrls.length && collectionItemUrls[0]} tileLayout>
<React.Fragment>
<div className="claim-preview__claim-property-overlay">
<CollectionCount count={collectionCount} />

View file

@ -18,6 +18,7 @@ import Thumb from './thumb';
type Props = {
uri: string,
tileLayout?: boolean,
thumbnail: ?string, // externally sourced image
children?: Node,
allowGifs: boolean,
@ -27,7 +28,16 @@ type Props = {
};
function FileThumbnail(props: Props) {
const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className } = props;
const {
claim,
uri,
tileLayout,
doResolveUri,
thumbnail: rawThumbnail,
children,
allowGifs = false,
className,
} = props;
const passedThumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
const thumbnailFromClaim =
@ -64,8 +74,8 @@ function FileThumbnail(props: Props) {
} else {
url = getThumbnailCdnUrl({
thumbnail,
width: isMobile ? THUMBNAIL_WIDTH_MOBILE : THUMBNAIL_WIDTH,
height: isMobile ? THUMBNAIL_HEIGHT_MOBILE : THUMBNAIL_HEIGHT,
width: isMobile && tileLayout ? THUMBNAIL_WIDTH_MOBILE : THUMBNAIL_WIDTH,
height: isMobile && tileLayout ? THUMBNAIL_HEIGHT_MOBILE : THUMBNAIL_HEIGHT,
quality: THUMBNAIL_QUALITY,
});
}