LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-23 17:47:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use thumbnail cdn for cover photos

Browse source
This commit is contained in:
Sean Yesmunt 2020-12-15 13:54:35 -05:00
parent 71b948f2fc
commit 62dfaf0709
3 changed files with 34 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,11 @@
// @flow // @flow
import type { Node } from 'react'; import type { Node } from 'react';
import { THUMBNAIL_CDN_URL } from 'config'; import { 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 classnames from 'classnames'; import classnames from 'classnames';
const THUMBNAIL_HEIGHT = 180;
const THUMBNAIL_WIDTH = 320;
const THUMBNAIL_QUALITY = 80;
type Props = { type Props = {
uri: string, uri: string,
thumbnail: ?string, // externally sourced image thumbnail: ?string, // externally sourced image
@ -45,10 +41,8 @@ function FileThumbnail(props: Props) {
let url = thumbnail || (hasResolvedClaim ? Placeholder : ''); let url = thumbnail || (hasResolvedClaim ? Placeholder : '');
// @if TARGET='web' // @if TARGET='web'
// Pass image urls through a compression proxy // Pass image urls through a compression proxy
if (thumbnail && THUMBNAIL_CDN_URL && !thumbnail.includes('https://spee.ch')) { if (thumbnail) {
url = `${THUMBNAIL_CDN_URL}${thumbnail}&quality=${THUMBNAIL_QUALITY}&height=${THUMBNAIL_HEIGHT}&width=${THUMBNAIL_WIDTH}`; url = getThumbnailCdnUrl({ thumbnail });
} else if (thumbnail && thumbnail.includes('https://spee.ch')) {
url = `${url}?quality=${THUMBNAIL_QUALITY}&height=${THUMBNAIL_HEIGHT}&width=${THUMBNAIL_WIDTH}`;
} }
// @endif // @endif

3
ui/page/channel/view.jsx
View file

@ -2,6 +2,7 @@
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import React from 'react'; import React from 'react';
import { getThumbnailCdnUrl } from 'util/thumbnail';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
import { YOUTUBE_STATUSES } from 'lbryinc'; import { YOUTUBE_STATUSES } from 'lbryinc';
import Page from 'component/page'; import Page from 'component/page';
@ -161,7 +162,7 @@ function ChannelPage(props: Props) {
{cover && ( {cover && (
<img <img
className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })} className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
src={cover} src={IS_WEB ? getThumbnailCdnUrl({ thumbnail: cover, height: 200, width: 1000, quality: 100 }) : cover}
/> />
)} )}
<div className="channel__primary-info"> <div className="channel__primary-info">

29
ui/util/thumbnail.js Normal file
View file

@ -0,0 +1,29 @@
// @flow
import { THUMBNAIL_CDN_URL } from 'config';
const THUMBNAIL_HEIGHT = 180;
const THUMBNAIL_WIDTH = 320;
const THUMBNAIL_QUALITY = 80;
type Props = {
thumbnail: ?string,
height?: number,
width?: number,
quality?: number,
};
export function getThumbnailCdnUrl(props: Props) {
const { thumbnail, height = THUMBNAIL_HEIGHT, width = THUMBNAIL_WIDTH, quality = THUMBNAIL_QUALITY } = props;
if (!THUMBNAIL_CDN_URL || !thumbnail) {
return thumbnail;
}
if (thumbnail && !thumbnail.includes('https://spee.ch')) {
return `${THUMBNAIL_CDN_URL}${thumbnail}&quality=${quality}&height=${height}&width=${width}`;
}
if (thumbnail && thumbnail.includes('https://spee.ch')) {
return `${thumbnail}?quality=${quality}&height=${height}&width=${width}`;
}
}