- (null);
- const refImage = useRef(typeof Image !== 'undefined' ? new Image() : null);
- const refTimeouts = useRef([]);
- const refShouldCapture = useRef(true);
-
- useEffect(() => {
- refShouldCapture.current = true;
-
- const capture = () => {
- if (refShouldCapture.current) {
- if (
- refCanvas.current &&
- refImage.current?.complete
- ) {
- const canvas = refCanvas.current;
- canvas.width = width * scale;
- canvas.height = height * scale;
- canvas.style.width = `${width}px`;
- canvas.style.height = `${height}px`;
- const context = refCanvas.current?.getContext('2d');
- if (context) {
- // Draw scaled image
- context.scale(scale, scale);
- context.drawImage(
- refImage.current,
- -edgeCompensation,
- -edgeCompensation,
- width + edgeCompensation * 2,
- width * refImage.current.height / refImage.current.width +
- edgeCompensation * 2,
- );
- onLoad?.(canvas.toDataURL('image/jpeg', quality));
- // Draw blurred image
- context.filter =
- 'contrast(1.2) saturate(1.2) ' +
- `blur(${scale * 10}px)`;
- context.drawImage(
- refImage.current,
- -edgeCompensation,
- -edgeCompensation,
- width + edgeCompensation * 2,
- width * refImage.current.height / refImage.current.width +
- edgeCompensation * 2,
- );
- onCapture(canvas.toDataURL('image/jpeg', quality));
- onError?.('');
- refTimeouts.current.forEach(clearTimeout);
- refShouldCapture.current = false;
- } else {
- console.error('Cannot get 2d context ... retrying');
- onError?.('Cannot get 2d context ... retrying');
- // Retry capture in case canvas is not available
- refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
- }
- } else {
- // eslint-disable-next-line max-len
- console.error('Cannot generate blur data: canvas/image not ready ... retrying');
- // eslint-disable-next-line max-len
- onError?.('Cannot generate blur data: canvas/image not ready ... retrying');
- // Retry capture in case canvas is not available
- refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
- }
- }
- };
-
- if (refImage.current) {
- refImage.current.crossOrigin = 'anonymous';
- refImage.current.src = imageUrl;
- refImage.current.onload = capture;
- }
-
- // Attempt delayed capture in case image.onload never fires
- refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
-
- // Store timeout ref to ensure it's closed over
- // in cleanup function (recommended by exhaustive-deps)
- const timeouts = refTimeouts.current;
- return () => {
- refShouldCapture.current = false;
- timeouts.forEach(clearTimeout);
- };
- }, [
- imageUrl,
- onCapture,
- onLoad,
- onError,
- width,
- height,
- edgeCompensation,
- scale,
- quality,
- ]);
-
- return (
-
- );
-}
diff --git a/src/components/CommandKClient.tsx b/src/components/CommandKClient.tsx
index 5286062a..7c566112 100644
--- a/src/components/CommandKClient.tsx
+++ b/src/components/CommandKClient.tsx
@@ -36,6 +36,7 @@ import { TbPhoto } from 'react-icons/tb';
import { getKeywordsForPhoto, titleForPhoto } from '@/photo';
import PhotoDate from '@/photo/PhotoDate';
import PhotoTiny from '@/photo/PhotoTiny';
+import { FaCheck } from 'react-icons/fa6';
const LISTENER_KEYDOWN = 'keydown';
const MINIMUM_QUERY_LENGTH = 2;
@@ -69,9 +70,12 @@ export default function CommandKClient({
isUserSignedIn,
setUserEmail,
isCommandKOpen: isOpen,
+ shouldShowBaselineGrid,
+ shouldDebugBlur,
setIsCommandKOpen: setIsOpen,
setShouldRespondToKeyboardCommands,
setShouldShowBaselineGrid,
+ setShouldDebugBlur,
} = useAppState();
const isOpenRef = useRef(isOpen);
@@ -193,8 +197,13 @@ export default function CommandKClient({
heading: 'Debug Tools',
accessory:
- {showPlaceholder &&
+ {(showPlaceholder || shouldDebugBlur) &&
-
uniqueTags: TagsWithMeta
hasAiTextGeneration?: boolean
textFieldsToAutoGenerate?: AiAutoGeneratedField[],
+ imageThumbnailBase64?: string
}) {
const {
pending,
@@ -31,7 +33,10 @@ export default function UploadPageClient({
hasTextContent,
setHasTextContent,
aiContent,
- } = usePhotoFormParent({ textFieldsToAutoGenerate });
+ } = usePhotoFormParent({
+ textFieldsToAutoGenerate,
+ imageThumbnailBase64,
+ });
const initialPhotoForm = useMemo(() => ({
...photoFormExif,
diff --git a/src/photo/actions.ts b/src/photo/actions.ts
index 21dcc7f4..f2d190dc 100644
--- a/src/photo/actions.ts
+++ b/src/photo/actions.ts
@@ -33,15 +33,18 @@ import {
PATH_ROOT,
pathForPhoto,
} from '@/site/paths';
-import { extractExifDataFromBlobPath } from './server';
+import { blurImageFromUrl, extractImageDataFromBlobPath } from './server';
import { TAG_FAVS, isTagFavs } from '@/tag';
import { convertPhotoToPhotoDbInsert } from '.';
import { safelyRunAdminServerAction } from '@/auth';
import { AI_IMAGE_QUERIES, AiImageQuery } from './ai';
import { streamOpenAiImageQuery } from '@/services/openai';
+import { BLUR_ENABLED } from '@/site/config';
-export async function createPhotoAction(formData: FormData) {
- return safelyRunAdminServerAction(async () => {
+// Private actions
+
+export const createPhotoAction = async (formData: FormData) =>
+ safelyRunAdminServerAction(async () => {
const photo = convertFormDataToPhotoDbInsert(formData, true);
const updatedUrl = await convertUploadToPhoto(photo.url, photo.id);
@@ -54,10 +57,9 @@ export async function createPhotoAction(formData: FormData) {
redirect(PATH_ADMIN_PHOTOS);
});
-}
-export async function updatePhotoAction(formData: FormData) {
- return safelyRunAdminServerAction(async () => {
+export const updatePhotoAction = async (formData: FormData) =>
+ safelyRunAdminServerAction(async () => {
const photo = convertFormDataToPhotoDbInsert(formData);
await sqlUpdatePhoto(photo);
@@ -66,13 +68,12 @@ export async function updatePhotoAction(formData: FormData) {
redirect(PATH_ADMIN_PHOTOS);
});
-}
-export async function toggleFavoritePhotoAction(
+export const toggleFavoritePhotoAction = async (
photoId: string,
shouldRedirect?: boolean,
-) {
- return safelyRunAdminServerAction(async () => {
+) =>
+ safelyRunAdminServerAction(async () => {
const photo = await getPhoto(photoId);
if (photo) {
const { tags } = photo;
@@ -86,33 +87,30 @@ export async function toggleFavoritePhotoAction(
}
}
});
-}
-export async function deletePhotoAction(
+export const deletePhotoAction = async (
photoId: string,
photoUrl: string,
shouldRedirect?: boolean,
-) {
- return safelyRunAdminServerAction(async () => {
+) =>
+ safelyRunAdminServerAction(async () => {
await sqlDeletePhoto(photoId).then(() => deleteStorageUrl(photoUrl));
revalidateAllKeysAndPaths();
if (shouldRedirect) {
redirect(PATH_ROOT);
}
});
-};
-export async function deletePhotoFormAction(formData: FormData) {
- return safelyRunAdminServerAction(async () =>
+export const deletePhotoFormAction = async (formData: FormData) =>
+ safelyRunAdminServerAction(() =>
deletePhotoAction(
formData.get('id') as string,
formData.get('url') as string,
)
);
-};
-export async function deletePhotoTagGloballyAction(formData: FormData) {
- return safelyRunAdminServerAction(async () => {
+export const deletePhotoTagGloballyAction = async (formData: FormData) =>
+ safelyRunAdminServerAction(async () => {
const tag = formData.get('tag') as string;
await sqlDeletePhotoTagGlobally(tag);
@@ -120,10 +118,9 @@ export async function deletePhotoTagGloballyAction(formData: FormData) {
revalidatePhotosKey();
revalidateAdminPaths();
});
-}
-export async function renamePhotoTagGloballyAction(formData: FormData) {
- return safelyRunAdminServerAction(async () => {
+export const renamePhotoTagGloballyAction = async (formData: FormData) =>
+ safelyRunAdminServerAction(async () => {
const tag = formData.get('tag') as string;
const updatedTag = formData.get('updatedTag') as string;
@@ -134,10 +131,9 @@ export async function renamePhotoTagGloballyAction(formData: FormData) {
redirect(PATH_ADMIN_TAGS);
}
});
-}
-export async function deleteBlobPhotoAction(formData: FormData) {
- return safelyRunAdminServerAction(async () => {
+export const deleteBlobPhotoAction = async (formData: FormData) =>
+ safelyRunAdminServerAction(async () => {
await deleteStorageUrl(formData.get('url') as string);
revalidateAdminPaths();
@@ -146,30 +142,35 @@ export async function deleteBlobPhotoAction(formData: FormData) {
redirect(PATH_ADMIN_PHOTOS);
}
});
-}
-export async function getExifDataAction(
+// Accessed from admin photo edit page
+// will not update blur data
+export const getExifDataAction = async (
photoFormPrevious: Partial,
-): Promise> {
- return safelyRunAdminServerAction(async () => {
+): Promise> =>
+ safelyRunAdminServerAction(async () => {
const { url } = photoFormPrevious;
if (url) {
- const { photoFormExif } = await extractExifDataFromBlobPath(url);
+ const { photoFormExif } = await extractImageDataFromBlobPath(url);
if (photoFormExif) {
return photoFormExif;
}
}
return {};
});
-}
-export async function syncPhotoExifDataAction(formData: FormData) {
- return safelyRunAdminServerAction(async () => {
+// Accessed from admin photo table
+// will update blur data
+export const syncPhotoExifDataAction = async (formData: FormData) =>
+ safelyRunAdminServerAction(async () => {
const photoId = formData.get('id') as string;
if (photoId) {
const photo = await getPhoto(photoId);
if (photo) {
- const { photoFormExif } = await extractExifDataFromBlobPath(photo.url);
+ const { photoFormExif } = await extractImageDataFromBlobPath(
+ photo.url, {
+ generateBlurData: BLUR_ENABLED,
+ });
if (photoFormExif) {
const photoFormDbInsert = convertFormDataToPhotoDbInsert({
...convertPhotoToFormData(photo),
@@ -181,26 +182,21 @@ export async function syncPhotoExifDataAction(formData: FormData) {
}
}
});
-}
-export async function syncCacheAction() {
- return safelyRunAdminServerAction(revalidateAllKeysAndPaths);
-}
+export const syncCacheAction = async () =>
+ safelyRunAdminServerAction(revalidateAllKeysAndPaths);
-export async function streamAiImageQueryAction(
+export const streamAiImageQueryAction = async (
imageBase64: string,
query: AiImageQuery,
-) {
- return safelyRunAdminServerAction(async () =>
- streamOpenAiImageQuery(imageBase64, AI_IMAGE_QUERIES[query]));
-}
-
-export const getPhotosCachedAction = async (
- offset: number,
- limit: number,
- includeHidden?: boolean,
) =>
- getPhotosCachedCached({ offset, includeHidden, limit });
+ safelyRunAdminServerAction(() =>
+ streamOpenAiImageQuery(imageBase64, AI_IMAGE_QUERIES[query]));
+
+export const getImageBlurAction = async (url: string) =>
+ safelyRunAdminServerAction(() => blurImageFromUrl(url));
+
+// Public actions
export const getPhotosAction = async (
offset: number,
@@ -209,6 +205,13 @@ export const getPhotosAction = async (
) =>
getPhotos({ offset, includeHidden, limit });
+export const getPhotosCachedAction = async (
+ offset: number,
+ limit: number,
+ includeHidden?: boolean,
+) =>
+ getPhotosCachedCached({ offset, includeHidden, limit });
+
export const queryPhotosByTitleAction = async (query: string) =>
(await getPhotos({ query, limit: 10 }))
.filter(({ title }) => Boolean(title));
diff --git a/src/photo/ai/AiButton.tsx b/src/photo/ai/AiButton.tsx
index b88d1fb0..f7fbdbe7 100644
--- a/src/photo/ai/AiButton.tsx
+++ b/src/photo/ai/AiButton.tsx
@@ -56,7 +56,7 @@ export default function AiButton({
e.preventDefault();
}
}}
- disabled={!aiContent.isReady || isLoading}
+ disabled={isLoading}
>
{isLoading ? ;
export default function useAiImageQueries(
textFieldsToAutoGenerate: AiAutoGeneratedField[] = [],
+ imageData?: string,
) {
- const [imageData, setImageData] = useState();
-
- const isReady = Boolean(imageData);
-
const [
requestTitleCaption,
_title,
@@ -115,12 +112,10 @@ export default function useAiImageQueries(
caption,
tags,
semanticDescription,
- isReady,
isLoading,
isLoadingTitle,
isLoadingCaption,
isLoadingTags,
isLoadingSemantic,
- setImageData,
};
}
diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx
index 7e0e7f26..e180b6e2 100644
--- a/src/photo/form/PhotoForm.tsx
+++ b/src/photo/form/PhotoForm.tsx
@@ -1,6 +1,6 @@
'use client';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import {
FORM_METADATA_ENTRIES,
PhotoFormData,
@@ -15,42 +15,41 @@ import { createPhotoAction, updatePhotoAction } from '../actions';
import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
import Link from 'next/link';
import { clsx } from 'clsx/lite';
-import CanvasBlurCapture from '@/components/CanvasBlurCapture';
import { PATH_ADMIN_PHOTOS, PATH_ADMIN_UPLOADS } from '@/site/paths';
import { toastSuccess, toastWarning } from '@/toast';
import { getDimensionsFromSize } from '@/utility/size';
import ImageBlurFallback from '@/components/ImageBlurFallback';
-import { BLUR_ENABLED } from '@/site/config';
import { TagsWithMeta, sortTagsObjectWithoutFavs } from '@/tag';
import { formatCount, formatCountDescriptive } from '@/utility/string';
import { AiContent } from '../ai/useAiImageQueries';
import AiButton from '../ai/AiButton';
import Spinner from '@/components/Spinner';
-import { getNextImageUrlForRequest } from '@/services/next-image';
-import useDelay from '@/utility/useDelay';
import usePreventNavigation from '@/utility/usePreventNavigation';
import { useAppState } from '@/state/AppState';
+import UpdateBlurDataButton from '../UpdateBlurDataButton';
+import { getNextImageUrlForManipulation } from '@/services/next-image';
+import { BLUR_ENABLED } from '@/site/config';
+import { PhotoDbInsert } from '..';
const THUMBNAIL_SIZE = 300;
export default function PhotoForm({
+ type = 'create',
initialPhotoForm,
updatedExifData,
- type = 'create',
+ updatedBlurData,
uniqueTags,
aiContent,
- debugBlur,
onTitleChange,
onTextContentChange,
onFormStatusChange,
}: {
+ type?: 'create' | 'edit'
initialPhotoForm: Partial
updatedExifData?: Partial
- type?: 'create' | 'edit'
+ updatedBlurData?: string
uniqueTags?: TagsWithMeta
aiContent?: AiContent
- setImageData?: (imageData: string) => void
- debugBlur?: boolean
onTitleChange?: (updatedTitle: string) => void
onTextContentChange?: (hasContent: boolean) => void,
onFormStatusChange?: (pending: boolean) => void
@@ -59,11 +58,8 @@ export default function PhotoForm({
useState>(initialPhotoForm);
const [formErrors, setFormErrors] =
useState(getFormErrors(initialPhotoForm));
- const [blurError, setBlurError] =
- useState();
- const [hasBlurData, setHasBlurData] = useState(false);
- const { invalidateSwr } = useAppState();
+ const { invalidateSwr, shouldDebugBlur } = useAppState();
const changedFormKeys = useMemo(() =>
getChangedFormFields(initialPhotoForm, formData),
@@ -79,17 +75,6 @@ export default function PhotoForm({
(type === 'create' || formHasChanged) &&
isFormValid(formData) &&
!aiContent?.isLoading;
-
- const didLoad1000msAgo = useDelay(1000);
-
- // Show image loading status when necessary for
- // blur data or AI analysis
- const showImageLoadingStatus =
- !hasBlurData &&
- didLoad1000msAgo && (
- (BLUR_ENABLED && !formData.blurData) ||
- aiContent !== undefined
- );
// Update form when EXIF data
// is refreshed by parent
@@ -130,15 +115,15 @@ export default function PhotoForm({
const url = formData.url ?? '';
- const updateBlurData = useCallback((blurData: string) => {
- if (BLUR_ENABLED) {
- setFormData(data => ({
- ...data,
- blurData,
- }));
+ useEffect(() => {
+ if (updatedBlurData) {
+ setFormData(data => updatedBlurData
+ ? { ...data, blurData: updatedBlurData }
+ : data);
+ } else if (!BLUR_ENABLED) {
+ setFormData(data => ({ ...data, blurData: '' }));
}
- setHasBlurData(true);
- }, []);
+ }, [updatedBlurData]);
useEffect(() =>
setFormData(data => aiContent?.title
@@ -183,7 +168,7 @@ export default function PhotoForm({
}
};
- const aiButtonForField = (key: keyof PhotoFormData) => {
+ const accessoryForField = (key: keyof PhotoFormData) => {
if (aiContent) {
switch (key) {
case 'title':
@@ -213,16 +198,35 @@ export default function PhotoForm({
requestFields={['semantic']}
shouldConfirm={Boolean(formData.semanticDescription)}
/>;
+ case 'blurData':
+ return shouldDebugBlur && type === 'edit' && formData.url
+ ?
+ setFormData(data => ({ ...data, blurData }))}
+ />
+ : null;
}
}
};
+ const shouldHideField = (
+ key: keyof PhotoDbInsert | 'favorite',
+ hideIfEmpty?: boolean,
+ shouldHide?: (formData: Partial) => boolean,
+ ) => {
+ if (key === 'blurData' && type === 'create' && !shouldDebugBlur) {
+ return true;
+ } else {
+ return (
+ (hideIfEmpty && !formData[key]) ||
+ shouldHide?.(formData)
+ );
+ }
+ };
+
return (
,
- textFieldsToAutoGenerate?: AiAutoGeneratedField[],
-} = {}) {
+ photoForm?: Partial
+ textFieldsToAutoGenerate?: AiAutoGeneratedField[]
+ imageThumbnailBase64?: string,
+}) {
const [pending, setIsPending] = useState(false);
const [updatedTitle, setUpdatedTitle] = useState('');
const [hasTextContent, setHasTextContent] =
useState(photoForm ? formHasTextContent(photoForm) : false);
- const aiContent = useAiImageQueries(textFieldsToAutoGenerate);
+ const aiContent = useAiImageQueries(
+ textFieldsToAutoGenerate,
+ imageThumbnailBase64,
+ );
return {
pending,
diff --git a/src/photo/index.ts b/src/photo/index.ts
index 0c94abd5..122b5b63 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -11,6 +11,7 @@ import {
formatFocalLength,
} from '@/utility/exif';
import camelcaseKeys from 'camelcase-keys';
+import { isBefore } from 'date-fns';
import type { Metadata } from 'next';
export const GENERATE_STATIC_PARAMS_LIMIT = 1000;
@@ -278,3 +279,6 @@ export const isNextImageReadyBasedOnPhotos = async (photos: Photo[]) =>
photos.length > 0 && fetch(getNextImageUrlForRequest(photos[0].url, 640))
.then(response => response.ok)
.catch(() => false);
+
+export const doesPhotoNeedBlurCompatibility = (photo: Photo) =>
+ isBefore(photo.updatedAt, new Date('2024-05-07'));
diff --git a/src/photo/server.ts b/src/photo/server.ts
index 96fae675..2f0bc5b9 100644
--- a/src/photo/server.ts
+++ b/src/photo/server.ts
@@ -10,14 +10,29 @@ import {
import { ExifData, ExifParserFactory } from 'ts-exif-parser';
import { PhotoFormData } from './form';
import { FilmSimulation } from '@/simulation';
+import sharp, { Sharp } from 'sharp';
-export const extractExifDataFromBlobPath = async (
+const IMAGE_WIDTH_RESIZE = 200;
+const IMAGE_WIDTH_BLUR = 200;
+
+export const extractImageDataFromBlobPath = async (
blobPath: string,
- includeInitialPhotoFields?: boolean,
+ options?: {
+ includeInitialPhotoFields?: boolean
+ generateBlurData?: boolean
+ generateResizedImage?: boolean
+ },
): Promise<{
blobId?: string
photoFormExif?: Partial
+ imageResizedBase64?: string
}> => {
+ const {
+ includeInitialPhotoFields,
+ generateBlurData,
+ generateResizedImage,
+ } = options ?? {};
+
const url = decodeURIComponent(blobPath);
const blobId = getIdFromStorageUrl(url);
@@ -25,12 +40,13 @@ export const extractExifDataFromBlobPath = async (
const extension = getExtensionFromStorageUrl(url);
const fileBytes = blobPath
- ? await fetch(url)
- .then(res => res.arrayBuffer())
+ ? await fetch(url).then(res => res.arrayBuffer())
: undefined;
let exifData: ExifData | undefined;
let filmSimulation: FilmSimulation | undefined;
+ let blurData: string | undefined;
+ let imageResizedBase64: string | undefined;
if (fileBytes) {
const parser = ExifParserFactory.create(Buffer.from(fileBytes));
@@ -50,6 +66,14 @@ export const extractExifDataFromBlobPath = async (
filmSimulation = getFujifilmSimulationFromMakerNote(makerNote);
}
}
+
+ if (generateBlurData) {
+ blurData = await blurImage(fileBytes);
+ }
+
+ if (generateResizedImage) {
+ imageResizedBase64 = await resizeImage(fileBytes);
+ }
}
return {
@@ -62,8 +86,41 @@ export const extractExifDataFromBlobPath = async (
extension,
url,
},
+ ...generateBlurData && { blurData },
...convertExifToFormData(exifData, filmSimulation),
},
},
+ imageResizedBase64,
};
};
+
+const generateBase64 = async (
+ image: ArrayBuffer,
+ middleware: (sharp: Sharp) => Sharp,
+) =>
+ middleware(sharp(image))
+ .toFormat('jpeg', { quality: 90 })
+ .toBuffer()
+ .then(data => `data:image/jpeg;base64,${data.toString('base64')}`);
+
+const resizeImage = async (image: ArrayBuffer) =>
+ generateBase64(image, sharp => sharp
+ .resize(IMAGE_WIDTH_RESIZE)
+ );
+
+const blurImage = async (image: ArrayBuffer) =>
+ generateBase64(image, sharp => sharp
+ .resize(IMAGE_WIDTH_BLUR)
+ .modulate({ saturation: 1.15 })
+ .blur(4)
+ );
+
+export const resizeImageFromUrl = async (url: string) =>
+ fetch(decodeURIComponent(url))
+ .then(res => res.arrayBuffer())
+ .then(buffer => resizeImage(buffer));
+
+export const blurImageFromUrl = async (url: string) =>
+ fetch(decodeURIComponent(url))
+ .then(res => res.arrayBuffer())
+ .then(buffer => blurImage(buffer));
diff --git a/src/services/next-image.ts b/src/services/next-image.ts
index 9b8cc116..13ce7ffe 100644
--- a/src/services/next-image.ts
+++ b/src/services/next-image.ts
@@ -23,3 +23,8 @@ export const getNextImageUrlForRequest = (
return url.toString();
};
+
+// Generate small, low-bandwidth images for quick manipulations such as
+// generating blur data or image thumbnails for AI text generation
+export const getNextImageUrlForManipulation = (imageUrl: string) =>
+ getNextImageUrlForRequest(imageUrl, 640, 90);
diff --git a/src/site/Footer.tsx b/src/site/Footer.tsx
index f598ec38..f874bc62 100644
--- a/src/site/Footer.tsx
+++ b/src/site/Footer.tsx
@@ -34,10 +34,10 @@ export default function Footer() {
? [
{(BLUR_ENABLED && props.blurDataURL)
? ![]()
:
diff --git a/src/components/ImageSmall.tsx b/src/components/ImageSmall.tsx
index d13cb0e7..b03489f5 100644
--- a/src/components/ImageSmall.tsx
+++ b/src/components/ImageSmall.tsx
@@ -7,6 +7,7 @@ export default function ImageSmall({
alt,
aspectRatio,
blurData,
+ blurCompatibilityMode,
priority,
}: {
className?: string
@@ -14,6 +15,7 @@ export default function ImageSmall({
alt: string
aspectRatio: number
blurData?: string
+ blurCompatibilityMode?: boolean
priority?: boolean
}) {
return (
@@ -21,8 +23,9 @@ export default function ImageSmall({
className,
src,
alt,
- priority,
blurDataURL: blurData,
+ 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 5e976775..9b319f50 100644
--- a/src/components/ImageTiny.tsx
+++ b/src/components/ImageTiny.tsx
@@ -7,12 +7,14 @@ export default function ImageTiny({
alt,
aspectRatio,
blurData,
+ blurCompatibilityMode,
}: {
className?: string
src: string
alt: string
aspectRatio: number
blurData?: string
+ blurCompatibilityMode?: boolean
}) {
return (
{
icon?: JSX.Element
@@ -49,34 +50,21 @@ export default function SubmitButtonWithStatus({
}, [onFormStatusChange, pending]);
return (
-
+ {children}
+
);
};
diff --git a/src/components/primitives/LoaderButton.tsx b/src/components/primitives/LoaderButton.tsx
new file mode 100644
index 00000000..1abc4993
--- /dev/null
+++ b/src/components/primitives/LoaderButton.tsx
@@ -0,0 +1,56 @@
+import Spinner, { SpinnerColor } from '@/components/Spinner';
+import { clsx } from 'clsx/lite';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+export default function LoaderButton(props: {
+ children?: ReactNode
+ isLoading?: boolean
+ icon?: JSX.Element
+ spinnerColor?: SpinnerColor
+ styleAsLink?: boolean
+} & ButtonHTMLAttributes) {
+ const {
+ children,
+ isLoading,
+ icon,
+ spinnerColor,
+ styleAsLink,
+ type = 'button',
+ disabled,
+ className,
+ ...rest
+ } = props;
+ return (
+
+ );
+}
diff --git a/src/components/IconPathButton.tsx b/src/components/primitives/PathLoaderButton.tsx
similarity index 68%
rename from src/components/IconPathButton.tsx
rename to src/components/primitives/PathLoaderButton.tsx
index 4108d89d..dc61947a 100644
--- a/src/components/IconPathButton.tsx
+++ b/src/components/primitives/PathLoaderButton.tsx
@@ -1,27 +1,32 @@
'use client';
import { useRouter } from 'next/navigation';
-import IconButton from './IconButton';
-import { useEffect, useState, useTransition } from 'react';
-import { clsx } from 'clsx/lite';
-import { SpinnerColor } from './Spinner';
+import { ReactNode, useEffect, useState, useTransition } from 'react';
+import { SpinnerColor } from '../Spinner';
+import LoaderButton from '@/components/primitives/LoaderButton';
-export default function IconPathButton({
- icon,
+export default function PathLoaderButton({
path,
+ icon,
prefetch,
- loaderDelay = 250,
+ loaderDelay = 100,
shouldScroll = true,
shouldReplace,
spinnerColor,
+ styleAsLink,
+ className,
+ children,
}: {
- icon: JSX.Element
path: string
+ icon?: JSX.Element
prefetch?: boolean
loaderDelay?: number
shouldScroll?: boolean
shouldReplace?: boolean
spinnerColor?: SpinnerColor
+ styleAsLink?: boolean
+ className?: string
+ children?: ReactNode
}) {
const router = useRouter();
@@ -47,8 +52,9 @@ export default function IconPathButton({
}, [prefetch, router, path]);
return (
- startTransition(() => {
if (shouldReplace) {
router.replace(path, { scroll: shouldScroll });
@@ -57,13 +63,10 @@ export default function IconPathButton({
}
})}
isLoading={shouldShowLoader}
- className={clsx(
- 'translate-y-[-0.5px]',
- 'active:translate-y-[1px]',
- 'text-medium',
- 'active:text-gray-600 dark:active:text-gray-300',
- )}
- spinnerColor={spinnerColor ?? 'text'}
- />
+ spinnerColor={spinnerColor}
+ styleAsLink={styleAsLink}
+ >
+ {children}
+
);
}
diff --git a/src/photo/PhotoEditPageClient.tsx b/src/photo/PhotoEditPageClient.tsx
index 218d35a4..77b83492 100644
--- a/src/photo/PhotoEditPageClient.tsx
+++ b/src/photo/PhotoEditPageClient.tsx
@@ -21,10 +21,14 @@ export default function PhotoEditPageClient({
photo,
uniqueTags,
hasAiTextGeneration,
+ imageThumbnailBase64,
+ blurData,
}: {
photo: Photo
uniqueTags: TagsWithMeta
hasAiTextGeneration: boolean
+ imageThumbnailBase64: string
+ blurData: string
}) {
const seedExifData = { url: photo.url };
@@ -48,7 +52,10 @@ export default function PhotoEditPageClient({
hasTextContent,
setHasTextContent,
aiContent,
- } = usePhotoFormParent({ photoForm });
+ } = usePhotoFormParent({
+ photoForm,
+ imageThumbnailBase64,
+ });
return (
- {debugBlur && blurError &&
-
}
{/* Actions */}
diff --git a/src/photo/form/index.ts b/src/photo/form/index.ts
index 5c772333..9b9cf7ab 100644
--- a/src/photo/form/index.ts
+++ b/src/photo/form/index.ts
@@ -15,10 +15,7 @@ import {
MAKE_FUJIFILM,
} from '@/vendors/fujifilm';
import { FilmSimulation } from '@/simulation';
-import {
- BLUR_ENABLED,
- GEO_PRIVACY_ENABLED,
-} from '@/site/config';
+import { GEO_PRIVACY_ENABLED } from '@/site/config';
import { TAG_FAVS, doesTagsStringIncludeFavs } from '@/tag';
type VirtualFields = 'favorite';
@@ -42,7 +39,7 @@ type FormMeta = {
label: string
note?: string
required?: boolean
- virtual?: boolean
+ excludeFromInsert?: boolean
readOnly?: boolean
validate?: (value?: string) => string | undefined
validateStringMaxLength?: number
@@ -94,9 +91,6 @@ const FORM_METADATA = (
blurData: {
label: 'blur data',
readOnly: true,
- required: BLUR_ENABLED,
- hideIfEmpty: !BLUR_ENABLED,
- loadingMessage: 'Generating blur data ...',
},
url: { label: 'url', readOnly: true },
extension: { label: 'extension', readOnly: true },
@@ -121,7 +115,7 @@ const FORM_METADATA = (
takenAt: { label: 'taken at' },
takenAtNaive: { label: 'taken at (naive)' },
priorityOrder: { label: 'priority order' },
- favorite: { label: 'favorite', type: 'checkbox', virtual: true },
+ favorite: { label: 'favorite', type: 'checkbox', excludeFromInsert: true },
hidden: { label: 'hidden', type: 'checkbox' },
});
@@ -242,10 +236,11 @@ export const convertFormDataToPhotoDbInsert = (
// - remove server action ID
// - remove empty strings
Object.keys(photoForm).forEach(key => {
+ const meta = FORM_METADATA()[key as keyof PhotoFormData];
if (
key.startsWith('$ACTION_ID_') ||
(photoForm as any)[key] === '' ||
- FORM_METADATA()[key as keyof PhotoFormData]?.virtual
+ meta?.excludeFromInsert
) {
delete (photoForm as any)[key];
}
diff --git a/src/photo/form/usePhotoFormParent.ts b/src/photo/form/usePhotoFormParent.ts
index bf3fe83a..3ab89b9b 100644
--- a/src/photo/form/usePhotoFormParent.ts
+++ b/src/photo/form/usePhotoFormParent.ts
@@ -6,16 +6,21 @@ import { AiAutoGeneratedField } from '../ai';
export default function usePhotoFormParent({
photoForm,
textFieldsToAutoGenerate,
+ imageThumbnailBase64,
}: {
- photoForm?: Partial
- {blurError}
-
}
-
+ >
+ shouldDebugBlur?: boolean
+ setShouldDebugBlur?: Dispatch>
clearNextPhotoAnimation?: () => void
}
diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx
index ac4ecf5b..57c24a14 100644
--- a/src/state/AppStateProvider.tsx
+++ b/src/state/AppStateProvider.tsx
@@ -29,6 +29,8 @@ export default function AppStateProvider({
const [adminUpdateTimes, setAdminUpdateTimes] = useState([]);
const [shouldShowBaselineGrid, setShouldShowBaselineGrid] =
useState(false);
+ const [shouldDebugBlur, setShouldDebugBlur] =
+ useState(false);
const invalidateSwr = useCallback(() => setSwrTimestamp(Date.now()), []);
@@ -63,6 +65,8 @@ export default function AppStateProvider({
adminUpdateTimes,
registerAdminUpdate,
shouldShowBaselineGrid,
+ shouldDebugBlur,
+ setShouldDebugBlur,
setShouldShowBaselineGrid,
clearNextPhotoAnimation: () => setNextPhotoAnimation?.(undefined),
}}
{isPathAdmin(pathname)
? <>
{userEmail === undefined &&
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index c62075c2..7e6ea602 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -13,7 +13,6 @@ import {
BiPencil,
BiRefresh,
} from 'react-icons/bi';
-import IconButton from '@/components/IconButton';
import InfoBlock from '@/components/InfoBlock';
import Checklist from '@/components/Checklist';
import { toastSuccess } from '@/toast';
@@ -21,6 +20,7 @@ import { ConfigChecklistStatus } from './config';
import StatusIcon from '@/components/StatusIcon';
import { labelForStorage } from '@/services/storage';
import { HiSparkles } from 'react-icons/hi';
+import LoaderButton from '@/components/primitives/LoaderButton';
export default function SiteChecklistClient({
hasDatabase,
@@ -94,13 +94,17 @@ export default function SiteChecklistClient({
;
const renderCopyButton = (label: string, text: string, subtle?: boolean) =>
-
diff --git a/src/site/config.ts b/src/site/config.ts
index b4293231..b1d3da1f 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -137,8 +137,10 @@ export const HIGH_DENSITY_GRID = GRID_ASPECT_RATIO <= 1;
export const CONFIG_CHECKLIST_STATUS = {
hasDatabase: HAS_DATABASE,
isPostgresSSLEnabled: POSTGRES_SSL_ENABLED,
- hasVercelPostgres: /\.vercel-storage\.com\//
- .test(process.env.POSTGRES_URL ?? ''),
+ hasVercelPostgres: (
+ /\/verceldb\?/.test(process.env.POSTGRES_URL ?? '') ||
+ /\.vercel-storage\.com\//.test(process.env.POSTGRES_URL ?? '')
+ ),
hasVercelKV: HAS_VERCEL_KV,
hasVercelBlobStorage: HAS_VERCEL_BLOB_STORAGE,
hasCloudflareR2Storage: HAS_CLOUDFLARE_R2_STORAGE,
diff --git a/src/site/globals.css b/src/site/globals.css
index 5052b267..c4b8cf43 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -77,12 +77,13 @@
cursor-pointer
hover:no-underline
inline-flex gap-2 items-center
- px-4
+ px-3
text-base
shadow-sm
active:bg-gray-100 dark:active:bg-gray-900
hover:border-gray-300 dark:hover:border-gray-600
disabled:cursor-not-allowed
+ disabled:text-dim
disabled:bg-gray-100 dark:disabled:bg-gray-900
disabled:border-gray-200 disabled:dark:border-gray-700
}
@@ -111,7 +112,7 @@
button.link {
@apply
p-0 min-h-0
- border-none bg-transparent active:bg-transparent shadow-none
+ border-none bg-transparent active:bg-transparent shadow-none rounded-none
}
a, .link {
@apply
diff --git a/src/state/AppState.ts b/src/state/AppState.ts
index 94d90b49..83f3ceb4 100644
--- a/src/state/AppState.ts
+++ b/src/state/AppState.ts
@@ -20,6 +20,8 @@ export interface AppStateContext {
registerAdminUpdate?: () => void
shouldShowBaselineGrid?: boolean
setShouldShowBaselineGrid?: Dispatch
{renderCopyButton('Secret', secret)}
-