From 2eae20f0bd395fe37e7ebda327d9845d3b5b2af1 Mon Sep 17 00:00:00 2001
From: infinite-persistence
 <64950861+infinite-persistence@users.noreply.github.com>
Date: Wed, 2 Mar 2022 08:23:34 -0800
Subject: [PATCH] Embedded images: serve via CDN for IP protection. (#1009)

## Ticket
536 "Embedding images without proxy is probably not in compliance with data protection regulations in Germany/Europe (GDPR)"
---
 ui/component/common/markdown-preview.jsx | 30 ++++++++++++++----------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/ui/component/common/markdown-preview.jsx b/ui/component/common/markdown-preview.jsx
index 59cc21ee5..c97069f0e 100644
--- a/ui/component/common/markdown-preview.jsx
+++ b/ui/component/common/markdown-preview.jsx
@@ -1,8 +1,9 @@
 // @flow
-import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config';
+import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, MISSING_THUMB_DEFAULT } from 'config';
 import { formattedEmote, inlineEmote } from 'util/remark-emote';
 import { formattedLinks, inlineLinks } from 'util/remark-lbry';
 import { formattedTimestamp, inlineTimestamp } from 'util/remark-timestamp';
+import { getThumbnailCdnUrl } from 'util/thumbnail';
 import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import Button from 'component/button';
@@ -194,17 +195,22 @@ export default React.memo<MarkdownProps>(function MarkdownPreview(props: Markdow
           ),
       // Workaraund of remarkOptions.Fragment
       div: React.Fragment,
-      img: (imgProps) =>
-        isStakeEnoughForPreview(stakedLevel) && !isEmote(imgProps.title, imgProps.src) ? (
-          <ZoomableImage {...imgProps} />
-        ) : (
-          <SimpleImageLink
-            src={imgProps.src}
-            alt={imgProps.alt}
-            title={imgProps.title}
-            helpText={SIMPLE_SITE ? __("This channel isn't staking enough Credits for inline image previews.") : ''}
-          />
-        ),
+      img: (imgProps) => {
+        const imageCdnUrl =
+          getThumbnailCdnUrl({ thumbnail: imgProps.src, width: 0, height: 0, quality: 85 }) || MISSING_THUMB_DEFAULT;
+        if (isStakeEnoughForPreview(stakedLevel) && !isEmote(imgProps.title, imgProps.src)) {
+          return <ZoomableImage {...imgProps} src={imageCdnUrl} />;
+        } else {
+          return (
+            <SimpleImageLink
+              src={imageCdnUrl}
+              alt={imgProps.alt}
+              title={imgProps.title}
+              helpText={__("This channel isn't staking enough Credits for inline image previews.")}
+            />
+          );
+        }
+      },
     },
   };