Refine blur fallback, update blur documentation

README.md

@@ -62,8 +62,8 @@ Installation
 
 ### 6. Optional configuration
 
-- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage
-- `NEXT_PUBLIC_BLUR_DISABLED = 1` prevents image blur data being stored and displayed
+- `NEXT_PUBLIC_PRO_MODE = 1` enables higher quality image storage (will result in increased storage usage)
+- `NEXT_PUBLIC_BLUR_DISABLED = 1` prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)
 - `NEXT_PUBLIC_GEO_PRIVACY = 1` disables collection/display of location-based data
 - `NEXT_PUBLIC_IGNORE_PRIORITY_ORDER = 1` prevents `priority_order` field affecting photo order
 - `NEXT_PUBLIC_PUBLIC_API = 1` enables public API available at `/api`

src/components/ImageBlurFallback.tsx

@@ -1,30 +1,22 @@
-'use client';
-
-import { BLUR_DISABLED } from '@/site/config';
-import { useTheme } from 'next-themes';
+import { BLUR_ENABLED } from '@/site/config';
+import clsx from 'clsx/lite';
 import Image, { ImageProps } from 'next/image';
 
-// Based on bg-gray-100/50 (#f9f9fa)
-// eslint-disable-next-line max-len
-const BLUR_DATA_LIGHT = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAC4jAAAuIwF4pT92AAAADElEQVQImWP4+fMXAAXbAu0I+kpzAAAAAElFTkSuQmCC';
-
-// Based on bg-gray-900/50 (#090c14)
-// eslint-disable-next-line max-len
-const BLUR_DATA_DARK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAC4jAAAuIwF4pT92AAAADElEQVQImWPg5BEBAABLACpEF6ULAAAAAElFTkSuQmCC';
-
 export default function ImageBlurFallback(props: ImageProps) {
-  const { resolvedTheme } = useTheme();
-  const blueFallback = resolvedTheme === 'dark'
-    ? BLUR_DATA_DARK
-    : BLUR_DATA_LIGHT;
   return (
     // eslint-disable-next-line jsx-a11y/alt-text
     <Image {...{
       ...props,
-      blurDataURL: !BLUR_DISABLED && props.blurDataURL
-        ? props.blurDataURL
-        : blueFallback,
-      placeholder: 'blur',
+      ...BLUR_ENABLED && props.blurDataURL ? {
+        blurDataURL: props.blurDataURL,
+        placeholder: 'blur',
+      }: {
+        className: clsx(
+          props.className,
+          'bg-gray-100/50 dark:bg-gray-900/50',
+        ),
+        placeholder: 'empty',
+      },
     }} />
   );
 }

src/photo/PhotoForm.tsx

@@ -22,6 +22,7 @@ import {
 import { toastSuccess, toastWarning } from '@/toast';
 import { getDimensionsFromSize } from '@/utility/size';
 import ImageBlurFallback from '@/components/ImageBlurFallback';
+import { BLUR_ENABLED } from '@/site/config';
 
 const THUMBNAIL_SIZE = 300;
 
@@ -97,10 +98,12 @@ export default function PhotoForm({
   const url = formData.url ?? '';
 
   const updateBlurData = useCallback((blurData: string) => {
-    setFormData(data => ({
-      ...data,
-      blurData,
-    }));
+    if (BLUR_ENABLED) {
+      setFormData(data => ({
+        ...data,
+        blurData,
+      }));
+    }
   }, []);
 
   return (

src/photo/form.ts

@@ -13,7 +13,7 @@ import {
   MAKE_FUJIFILM,
 } from '@/vendors/fujifilm';
 import { FilmSimulation } from '@/simulation';
-import { GEO_PRIVACY_ENABLED } from '@/site/config';
+import { BLUR_ENABLED, GEO_PRIVACY_ENABLED } from '@/site/config';
 import { TAG_FAVS, doesTagsStringIncludeFavs } from '@/tag';
 
 type VirtualFields = 'favorite';
@@ -28,8 +28,8 @@ type FormMeta = {
   readOnly?: boolean
   validate?: (value?: string) => string | undefined
   capitalize?: boolean
+  hide?: boolean
   hideIfEmpty?: boolean
-  hideTemporarily?: boolean
   hideBasedOnCamera?: (make?: string, mode?: string) => boolean
   loadingMessage?: string
   checkbox?: boolean
@@ -50,7 +50,8 @@ const FORM_METADATA: Record<keyof PhotoFormData, FormMeta> = {
   blurData: {
     label: 'blur data',
     readOnly: true,
-    required: true,
+    required: BLUR_ENABLED,
+    hideIfEmpty: !BLUR_ENABLED,
     loadingMessage: 'Generating blur data ...',
   },
   url: { label: 'url', readOnly: true },
@@ -70,7 +71,7 @@ const FORM_METADATA: Record<keyof PhotoFormData, FormMeta> = {
   iso: { label: 'ISO' },
   exposureTime: { label: 'exposure time' },
   exposureCompensation: { label: 'exposure compensation' },
-  locationName: { label: 'location name', hideTemporarily: true },
+  locationName: { label: 'location name', hide: true },
   latitude: { label: 'latitude' },
   longitude: { label: 'longitude' },
   takenAt: { label: 'taken at' },
@@ -82,7 +83,7 @@ const FORM_METADATA: Record<keyof PhotoFormData, FormMeta> = {
 
 export const FORM_METADATA_ENTRIES =
   (Object.entries(FORM_METADATA) as [keyof PhotoFormData, FormMeta][])
-    .filter(([_, meta]) => !meta.hideTemporarily);
+    .filter(([_, meta]) => !meta.hide);
 
 export const convertFormKeysToLabels = (keys: (keyof PhotoFormData)[]) =>
   keys.map(key => FORM_METADATA[key].label.toUpperCase());

src/photo/index.ts

@@ -44,7 +44,7 @@ export interface PhotoDbInsert extends PhotoExif {
   id: string
   url: string
   extension: string
-  blurData: string
+  blurData?: string
   title?: string
   tags?: string[]
   locationName?: string

src/site/config.ts

@@ -82,7 +82,7 @@ export const CURRENT_STORAGE: StorageType =
 // SETTINGS
 
 export const PRO_MODE_ENABLED = process.env.NEXT_PUBLIC_PRO_MODE === '1';
-export const BLUR_DISABLED = process.env.NEXT_PUBLIC_BLUR_DISABLED === '1';
+export const BLUR_ENABLED = process.env.NEXT_PUBLIC_BLUR_DISABLED !== '1';
 export const GEO_PRIVACY_ENABLED = process.env.NEXT_PUBLIC_GEO_PRIVACY === '1';
 export const PRIORITY_ORDER_ENABLED =
   process.env.NEXT_PUBLIC_IGNORE_PRIORITY_ORDER !== '1';
@@ -121,7 +121,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   showFilmSimulations: SHOW_FILM_SIMULATIONS,
   showExifInfo: SHOW_EXIF_DATA,
   isProModeEnabled: PRO_MODE_ENABLED,
-  isBlurEnabled: !BLUR_DISABLED,
+  isBlurEnabled: BLUR_ENABLED,
   isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
   isPriorityOrderEnabled: PRIORITY_ORDER_ENABLED,
   isPublicApiEnabled: PUBLIC_API_ENABLED,