diff --git a/README.md b/README.md
index e16e6e31..ffb3fa35 100644
--- a/README.md
+++ b/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`
diff --git a/src/components/ImageBlurFallback.tsx b/src/components/ImageBlurFallback.tsx
index ae010c74..3b4c5aba 100644
--- a/src/components/ImageBlurFallback.tsx
+++ b/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
);
}
diff --git a/src/photo/PhotoForm.tsx b/src/photo/PhotoForm.tsx
index 34432b54..a25fdc0b 100644
--- a/src/photo/PhotoForm.tsx
+++ b/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 (
diff --git a/src/photo/form.ts b/src/photo/form.ts
index 6e243165..ea7219b4 100644
--- a/src/photo/form.ts
+++ b/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 = {
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 = {
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 = {
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());
diff --git a/src/photo/index.ts b/src/photo/index.ts
index f7806cf6..3797d0c9 100644
--- a/src/photo/index.ts
+++ b/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
diff --git a/src/site/config.ts b/src/site/config.ts
index 1f2a0fd9..8ced3013 100644
--- a/src/site/config.ts
+++ b/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,