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/ THUMBNAIL_CARDS_CDN_URL=https://cards.odycdn.com/
LOCALE_API=https://api.odysee.com/legal/requirements LOCALE_API=https://api.odysee.com/legal/requirements
THUMBNAIL_HEIGHT=220 THUMBNAIL_HEIGHT=220
THUMBNAIL_HEIGHT_MOBILE=506
THUMBNAIL_WIDTH=390 THUMBNAIL_WIDTH=390
THUMBNAIL_WIDTH_MOBILE=900
THUMBNAIL_QUALITY=85 THUMBNAIL_QUALITY=85
THUMBNAIL_CDN_SIZE_LIMIT_BYTES=5242880 THUMBNAIL_CDN_SIZE_LIMIT_BYTES=5242880
WELCOME_VERSION=1.0 WELCOME_VERSION=1.0

2
config.js
View file

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

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

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