From 88794761d084d8a3c20c6e78bf8b06b2a228e0ac Mon Sep 17 00:00:00 2001
From: Thomas Zarebczan <thomas.zarebczan@gmail.com>
Date: Thu, 7 Oct 2021 16:38:56 -0400
Subject: [PATCH] use thumbnails.odysee.com

f
---
 .env.defaults        |  5 ++++-
 config.js            |  3 +++
 ui/util/thumbnail.js | 12 ++++++------
 web/src/html.js      | 27 +++++++++++++++++++++++++--
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/.env.defaults b/.env.defaults
index 48c0ebb66..2b9c4e373 100644
--- a/.env.defaults
+++ b/.env.defaults
@@ -15,7 +15,10 @@ COMMENT_SERVER_API=https://comments.odysee.com/api/v2
 COMMENT_SERVER_NAME=Odysee
 SEARCH_SERVER_API=https://lighthouse.odysee.com/search
 SOCKETY_SERVER_API=wss://sockety.odysee.com/ws
-THUMBNAIL_CDN_URL=https://image-processor.vanwanet.com/optimize/
+THUMBNAIL_CDN_URL=https://thumbnails.odysee.com/optimize/
+THUMBNAIL_HEIGHT=220
+THUMBNAIL_WIDTH=390
+THUMBNAIL_QUALITY=85
 WELCOME_VERSION=1.0
 
 # STRIPE
diff --git a/config.js b/config.js
index 49e215c5b..7f25155ad 100644
--- a/config.js
+++ b/config.js
@@ -22,6 +22,9 @@ const config = {
   SHARE_DOMAIN_URL: process.env.SHARE_DOMAIN_URL,
   URL: process.env.URL,
   THUMBNAIL_CDN_URL: process.env.THUMBNAIL_CDN_URL,
+  THUMBNAIL_HEIGHT: process.env.THUMBNAIL_HEIGHT,
+  THUMBNAIL_WIDTH: process.env.THUMBNAIL_WIDTH,
+  THUMBNAIL_QUALITY: process.env.THUMBNAIL_QUALITY,
   SITE_TITLE: process.env.SITE_TITLE,
   SITE_NAME: process.env.SITE_NAME,
   SITE_DESCRIPTION: process.env.SITE_DESCRIPTION,
diff --git a/ui/util/thumbnail.js b/ui/util/thumbnail.js
index 3d5c8d73c..0825299c2 100644
--- a/ui/util/thumbnail.js
+++ b/ui/util/thumbnail.js
@@ -1,9 +1,5 @@
 // @flow
-import { THUMBNAIL_CDN_URL } from 'config';
-
-const THUMBNAIL_HEIGHT = 220;
-const THUMBNAIL_WIDTH = 390;
-const THUMBNAIL_QUALITY = 85;
+import { THUMBNAIL_CDN_URL, THUMBNAIL_HEIGHT, THUMBNAIL_WIDTH, THUMBNAIL_QUALITY } from 'config';
 
 type Props = {
   thumbnail: ?string,
@@ -23,7 +19,11 @@ export function getThumbnailCdnUrl(props: Props) {
     return `${THUMBNAIL_CDN_URL}s:${width}:${height}/quality:${quality}/plain/${thumbnail}`;
   }
 
-  if (thumbnail && thumbnail.includes('https://spee.ch')) {
+  if (thumbnail && thumbnail.includes('https://spee.ch') && !thumbnail.includes('?quality=')) {
     return `${thumbnail}?quality=${quality}&height=${height}&width=${width}`;
   }
+
+  if (thumbnail && thumbnail.includes('https://spee.ch')) {
+    return thumbnail;
+  }
 }
diff --git a/web/src/html.js b/web/src/html.js
index 8367814cb..d149f03c9 100644
--- a/web/src/html.js
+++ b/web/src/html.js
@@ -10,6 +10,8 @@ const {
   SITE_NAME,
   FAVICON,
   LBRY_WEB_API,
+  THUMBNAIL_CDN_URL,
+  THUMBNAIL_QUALITY,
 } = require('../../config.js');
 
 const { Lbry } = require('lbry-redux');
@@ -27,6 +29,27 @@ const SDK_API_PATH = `${LBRY_WEB_API}/api/v1`;
 const PROXY_URL = `${SDK_API_PATH}/proxy`;
 Lbry.setDaemonConnectionString(PROXY_URL);
 
+function getThumbnailCdnUrl(url) {
+  if (!THUMBNAIL_CDN_URL || !url) {
+    return url;
+  }
+
+  const width = 630;
+  const height = 1200;
+
+  if (url && !url.includes('https://spee.ch')) {
+    return `${THUMBNAIL_CDN_URL}s:${width}:${height}/quality:${THUMBNAIL_QUALITY}/plain/${url}`;
+  }
+
+  if (url && url.includes('https://spee.ch') && !url.includes('?quality=')) {
+    return `${url}?quality=${THUMBNAIL_QUALITY}&height=${height}&width=${width}`;
+  }
+
+  if (url && url.includes('https://spee.ch')) {
+    return url;
+  }
+}
+
 function insertToHead(fullHtml, htmlToInsert) {
   const beginStr = '<!-- VARIABLE_HEAD_BEGIN -->';
   const finalStr = '<!-- VARIABLE_HEAD_END -->';
@@ -143,7 +166,7 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
   const media = value && (value.video || value.audio || value.image);
   const source = value && value.source;
   const channel = signing_channel && signing_channel.name;
-  const thumbnail = value && value.thumbnail && value.thumbnail.url;
+  let thumbnail = value && value.thumbnail && value.thumbnail.url && getThumbnailCdnUrl(value.thumbnail.url);
   const mediaType = source && source.media_type;
   const mediaDuration = media && media.duration;
   const claimTitle = escapeHtmlProperty((value && value.title) || claimName);
@@ -230,7 +253,7 @@ function buildGoogleVideoMetadata(uri, claim) {
   const { meta, value } = claim;
   const media = value && value.video;
   const source = value && value.source;
-  const thumbnail = value && value.thumbnail && value.thumbnail.url;
+  let thumbnail = value && value.thumbnail && value.thumbnail.url && getThumbnailCdnUrl(value.thumbnail.url);
   const mediaType = source && source.media_type;
   const mediaDuration = media && media.duration;
   const claimTitle = escapeHtmlProperty((value && value.title) || claimName);