Enable client resizing for non-pro customers

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',

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);
                 }
               }
             }}

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 => {