From bda7dea21891af04cc88622f66538609cd9f7d6d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 14 Oct 2023 17:01:20 -0500
Subject: [PATCH] Enable client resizing for non-pro customers

---
 src/app/(auth-state)/admin/photos/page.tsx |  3 ++-
 src/components/ImageInput.tsx              | 22 +++++++++-------------
 src/lib/CopyExif.ts                        |  2 +-
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/app/(auth-state)/admin/photos/page.tsx b/src/app/(auth-state)/admin/photos/page.tsx
index 05ca0477..02a54941 100644
--- a/src/app/(auth-state)/admin/photos/page.tsx
+++ b/src/app/(auth-state)/admin/photos/page.tsx
@@ -27,6 +27,7 @@ import AdminGrid from '@/admin/AdminGrid';
 import DeleteButton from '@/admin/DeleteButton';
 import EditButton from '@/admin/EditButton';
 import BlobUrls from '@/admin/BlobUrls';
+import { PRO_MODE_ENABLED } from '@/site/config';
 
 export const runtime = 'edge';
 
@@ -53,7 +54,7 @@ export default async function AdminTagsPage({
     <SiteGrid
       contentMain={
         <div className="space-y-8">
-          <PhotoUpload shouldResize={true} />
+          <PhotoUpload shouldResize={!PRO_MODE_ENABLED} />
           {blobPhotoUrls.length > 0 &&
             <div className={cc(
               'border-b pb-6',
diff --git a/src/components/ImageInput.tsx b/src/components/ImageInput.tsx
index 3fa1b470..b6637839 100644
--- a/src/components/ImageInput.tsx
+++ b/src/components/ImageInput.tsx
@@ -70,10 +70,8 @@ export default function ImageInput({
               const extension = file?.name.split('.').pop()?.toLowerCase();
               const canvas = ref.current;
               if (file) {
-                if (!maxSize) {
-                  // No need to resize
-                  onBlobReady?.(file);
-                } else if (canvas) {
+                if (maxSize && canvas) {
+                  // Process images that need resizing
                   const image = await blobToImage(file);
                   setImage(image);
                   const { naturalWidth, naturalHeight } = image;
@@ -87,15 +85,12 @@ export default function ImageInput({
                   canvas.width = width;
                   canvas.height = height;
                   
-                  // Specify wide gamut to avoid data loss during resizing
+                  // Specify wide gamut to avoid data loss while resizing
                   const ctx = canvas.getContext(
                     '2d',
                     { colorSpace: 'display-p3' },
                   );
 
-                  const imageType =
-                    `image/${extension === 'jpg' ? 'jpeg' : extension}`;
-
                   ctx?.drawImage(
                     image,
                     0,
@@ -106,15 +101,16 @@ export default function ImageInput({
                   canvas.toBlob(
                     async blob => {
                       if (blob) {
-                        // await sleep();
-                        const newBlob = await CopyExif(file, blob, imageType);
-                        // await sleep();
-                        onBlobReady?.(newBlob, extension);
+                        const blobWithExif = await CopyExif(file, blob);
+                        onBlobReady?.(blobWithExif, extension);
                       }
                     },
-                    imageType,
+                    'image/jpeg',
                     quality,
                   );
+                } else {
+                  // No need to process
+                  onBlobReady?.(file);
                 }
               }
             }}
diff --git a/src/lib/CopyExif.ts b/src/lib/CopyExif.ts
index 268759d1..edb8b4b4 100644
--- a/src/lib/CopyExif.ts
+++ b/src/lib/CopyExif.ts
@@ -11,7 +11,7 @@ const SOS = 0xffda;
 const APP1 = 0xffe1;
 const EXIF = 0x45786966;
 
-const retrieveExif = (blob: Blob): any =>
+const retrieveExif = (blob: Blob): Promise<Blob> =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.addEventListener('load', e => {