Merge branch 'master' into frontend-release

chilli-axe · Mar 18, 2024 · e59ba9a · e59ba9a
2 parents 23e82a6 + ef99bcc
commit e59ba9a
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 32 deletions.
diff --git a/frontend/src/common/test-constants.ts b/frontend/src/common/test-constants.ts
@@ -84,7 +84,7 @@ export const cardDocument1: CardDocument = {
   source_name: sourceDocument1.name,
   source_id: sourceDocument1.pk,
   source_verbose: sourceDocument1.name,
-  source_type: "google drive",
+  source_type: "Google Drive",
   source_external_link: null,
   dpi: 1200,
   searchq: "card 1",
@@ -107,7 +107,7 @@ export const cardDocument2: CardDocument = {
   source_name: sourceDocument1.name,
   source_id: sourceDocument1.pk,
   source_verbose: sourceDocument1.name,
-  source_type: "google drive",
+  source_type: "Google Drive",
   source_external_link: null,
   dpi: 1200,
   searchq: "card 2",
@@ -130,7 +130,7 @@ export const cardDocument3: CardDocument = {
   source_name: sourceDocument1.name,
   source_id: sourceDocument1.pk,
   source_verbose: sourceDocument1.name,
-  source_type: "google drive",
+  source_type: "Google Drive",
   source_external_link: null,
   dpi: 1200,
   searchq: "card 3",
@@ -153,7 +153,7 @@ export const cardDocument4: CardDocument = {
   source_name: sourceDocument1.name,
   source_id: sourceDocument1.pk,
   source_verbose: sourceDocument1.name,
-  source_type: "google drive",
+  source_type: "Google Drive",
   source_external_link: null,
   dpi: 1200,
   searchq: "card 4",
@@ -176,7 +176,7 @@ export const cardDocument5: CardDocument = {
   source_name: sourceDocument2.name,
   source_id: sourceDocument2.pk,
   source_verbose: `${sourceDocument2.name} Cardbacks`,
-  source_type: "google drive",
+  source_type: "Google Drive",
   source_external_link: null,
   dpi: 1200,
   searchq: "card 5",
@@ -199,7 +199,7 @@ export const cardDocument6: CardDocument = {
   source_name: sourceDocument3.name,
   source_id: sourceDocument3.pk,
   source_verbose: `${sourceDocument3.name} Tokens`,
-  source_type: "google drive",
+  source_type: "Google Drive",
   source_external_link: null,
   dpi: 1200,
   searchq: "card 6",

diff --git a/frontend/src/common/types.ts b/frontend/src/common/types.ts
@@ -49,7 +49,7 @@ export interface CardDocument {
   source_name: string;
   source_id: number;
   source_verbose: string;
-  source_type: string;
+  source_type?: SourceType;
   source_external_link: string | null;
   dpi: number;
   searchq: string;

diff --git a/frontend/src/features/card/card.tsx b/frontend/src/features/card/card.tsx
@@ -85,7 +85,11 @@ function CardImage({
     setImageState("loaded");
   };
   const onError: React.ReactEventHandler<HTMLImageElement> = (img) => {
-    setImageState("errored");
+    img.preventDefault();
+    img.currentTarget.onerror = null;
+    if (imageState !== "errored") {
+      setImageState("errored");
+    }
   };
   const handleShowDetailedView = () => {
     if (showDetailedViewOnClick && maybeCardDocument != null) {
@@ -116,23 +120,18 @@ function CardImage({
   //# region computed constants
 
   // TODO: always point at image server once it's stable
+  // TODO: introduce the concept of source types which need to go through the CDN
   const imageCDNURL = process.env.NEXT_PUBLIC_IMAGE_CDN_URL;
   const smallThumbnailURL =
-    imageCDNURL != null
+    imageCDNURL != null && maybeCardDocument?.source_type
       ? `${imageCDNURL}/images/google_drive/small/${maybeCardDocument?.identifier}.jpg`
       : maybeCardDocument?.small_thumbnail_url;
   const mediumThumbnailURL =
-    imageCDNURL != null
+    imageCDNURL != null && maybeCardDocument?.source_type
       ? `${imageCDNURL}/images/google_drive/large/${maybeCardDocument?.identifier}.jpg`
       : maybeCardDocument?.medium_thumbnail_url;
-  const imageSrc: string | undefined =
-    imageState !== "errored"
-      ? small
-        ? smallThumbnailURL
-        : mediumThumbnailURL
-      : small
-      ? "/error_404.png"
-      : "/error_404_med.png";
+  const imageSrc = small ? smallThumbnailURL : mediumThumbnailURL;
+  const errorImageSrc = small ? "/error_404.png" : "/error_404_med.png";
   const imageAlt = maybeCardDocument?.name ?? "Unnamed Card";
 
   //# endregion
@@ -153,19 +152,32 @@ function CardImage({
             fill={true}
           />
         ) : (
-          <VisibleImage
-            ref={image}
-            className="card-img card-img-fade-in"
-            loading="lazy"
-            imageIsLoading={imageState === "loading"}
-            showDetailedViewOnClick={showDetailedViewOnClick}
-            src={imageSrc}
-            onLoadingComplete={onLoadingComplete}
-            onErrorCapture={onError}
-            onClick={handleShowDetailedView}
-            alt={imageAlt}
-            fill={true}
-          />
+          <>
+            {imageState === "errored" ? (
+              <VisibleImage
+                ref={image}
+                className="card-img card-img-fade-in"
+                loading="lazy"
+                src={errorImageSrc}
+                alt={""}
+                fill={true}
+              />
+            ) : (
+              <VisibleImage
+                ref={image}
+                className="card-img card-img-fade-in"
+                loading="lazy"
+                imageIsLoading={imageState === "loading"}
+                showDetailedViewOnClick={showDetailedViewOnClick}
+                src={imageSrc}
+                onLoadingComplete={onLoadingComplete}
+                onErrorCapture={onError}
+                onClick={handleShowDetailedView}
+                alt={imageAlt}
+                fill={true}
+              />
+            )}
+          </>
         ))}
     </>
   );

diff --git a/frontend/src/features/ui/dynamicLogo.tsx b/frontend/src/features/ui/dynamicLogo.tsx
@@ -214,7 +214,7 @@ const SampleCardDocument: CardDocument = {
   source_name: "",
   source_id: 0,
   source_verbose: "",
-  source_type: "drive",
+  source_type: undefined,
   source_external_link: null,
   dpi: 300,
   searchq: "",