From d0f585fc97b68f703d43f7e3cb1a7f26e816d750 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sat, 6 Jul 2024 16:57:46 +0530
Subject: [PATCH] Special case jp2 rendering

---
 web/packages/media/formats.ts         |  9 +++++++
 web/packages/new/photos/utils/file.ts | 34 +++++++++++++++------------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/web/packages/media/formats.ts b/web/packages/media/formats.ts
index c2a98ca635..bc1bde9729 100644
--- a/web/packages/media/formats.ts
+++ b/web/packages/media/formats.ts
@@ -26,6 +26,15 @@ const needsJPEGConversionExtensions = [
 export const needsJPEGConversion = (extension: string) =>
     needsJPEGConversionExtensions.includes(extension.toLowerCase());
 
+/**
+ * Return true if {@link extension} _might_ be supported by the user's browser.
+ *
+ * For example, JPEG 2000 (jp2) is supported by Safari, but not by Chrome or
+ * Firefox, and this function will return true for `jp2`.
+ */
+export const hasPartialBrowserSupport = (extension: string) =>
+    ["jp2"].includes(extension.toLowerCase());
+
 /**
  * Return `true` if {@link extension} in for an HEIC-like file.
  */
diff --git a/web/packages/new/photos/utils/file.ts b/web/packages/new/photos/utils/file.ts
index 282737ef5b..8e878f9e8c 100644
--- a/web/packages/new/photos/utils/file.ts
+++ b/web/packages/new/photos/utils/file.ts
@@ -1,4 +1,4 @@
-import { needsJPEGConversion } from "@/media/formats";
+import { hasPartialBrowserSupport, needsJPEGConversion } from "@/media/formats";
 import { heicToJPEG } from "@/media/heic-convert";
 import { isDesktop } from "@/next/app";
 import log from "@/next/log";
@@ -130,21 +130,25 @@ export const renderableImageBlob = async (
                 return await heicToJPEG(imageBlob);
             }
 
-            return undefined;
+            // Continue if it might be possibly supported in some browsers,
+            // otherwise bail out.
+            if (!hasPartialBrowserSupport(extension)) return undefined;
+        }
+
+        // Either it is something that the browser already knows how to render
+        // (e.g. JPEG/PNG), or is a file extension that might be supported in
+        // some browsers (e.g. JPEG 2000), or a file extension that we haven't
+        // specifically whitelisted for conversion (any arbitrary extension not
+        // part of `needsJPEGConversion`).
+        //
+        // Give it to the browser, attaching the mime type if possible.
+
+        const mimeType = fileTypeInfo.mimeType;
+        if (!mimeType) {
+            log.info("Trying to render a file without a MIME type", fileName);
+            return imageBlob;
         } else {
-            // Either it is something that the browser already knows how to
-            // render, or a file extension that we haven't specifically
-            // whitelisted for conversion.
-            const mimeType = fileTypeInfo.mimeType;
-            if (!mimeType) {
-                log.info(
-                    "Trying to render a file without a MIME type",
-                    fileName,
-                );
-                return imageBlob;
-            } else {
-                return new Blob([imageBlob], { type: mimeType });
-            }
+            return new Blob([imageBlob], { type: mimeType });
         }
     } catch (e) {
         log.error(`Failed to get renderable image for ${fileName}`, e);