From 48dcb03a1ddbdbf5f425e09d9aa603f157ee4731 Mon Sep 17 00:00:00 2001
From: Nicholas de Paola <ndepaola97@gmail.com>
Date: Sat, 16 Mar 2024 13:57:33 +1000
Subject: [PATCH] this change is from the future

(just testing out the WIP image CDN with mpcautofill.github.io)
---
 frontend/.env.dist                  |  1 +
 frontend/src/features/card/card.tsx | 14 ++++++++++++--
 frontend/src/pages/index.tsx        | 15 +++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/.env.dist b/frontend/.env.dist
index e644bcde9..b0a7ede9d 100644
--- a/frontend/.env.dist
+++ b/frontend/.env.dist
@@ -1 +1,2 @@
 NEXT_PUBLIC_BACKEND_URL=
+NEXT_PUBLIC_IMAGE_CDN_URL=
diff --git a/frontend/src/features/card/card.tsx b/frontend/src/features/card/card.tsx
index 2ddaa187d..3737cb06a 100644
--- a/frontend/src/features/card/card.tsx
+++ b/frontend/src/features/card/card.tsx
@@ -115,11 +115,21 @@ function CardImage({
 
   //# region computed constants
 
+  // TODO: always point at image server once it's stable
+  const imageCDNURL = process.env.NEXT_PUBLIC_IMAGE_CDN_URL;
+  const smallThumbnailURL =
+    imageCDNURL != null
+      ? `${imageCDNURL}/images/google_drive/small/${maybeCardDocument?.identifier}.jpg`
+      : maybeCardDocument?.small_thumbnail_url;
+  const mediumThumbnailURL =
+    imageCDNURL != null
+      ? `${imageCDNURL}/images/google_drive/large/${maybeCardDocument?.identifier}.jpg`
+      : maybeCardDocument?.medium_thumbnail_url;
   const imageSrc: string | undefined =
     imageState !== "errored"
       ? small
-        ? maybeCardDocument?.small_thumbnail_url
-        : maybeCardDocument?.medium_thumbnail_url
+        ? smallThumbnailURL
+        : mediumThumbnailURL
       : small
       ? "/error_404.png"
       : "/error_404_med.png";
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 9d80e8af2..6dd37b1d8 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -120,6 +120,21 @@ export default function Index() {
         />
       </Head>
       <br />
+      {process.env.NEXT_PUBLIC_IMAGE_CDN_URL != null && (
+        <Alert variant="info">
+          Howdy! I&apos;m testing an experimental feature for image loading at
+          the moment.
+          <br />
+          If you noticed any issues, please create an issue on{" "}
+          <a
+            href="https://github.com/chilli-axe/mpc-autofill/issues"
+            target="_blank"
+          >
+            the GitHub repo
+          </a>
+          . Thanks for your patience!
+        </Alert>
+      )}
       <DynamicLogo />
       <br />
       <JumpIntoEditorButton />