From 908db18fb0a0a9c9d1d57e7f8692d19088f6ca31 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sun, 28 Jan 2024 11:52:04 -0600 Subject: [PATCH 1/3] Introduce configuration preventing blur data being stored and displayed --- README.md | 1 + src/components/ImageBlurFallback.tsx | 30 ++++++++++++++++++++++++++++ src/components/ImageLarge.tsx | 7 +++---- src/components/ImageSmall.tsx | 6 +++--- src/components/ImageTiny.tsx | 4 ++-- src/photo/PhotoForm.tsx | 4 ++-- src/site/SiteChecklistClient.tsx | 11 ++++++++++ src/site/config.ts | 2 ++ 8 files changed, 54 insertions(+), 11 deletions(-) create mode 100644 src/components/ImageBlurFallback.tsx diff --git a/README.md b/README.md index 15eea1a7..e16e6e31 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ 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_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 new file mode 100644 index 00000000..ae010c74 --- /dev/null +++ b/src/components/ImageBlurFallback.tsx @@ -0,0 +1,30 @@ +'use client'; + +import { BLUR_DISABLED } from '@/site/config'; +import { useTheme } from 'next-themes'; +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/components/ImageLarge.tsx b/src/components/ImageLarge.tsx index 10ed1abf..927fb64e 100644 --- a/src/components/ImageLarge.tsx +++ b/src/components/ImageLarge.tsx @@ -1,6 +1,6 @@ import { IMAGE_LARGE_WIDTH } from '@/site'; -import Image from 'next/image'; import Link from 'next/link'; +import ImageBlurFallback from './ImageBlurFallback'; export default function ImageLarge({ className, @@ -16,7 +16,7 @@ export default function ImageLarge({ src: string alt: string aspectRatio: number - blurData: string + blurData?: string priority?: boolean }) { return ( @@ -24,13 +24,12 @@ export default function ImageLarge({ href={href} className="active:brightness-75" > - diff --git a/src/components/ImageSmall.tsx b/src/components/ImageSmall.tsx index 9822b02f..5c8cfec8 100644 --- a/src/components/ImageSmall.tsx +++ b/src/components/ImageSmall.tsx @@ -1,5 +1,5 @@ import { IMAGE_SMALL_WIDTH } from '@/site'; -import Image from 'next/image'; +import ImageBlurFallback from './ImageBlurFallback'; export default function ImageSmall({ className, @@ -12,10 +12,10 @@ export default function ImageSmall({ src: string alt: string aspectRatio: number - blurData: string + blurData?: string }) { return ( -
- + + Set environment variable to {'"1"'} to prevent + image blur data being stored and displayed + {renderEnvVars(['NEXT_PUBLIC_BLUR_DISABLED'])} + Date: Sun, 28 Jan 2024 12:42:47 -0600 Subject: [PATCH 2/3] Refine blur fallback, update blur documentation --- README.md | 4 ++-- src/components/ImageBlurFallback.tsx | 32 +++++++++++----------------- src/photo/PhotoForm.tsx | 11 ++++++---- src/photo/form.ts | 11 +++++----- src/photo/index.ts | 2 +- src/site/config.ts | 4 ++-- 6 files changed, 30 insertions(+), 34 deletions(-) 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, From 98787f33c2ca541f845869f3f19a3bc6636a147a Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sun, 28 Jan 2024 13:41:25 -0600 Subject: [PATCH 3/3] Reorder props --- src/components/ImageBlurFallback.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ImageBlurFallback.tsx b/src/components/ImageBlurFallback.tsx index 3b4c5aba..d34c1fc1 100644 --- a/src/components/ImageBlurFallback.tsx +++ b/src/components/ImageBlurFallback.tsx @@ -8,14 +8,14 @@ export default function ImageBlurFallback(props: ImageProps) { );