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

Consolidate the mobile tile to use the poster size for better caching.

Browse source 
It's all approximation anyway.
This commit is contained in:
infinite-persistence 2022-06-17 09:38:29 +08:00 committed by Thomas Zarebczan
parent b8fceacb8a
commit f9ebd0863d
4 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.env.defaults
View file

@ -24,9 +24,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_HEIGHT_POSTER=720
THUMBNAIL_WIDTH=390 THUMBNAIL_WIDTH=390
THUMBNAIL_WIDTH_MOBILE=900 THUMBNAIL_WIDTH_POSTER=1280
THUMBNAIL_QUALITY=85 THUMBNAIL_QUALITY=85
THUMBNAIL_CDN_SIZE_LIMIT_BYTES=5242880 THUMBNAIL_CDN_SIZE_LIMIT_BYTES=5242880
PLAYER_SERVER=https://player.odycdn.com PLAYER_SERVER=https://player.odycdn.com

4
config.js
View file

@ -26,9 +26,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_HEIGHT_POSTER: process.env.THUMBNAIL_HEIGHT_POSTER,
THUMBNAIL_WIDTH: process.env.THUMBNAIL_WIDTH, THUMBNAIL_WIDTH: process.env.THUMBNAIL_WIDTH,
THUMBNAIL_WIDTH_MOBILE: process.env.THUMBNAIL_WIDTH_MOBILE, THUMBNAIL_WIDTH_POSTER: process.env.THUMBNAIL_WIDTH_POSTER,
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,
PLAYER_SERVER: process.env.PLAYER_SERVER, PLAYER_SERVER: process.env.PLAYER_SERVER,

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

@ -2,9 +2,9 @@
import type { Node } from 'react'; import type { Node } from 'react';
import { import {
THUMBNAIL_WIDTH, THUMBNAIL_WIDTH,
THUMBNAIL_WIDTH_MOBILE, THUMBNAIL_WIDTH_POSTER,
THUMBNAIL_HEIGHT, THUMBNAIL_HEIGHT,
THUMBNAIL_HEIGHT_MOBILE, THUMBNAIL_HEIGHT_POSTER,
THUMBNAIL_QUALITY, THUMBNAIL_QUALITY,
MISSING_THUMB_DEFAULT, MISSING_THUMB_DEFAULT,
} from 'config'; } from 'config';
@ -74,8 +74,8 @@ function FileThumbnail(props: Props) {
} else { } else {
url = getThumbnailCdnUrl({ url = getThumbnailCdnUrl({
thumbnail, thumbnail,
width: isMobile && tileLayout ? THUMBNAIL_WIDTH_MOBILE : THUMBNAIL_WIDTH, width: isMobile && tileLayout ? THUMBNAIL_WIDTH_POSTER : THUMBNAIL_WIDTH,
height: isMobile && tileLayout ? THUMBNAIL_HEIGHT_MOBILE : THUMBNAIL_HEIGHT, height: isMobile && tileLayout ? THUMBNAIL_HEIGHT_POSTER : THUMBNAIL_HEIGHT,
quality: THUMBNAIL_QUALITY, quality: THUMBNAIL_QUALITY,
}); });
} }

11
ui/effects/use-get-poster.js
View file

@ -1,6 +1,7 @@
// @flow // @flow
import { getThumbnailCdnUrl } from 'util/thumbnail';
import React from 'react'; import React from 'react';
import { THUMBNAIL_WIDTH_POSTER, THUMBNAIL_HEIGHT_POSTER } from 'config';
import { getThumbnailCdnUrl } from 'util/thumbnail';
// $FlowFixMe cannot resolve ... // $FlowFixMe cannot resolve ...
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png'; import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
@ -11,7 +12,13 @@ export default function useGetPoster(claimThumbnail: ?string) {
if (!claimThumbnail) { if (!claimThumbnail) {
setThumbnail(FileRenderPlaceholder); setThumbnail(FileRenderPlaceholder);
} else { } else {
setThumbnail(getThumbnailCdnUrl({ thumbnail: claimThumbnail, width: 1280, height: 720 })); setThumbnail(
getThumbnailCdnUrl({
thumbnail: claimThumbnail,
width: THUMBNAIL_WIDTH_POSTER,
height: THUMBNAIL_HEIGHT_POSTER,
})
);
} }
}, [claimThumbnail]); }, [claimThumbnail]);