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

Crisper file thumbnails for mobile

Browse source 
## Issue
Thumbnails in mobile, especially tablets, is blurry

## Change
Account for the larger thumbnail width in mobile.
Approximation is based on `$breakpoint-small: 900px;`
This commit is contained in:
infinite-persistence 2022-04-06 15:47:55 +08:00 committed by Thomas Zarebczan
parent 5380bc04f2
commit 4f4803c638
3 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env.defaults
View file

@ -22,7 +22,9 @@ THUMBNAIL_CDN_URL=https://thumbnails.odycdn.com/optimize/
THUMBNAIL_CARDS_CDN_URL=https://cards.odycdn.com/
LOCALE_API=https://api.odysee.com/legal/requirements
THUMBNAIL_HEIGHT=220
THUMBNAIL_HEIGHT_MOBILE=506
THUMBNAIL_WIDTH=390
THUMBNAIL_WIDTH_MOBILE=900
THUMBNAIL_QUALITY=85
THUMBNAIL_CDN_SIZE_LIMIT_BYTES=5242880
WELCOME_VERSION=1.0

2
config.js
View file

@ -27,7 +27,9 @@ const config = {
THUMBNAIL_CDN_URL: process.env.THUMBNAIL_CDN_URL,
THUMBNAIL_CARDS_CDN_URL: process.env.THUMBNAIL_CARDS_CDN_URL,
THUMBNAIL_HEIGHT: process.env.THUMBNAIL_HEIGHT,
THUMBNAIL_HEIGHT_MOBILE: process.env.THUMBNAIL_HEIGHT_MOBILE,
THUMBNAIL_WIDTH: process.env.THUMBNAIL_WIDTH,
THUMBNAIL_WIDTH_MOBILE: process.env.THUMBNAIL_WIDTH_MOBILE,
THUMBNAIL_QUALITY: process.env.THUMBNAIL_QUALITY,
THUMBNAIL_CDN_SIZE_LIMIT_BYTES: process.env.THUMBNAIL_CDN_SIZE_LIMIT_BYTES,
SITE_TITLE: process.env.SITE_TITLE,

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

@ -1,10 +1,18 @@
// @flow
import type { Node } from 'react';
import {
THUMBNAIL_WIDTH,
THUMBNAIL_WIDTH_MOBILE,
THUMBNAIL_HEIGHT,
THUMBNAIL_HEIGHT_MOBILE,
THUMBNAIL_QUALITY,
MISSING_THUMB_DEFAULT,
} from 'config';
import { useIsMobile } from 'effects/use-screensize';
import { getImageProxyUrl, getThumbnailCdnUrl } from 'util/thumbnail';
import React from 'react';
import FreezeframeWrapper from './FreezeframeWrapper';
import Placeholder from './placeholder.png';
import { MISSING_THUMB_DEFAULT } from 'config';
import classnames from 'classnames';
import Thumb from './thumb';
@ -28,6 +36,7 @@ function FileThumbnail(props: Props) {
const hasResolvedClaim = claim !== undefined;
const isGif = thumbnail && thumbnail.endsWith('gif');
const isMobile = useIsMobile();
React.useEffect(() => {
if (!hasResolvedClaim && uri && !passedThumbnail) {
@ -53,7 +62,12 @@ function FileThumbnail(props: Props) {
if (isGif) {
url = getImageProxyUrl(thumbnail); // Note: the '!allowGifs' case is handled in Freezeframe above.
} else {
url = getThumbnailCdnUrl({ thumbnail });
url = getThumbnailCdnUrl({
thumbnail,
width: isMobile ? THUMBNAIL_WIDTH_MOBILE : THUMBNAIL_WIDTH,
height: isMobile ? THUMBNAIL_HEIGHT_MOBILE : THUMBNAIL_HEIGHT,
quality: THUMBNAIL_QUALITY,
});
}
}
// @endif