diff --git a/.env.defaults b/.env.defaults index 9032f0c94..eb9322c53 100644 --- a/.env.defaults +++ b/.env.defaults @@ -24,9 +24,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_HEIGHT_POSTER=720 THUMBNAIL_WIDTH=390 -THUMBNAIL_WIDTH_MOBILE=900 +THUMBNAIL_WIDTH_POSTER=1280 THUMBNAIL_QUALITY=85 THUMBNAIL_CDN_SIZE_LIMIT_BYTES=5242880 PLAYER_SERVER=https://player.odycdn.com diff --git a/config.js b/config.js index c92444057..71f9c20be 100644 --- a/config.js +++ b/config.js @@ -26,9 +26,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_HEIGHT_POSTER: process.env.THUMBNAIL_HEIGHT_POSTER, 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_CDN_SIZE_LIMIT_BYTES: process.env.THUMBNAIL_CDN_SIZE_LIMIT_BYTES, PLAYER_SERVER: process.env.PLAYER_SERVER, diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx index 16eefc3bf..a0bdf0f23 100644 --- a/ui/component/fileThumbnail/view.jsx +++ b/ui/component/fileThumbnail/view.jsx @@ -2,9 +2,9 @@ import type { Node } from 'react'; import { THUMBNAIL_WIDTH, - THUMBNAIL_WIDTH_MOBILE, + THUMBNAIL_WIDTH_POSTER, THUMBNAIL_HEIGHT, - THUMBNAIL_HEIGHT_MOBILE, + THUMBNAIL_HEIGHT_POSTER, THUMBNAIL_QUALITY, MISSING_THUMB_DEFAULT, } from 'config'; @@ -74,8 +74,8 @@ function FileThumbnail(props: Props) { } else { url = getThumbnailCdnUrl({ thumbnail, - width: isMobile && tileLayout ? THUMBNAIL_WIDTH_MOBILE : THUMBNAIL_WIDTH, - height: isMobile && tileLayout ? THUMBNAIL_HEIGHT_MOBILE : THUMBNAIL_HEIGHT, + width: isMobile && tileLayout ? THUMBNAIL_WIDTH_POSTER : THUMBNAIL_WIDTH, + height: isMobile && tileLayout ? THUMBNAIL_HEIGHT_POSTER : THUMBNAIL_HEIGHT, quality: THUMBNAIL_QUALITY, }); } diff --git a/ui/effects/use-get-poster.js b/ui/effects/use-get-poster.js index 9fed77e2b..6214bab47 100644 --- a/ui/effects/use-get-poster.js +++ b/ui/effects/use-get-poster.js @@ -1,6 +1,7 @@ // @flow -import { getThumbnailCdnUrl } from 'util/thumbnail'; import React from 'react'; +import { THUMBNAIL_WIDTH_POSTER, THUMBNAIL_HEIGHT_POSTER } from 'config'; +import { getThumbnailCdnUrl } from 'util/thumbnail'; // $FlowFixMe cannot resolve ... import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png'; @@ -11,7 +12,13 @@ export default function useGetPoster(claimThumbnail: ?string) { if (!claimThumbnail) { setThumbnail(FileRenderPlaceholder); } else { - setThumbnail(getThumbnailCdnUrl({ thumbnail: claimThumbnail, width: 1280, height: 720 })); + setThumbnail( + getThumbnailCdnUrl({ + thumbnail: claimThumbnail, + width: THUMBNAIL_WIDTH_POSTER, + height: THUMBNAIL_HEIGHT_POSTER, + }) + ); } }, [claimThumbnail]);