.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

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,

ui/util/thumbnail.js

@@ -1,9 +1,5 @@
 // @flow
-import { THUMBNAIL_CDN_URL } from 'config';
+import { THUMBNAIL_CDN_URL, THUMBNAIL_HEIGHT, THUMBNAIL_WIDTH, THUMBNAIL_QUALITY } from 'config';
-
-const THUMBNAIL_HEIGHT = 220;
-const THUMBNAIL_WIDTH = 390;
-const THUMBNAIL_QUALITY = 85;
 
 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;
+  }
 }

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);