From 62dfaf07093f86a030d7b2736f340ba1eebb820f Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 15 Dec 2020 13:54:35 -0500
Subject: [PATCH] use thumbnail cdn for cover photos

---
 ui/component/fileThumbnail/view.jsx | 12 +++---------
 ui/page/channel/view.jsx            |  3 ++-
 ui/util/thumbnail.js                | 29 +++++++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 10 deletions(-)
 create mode 100644 ui/util/thumbnail.js

diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx
index dad8bea3f..4a5fb2188 100644
--- a/ui/component/fileThumbnail/view.jsx
+++ b/ui/component/fileThumbnail/view.jsx
@@ -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
 
diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx
index 837b6306f..56c02f1b0 100644
--- a/ui/page/channel/view.jsx
+++ b/ui/page/channel/view.jsx
@@ -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">
diff --git a/ui/util/thumbnail.js b/ui/util/thumbnail.js
new file mode 100644
index 000000000..0a279fc7c
--- /dev/null
+++ b/ui/util/thumbnail.js
@@ -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}`;
+  }
+}