From 7b4fe756b34bc1838f7cd2635d85e7066092c7d6 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 7 May 2024 10:26:26 -0500
Subject: [PATCH] Refine blur compatibility behavior

---
 src/components/ImageBlurFallback.tsx | 19 +++++++++++++------
 src/components/ImageLarge.tsx        |  2 +-
 src/components/ImageSmall.tsx        |  2 +-
 src/components/ImageTiny.tsx         |  2 +-
 src/photo/form/PhotoForm.tsx         | 14 +++++++++++---
 src/photo/index.ts                   |  4 ++--
 6 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/components/ImageBlurFallback.tsx b/src/components/ImageBlurFallback.tsx
index 7c2aa474..acdd58fc 100644
--- a/src/components/ImageBlurFallback.tsx
+++ b/src/components/ImageBlurFallback.tsx
@@ -8,13 +8,13 @@ import Image, { ImageProps } from 'next/image';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export default function ImageBlurFallback(props: ImageProps & {
-  blurCompatibilityMode?: boolean
+  blurCompatibilityLevel?: 'none' | 'low' | 'high';
 }) {
   const {
     className,
     priority,
     blurDataURL,
-    blurCompatibilityMode,
+    blurCompatibilityLevel = 'low',
     ...rest
   } = props;
 
@@ -54,6 +54,16 @@ export default function ImageBlurFallback(props: ImageProps & {
     !wasCached &&
     !hideBlurPlaceholder;
 
+  const getBlurClass = () => {
+    switch (blurCompatibilityLevel) {
+    case 'high':
+      // Fix poorly blurred placeholder data generated on client
+      return 'blur-[4px] @xs:blue-md scale-[1.05]';
+    case 'low':
+      return 'blur-[2px] @xs:blue-md scale-[1.01]';
+    }
+  };
+
   return (
     <div
       className={clsx(
@@ -75,10 +85,7 @@ export default function ImageBlurFallback(props: ImageProps & {
               src: blurDataURL,
               className: clsx(
                 imageClassName,
-                // Fix poorly blurred placeholder data generated on client
-                blurCompatibilityMode
-                  ? 'blur-[4px] @xs:blue-md scale-[1.05]'
-                  : 'blur-[2px] @xs:blue-md scale-[1.01]',
+                getBlurClass(),
               ),
             }} />
             :  <div className={clsx(
diff --git a/src/components/ImageLarge.tsx b/src/components/ImageLarge.tsx
index 60f7a985..4740e7c5 100644
--- a/src/components/ImageLarge.tsx
+++ b/src/components/ImageLarge.tsx
@@ -24,7 +24,7 @@ export default function ImageLarge({
       src,
       alt,
       blurDataURL: blurData,
-      blurCompatibilityMode,
+      blurCompatibilityLevel: blurCompatibilityMode ? 'high' : 'none',
       priority,
       width: IMAGE_LARGE_WIDTH,
       height: Math.round(IMAGE_LARGE_WIDTH / aspectRatio),
diff --git a/src/components/ImageSmall.tsx b/src/components/ImageSmall.tsx
index 830a767a..b03489f5 100644
--- a/src/components/ImageSmall.tsx
+++ b/src/components/ImageSmall.tsx
@@ -24,7 +24,7 @@ export default function ImageSmall({
       src,
       alt,
       blurDataURL: blurData,
-      blurCompatibilityMode,
+      blurCompatibilityLevel: blurCompatibilityMode ? 'high' : 'none',
       priority,
       width: IMAGE_SMALL_WIDTH,
       height: Math.round(IMAGE_SMALL_WIDTH / aspectRatio),
diff --git a/src/components/ImageTiny.tsx b/src/components/ImageTiny.tsx
index cf57eda8..9b319f50 100644
--- a/src/components/ImageTiny.tsx
+++ b/src/components/ImageTiny.tsx
@@ -22,7 +22,7 @@ export default function ImageTiny({
       src,
       alt,
       blurDataURL: blurData,
-      blurCompatibilityMode,
+      blurCompatibilityLevel: blurCompatibilityMode ? 'high' : 'none',
       width: IMAGE_TINY_WIDTH,
       height: Math.round(IMAGE_TINY_WIDTH / aspectRatio),
     }} />
diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx
index ce69fd7f..e180b6e2 100644
--- a/src/photo/form/PhotoForm.tsx
+++ b/src/photo/form/PhotoForm.tsx
@@ -214,9 +214,16 @@ export default function PhotoForm({
     key: keyof PhotoDbInsert | 'favorite',
     hideIfEmpty?: boolean,
     shouldHide?: (formData: Partial<PhotoFormData>) => boolean,
-  ) => 
-    (hideIfEmpty && !formData[key]) ||
-    shouldHide?.(formData);
+  ) => {
+    if (key === 'blurData' && type === 'create' && !shouldDebugBlur) {
+      return true;
+    } else {
+      return (
+        (hideIfEmpty && !formData[key]) ||
+        shouldHide?.(formData)
+      );
+    }
+  };
     
   return (
     <div className="space-y-8 max-w-[38rem] relative">
@@ -230,6 +237,7 @@ export default function PhotoForm({
               'border-gray-200 dark:border-gray-700',
             )}
             blurDataURL={formData.blurData}
+            blurCompatibilityLevel="none"
             width={width}
             height={height}
             priority
diff --git a/src/photo/index.ts b/src/photo/index.ts
index d93af5b3..903fb8bd 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -11,7 +11,7 @@ import {
   formatFocalLength,
 } from '@/utility/exif';
 import camelcaseKeys from 'camelcase-keys';
-import { isAfter } from 'date-fns';
+import { isBefore } from 'date-fns';
 import type { Metadata } from 'next';
 
 // ROOT PAGE
@@ -279,4 +279,4 @@ export const isNextImageReadyBasedOnPhotos = async (photos: Photo[]) =>
     .catch(() => false);
 
 export const doesPhotoNeedBlurCompatibility = (photo: Photo) =>
-  isAfter(photo.updatedAt, new Date('2024-05-07'));
+  isBefore(photo.updatedAt, new Date('2024-05-07'));