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

Only apply the larger thumbnail width on mobile + tile layout

Browse source 
## 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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

2
ui/component/collectionPreviewTile/view.jsx
View file

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

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

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