use thumbnail cdn for cover photos
This commit is contained in:
parent
71b948f2fc
commit
62dfaf0709
3 changed files with 34 additions and 10 deletions
|
@ -1,15 +1,11 @@
|
|||
// @flow
|
||||
import type { Node } from 'react';
|
||||
import { THUMBNAIL_CDN_URL } from 'config';
|
||||
import { getThumbnailCdnUrl } from 'util/thumbnail';
|
||||
import React from 'react';
|
||||
import FreezeframeWrapper from './FreezeframeWrapper';
|
||||
import Placeholder from './placeholder.png';
|
||||
import classnames from 'classnames';
|
||||
|
||||
const THUMBNAIL_HEIGHT = 180;
|
||||
const THUMBNAIL_WIDTH = 320;
|
||||
const THUMBNAIL_QUALITY = 80;
|
||||
|
||||
type Props = {
|
||||
uri: string,
|
||||
thumbnail: ?string, // externally sourced image
|
||||
|
@ -45,10 +41,8 @@ function FileThumbnail(props: Props) {
|
|||
let url = thumbnail || (hasResolvedClaim ? Placeholder : '');
|
||||
// @if TARGET='web'
|
||||
// Pass image urls through a compression proxy
|
||||
if (thumbnail && THUMBNAIL_CDN_URL && !thumbnail.includes('https://spee.ch')) {
|
||||
url = `${THUMBNAIL_CDN_URL}${thumbnail}&quality=${THUMBNAIL_QUALITY}&height=${THUMBNAIL_HEIGHT}&width=${THUMBNAIL_WIDTH}`;
|
||||
} else if (thumbnail && thumbnail.includes('https://spee.ch')) {
|
||||
url = `${url}?quality=${THUMBNAIL_QUALITY}&height=${THUMBNAIL_HEIGHT}&width=${THUMBNAIL_WIDTH}`;
|
||||
if (thumbnail) {
|
||||
url = getThumbnailCdnUrl({ thumbnail });
|
||||
}
|
||||
// @endif
|
||||
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
import * as ICONS from 'constants/icons';
|
||||
import * as PAGES from 'constants/pages';
|
||||
import React from 'react';
|
||||
import { getThumbnailCdnUrl } from 'util/thumbnail';
|
||||
import { parseURI } from 'lbry-redux';
|
||||
import { YOUTUBE_STATUSES } from 'lbryinc';
|
||||
import Page from 'component/page';
|
||||
|
@ -161,7 +162,7 @@ function ChannelPage(props: Props) {
|
|||
{cover && (
|
||||
<img
|
||||
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">
|
||||
|
|
29
ui/util/thumbnail.js
Normal file
29
ui/util/thumbnail.js
Normal 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}`;
|
||||
}
|
||||
}
|
Loading…
Add table
Reference in a new issue