Refine blur compatibility behavior

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(

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

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

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),
     }} />

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

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