Load gifs through proxy

Continuation of 1009 (2eae20f0)

It can probably be handled inside the existing getThumbnailCdnUrl to reduce 1 function, but since the functionality is somewhat different (the proxy doesn't compress), it's probably clearer to separate it.

.env.defaults

@@ -17,6 +17,7 @@ SEARCH_SERVER_API=https://lighthouse.odysee.tv/search
 SOCKETY_SERVER_API=wss://sockety.odysee.com/ws
 RECSYS_ENDPOINT=https://recsys.odysee.tv/v1/lvv
 RECSYS_FYP_ENDPOINT=https://recsys.odysee.tv/v1/u
+IMAGE_PROXY_URL=https://boost.vanwanet.com/index.php
 THUMBNAIL_CDN_URL=https://thumbnails.odycdn.com/optimize/
 THUMBNAIL_CARDS_CDN_URL=https://cards.odycdn.com/
 LOCALE_API=https://api.odysee.com/legal/requirements
@@ -59,7 +60,7 @@ LOGO_WHITE_TEXT=https://thumbnails.odycdn.com/optimize/s:1000:300/quality:85/pla
 LOGO_DARK_TEXT=https://thumbnails.odycdn.com/optimize/s:1000:300/quality:85/plain/https://spee.ch/odysee-png:2.png
 AVATAR_DEFAULT=https://thumbnails.odycdn.com/optimize/s:160:160/quality:85/plain/https://spee.ch/spaceman-png:2.png
 MISSING_THUMB_DEFAULT=https://thumbnails.odycdn.com/optimize/s:390:220/quality:85/plain/https://spee.ch/missing-thumb-png
-FAVICON=https://thumbnails.odycdn.com/optimize/s:100:100/quality:85/plain/https://spee.ch/favicon-png:c.png
+FAVICON=https://odysee.com/public/favicon-spaceman.png
 
 # LOCALE
 DEFAULT_LANGUAGE=en

config.js

@@ -23,6 +23,7 @@ const config = {
   URL: process.env.URL,
   RECSYS_ENDPOINT: process.env.RECSYS_ENDPOINT,
   RECSYS_FYP_ENDPOINT: process.env.RECSYS_FYP_ENDPOINT,
+  IMAGE_PROXY_URL: process.env.IMAGE_PROXY_URL,
   THUMBNAIL_CDN_URL: process.env.THUMBNAIL_CDN_URL,
   THUMBNAIL_CARDS_CDN_URL: process.env.THUMBNAIL_CARDS_CDN_URL,
   THUMBNAIL_HEIGHT: process.env.THUMBNAIL_HEIGHT,

ui/component/channelThumbnail/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import { parseURI } from 'util/lbryURI';
+import { getImageProxyUrl } from 'util/thumbnail';
 import classnames from 'classnames';
 import Gerbil from './gerbil.png';
 import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
@@ -95,8 +96,9 @@ function ChannelThumbnail(props: Props) {
   }, [doResolveUri, shouldResolve, uri]);
 
   if (isGif && !allowGifs) {
+    const url = getImageProxyUrl(channelThumbnail);
     return (
-      <FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)}>
+      <FreezeframeWrapper src={url} className={classnames('channel-thumbnail', className)}>
         {showMemberBadge && <PremiumBadge {...badgeProps} />}
       </FreezeframeWrapper>
     );

ui/component/common/markdown-preview.jsx

@@ -198,6 +198,7 @@ export default React.memo<MarkdownProps>(function MarkdownPreview(props: Markdow
       // Workaraund of remarkOptions.Fragment
       div: React.Fragment,
       img: (imgProps) => {
+        // getImageProxyUrl() can also be used if we just want to proxy without compression.
         const imageCdnUrl =
           getThumbnailCdnUrl({ thumbnail: imgProps.src, width: 0, height: 0, quality: 85 }) || MISSING_THUMB_DEFAULT;
         if ((isStakeEnoughForPreview(stakedLevel) || hasMembership) && !isEmote(imgProps.title, imgProps.src)) {

ui/component/fileThumbnail/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import type { Node } from 'react';
-import { getThumbnailCdnUrl } from 'util/thumbnail';
+import { getImageProxyUrl, getThumbnailCdnUrl } from 'util/thumbnail';
 import React from 'react';
 import FreezeframeWrapper from './FreezeframeWrapper';
 import Placeholder from './placeholder.png';
@@ -36,8 +36,9 @@ function FileThumbnail(props: Props) {
   }, [hasResolvedClaim, uri, doResolveUri, passedThumbnail]);
 
   if (!allowGifs && isGif) {
+    const url = getImageProxyUrl(thumbnail);
     return (
-      <FreezeframeWrapper src={thumbnail} className={classnames('media__thumb', className)}>
+      <FreezeframeWrapper src={url} className={classnames('media__thumb', className)}>
         {children}
       </FreezeframeWrapper>
     );
@@ -48,8 +49,12 @@ function FileThumbnail(props: Props) {
   let url = thumbnail || (hasResolvedClaim ? Placeholder : '');
   // @if TARGET='web'
   // Pass image urls through a compression proxy
-  if (thumbnail && !(isGif && allowGifs)) {
+  if (thumbnail) {
-    url = getThumbnailCdnUrl({ thumbnail });
+    if (isGif) {
+      url = getImageProxyUrl(thumbnail); // Note: the '!allowGifs' case is handled in Freezeframe above.
+    } else {
+      url = getThumbnailCdnUrl({ thumbnail });
+    }
   }
   // @endif
 

ui/component/optimizedImage/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { getThumbnailCdnUrl } from 'util/thumbnail';
+import { getImageProxyUrl, getThumbnailCdnUrl } from 'util/thumbnail';
 
 function scaleToDevicePixelRatio(value: number) {
   const devicePixelRatio = window.devicePixelRatio || 1.0;
@@ -12,7 +12,9 @@ function getOptimizedImgUrl(url, width, height, quality) {
   if (url && !url.startsWith('/public/')) {
     optimizedUrl = url.trim().replace(/^http:\/\//i, 'https://');
 
-    if (!optimizedUrl.endsWith('.gif')) {
+    if (optimizedUrl.endsWith('.gif')) {
+      optimizedUrl = getImageProxyUrl(optimizedUrl);
+    } else {
       optimizedUrl = getThumbnailCdnUrl({ thumbnail: optimizedUrl, width, height, quality });
     }
   }

ui/util/thumbnail.js

@@ -1,5 +1,5 @@
 // @flow
-import { THUMBNAIL_CDN_URL, THUMBNAIL_HEIGHT, THUMBNAIL_WIDTH, THUMBNAIL_QUALITY } from 'config';
+import { IMAGE_PROXY_URL, THUMBNAIL_CDN_URL, THUMBNAIL_HEIGHT, THUMBNAIL_WIDTH, THUMBNAIL_QUALITY } from 'config';
 
 type Props = {
   thumbnail: ?string,
@@ -23,3 +23,10 @@ export function getThumbnailCdnUrl(props: Props) {
     return `${THUMBNAIL_CDN_URL}s:${width}:${height}/quality:${quality}/plain/${thumbnail}`;
   }
 }
+
+export function getImageProxyUrl(thumbnail: ?string) {
+  if (thumbnail && !thumbnail.startsWith(THUMBNAIL_CDN_URL) && !thumbnail.startsWith(IMAGE_PROXY_URL)) {
+    return `${IMAGE_PROXY_URL}?${thumbnail}`;
+  }
+  return thumbnail;
+}