From feba9e1788060e046e832cae5d9883fda715dcbc Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Mon, 13 May 2024 19:04:01 -0500 Subject: [PATCH 1/4] Fix image grid sizing --- src/components/ImageLarge.tsx | 4 +-- src/components/ImageSmall.tsx | 7 +++-- src/components/ImageTiny.tsx | 7 +++-- ...BlurFallback.tsx => ImageWithFallback.tsx} | 2 +- src/components/ShareButton.tsx | 2 +- src/photo/PhotoGrid.tsx | 27 ++++++++++--------- src/photo/PhotoSmall.tsx | 7 +++-- src/photo/form/PhotoForm.tsx | 4 +-- 8 files changed, 36 insertions(+), 24 deletions(-) rename src/components/{ImageBlurFallback.tsx => ImageWithFallback.tsx} (97%) diff --git a/src/components/ImageLarge.tsx b/src/components/ImageLarge.tsx index cffdcb6c..dded6ac4 100644 --- a/src/components/ImageLarge.tsx +++ b/src/components/ImageLarge.tsx @@ -1,5 +1,5 @@ import { IMAGE_LARGE_WIDTH } from '@/site'; -import ImageBlurFallback from './ImageBlurFallback'; +import ImageWithFallback from './ImageWithFallback'; export default function ImageLarge({ className, @@ -21,7 +21,7 @@ export default function ImageLarge({ priority?: boolean }) { return ( - } + icon={} spinnerColor="dim" prefetch={prefetch} shouldScroll={shouldScroll} diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx index 118c2c8e..390fa3b7 100644 --- a/src/photo/PhotoGrid.tsx +++ b/src/photo/PhotoGrid.tsx @@ -57,7 +57,7 @@ export default function PhotoGrid({
- +
).concat(additionalTile ?? [])} itemKeys={photos.map(photo => photo.id) .concat(additionalTile ? ['more'] : [])} diff --git a/src/photo/PhotoSmall.tsx b/src/photo/PhotoSmall.tsx index a379d2cc..da2a47c0 100644 --- a/src/photo/PhotoSmall.tsx +++ b/src/photo/PhotoSmall.tsx @@ -19,6 +19,7 @@ export default function PhotoSmall({ selected, priority, prefetch = SHOULD_PREFETCH_ALL_LINKS, + className, onVisible, }: { photo: Photo @@ -28,6 +29,7 @@ export default function PhotoSmall({ selected?: boolean priority?: boolean prefetch?: boolean + className?: string onVisible?: () => void }) { const ref = useRef(null); @@ -39,9 +41,9 @@ export default function PhotoSmall({ ref={ref} href={pathForPhoto(photo, tag, camera, simulation)} className={clsx( - 'flex w-full h-full', 'active:brightness-75', selected && 'brightness-50', + className, )} prefetch={prefetch} > @@ -50,7 +52,8 @@ export default function PhotoSmall({ aspectRatio={photo.aspectRatio} blurData={photo.blurData} blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)} - className="w-full" + className="flex object-cover w-full h-full" + imgClassName="object-cover w-full h-full" alt={altTextForPhoto(photo)} priority={priority} /> diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx index 257c90ac..0ae09d51 100644 --- a/src/photo/form/PhotoForm.tsx +++ b/src/photo/form/PhotoForm.tsx @@ -18,7 +18,7 @@ import { clsx } from 'clsx/lite'; 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 ImageWithFallback from '@/components/ImageWithFallback'; import { TagsWithMeta, sortTagsObjectWithoutFavs } from '@/tag'; import { formatCount, formatCountDescriptive } from '@/utility/string'; import { AiContent } from '../ai/useAiImageQueries'; @@ -234,7 +234,7 @@ export default function PhotoForm({
- Date: Mon, 13 May 2024 19:40:46 -0500 Subject: [PATCH 2/4] Refactor image components --- src/admin/AdminPhotosTable.tsx | 4 +-- src/admin/AdminUploadsTable.tsx | 4 +-- src/components/CommandKClient.tsx | 16 +++++---- src/components/ImageLarge.tsx | 36 ------------------- src/components/ImageSmall.tsx | 36 ------------------- src/components/ImageTiny.tsx | 33 ----------------- src/components/image/ImageLarge.tsx | 18 ++++++++++ src/components/image/ImageMedium.tsx | 18 ++++++++++ src/components/image/ImageSmall.tsx | 18 ++++++++++ .../{ => image}/ImageWithFallback.tsx | 20 ++++++----- src/components/image/index.ts | 17 +++++++++ src/photo/PhotoGrid.tsx | 4 +-- src/photo/PhotoLarge.tsx | 4 +-- src/photo/{PhotoTiny.tsx => PhotoMedium.tsx} | 32 +++++++++++------ src/photo/PhotoSmall.tsx | 28 +++++---------- src/photo/form/PhotoForm.tsx | 16 +++++---- src/site/index.ts | 8 ----- src/state/AppState.ts | 4 +-- src/state/AppStateProvider.tsx | 8 ++--- 19 files changed, 144 insertions(+), 180 deletions(-) delete mode 100644 src/components/ImageLarge.tsx delete mode 100644 src/components/ImageSmall.tsx delete mode 100644 src/components/ImageTiny.tsx create mode 100644 src/components/image/ImageLarge.tsx create mode 100644 src/components/image/ImageMedium.tsx create mode 100644 src/components/image/ImageSmall.tsx rename src/components/{ => image}/ImageWithFallback.tsx (84%) create mode 100644 src/components/image/index.ts rename src/photo/{PhotoTiny.tsx => PhotoMedium.tsx} (65%) delete mode 100644 src/site/index.ts diff --git a/src/admin/AdminPhotosTable.tsx b/src/admin/AdminPhotosTable.tsx index 5073ddbe..34dcf7de 100644 --- a/src/admin/AdminPhotosTable.tsx +++ b/src/admin/AdminPhotosTable.tsx @@ -3,7 +3,7 @@ import { Photo, deleteConfirmationTextForPhoto, titleForPhoto } from '@/photo'; import AdminTable from './AdminTable'; import { Fragment } from 'react'; -import PhotoTiny from '@/photo/PhotoTiny'; +import PhotoSmall from '@/photo/PhotoSmall'; import { clsx } from 'clsx/lite'; import { pathForAdminPhotoEdit, pathForPhoto } from '@/site/paths'; import Link from 'next/link'; @@ -36,7 +36,7 @@ export default function AdminPhotosTable({ {photos.map((photo, index) => - - , - accessory: , + accessory: , path: pathForPhoto(photo), })), }] @@ -228,9 +228,11 @@ export default function CommandKClient({ action: () => setArePhotosMatted?.(prev => !prev), annotation: arePhotosMatted ? : undefined, }, { - label: 'Toggle Blur Debug', - action: () => setShouldDebugBlur?.(prev => !prev), - annotation: shouldDebugBlur ? : undefined, + label: 'Toggle Image Fallback', + action: () => setShouldDebugImageFallbacks?.(prev => !prev), + annotation: shouldDebugImageFallbacks + ? + : undefined, }, { label: 'Toggle Baseline Grid', action: () => setShouldShowBaselineGrid?.(prev => !prev), diff --git a/src/components/ImageLarge.tsx b/src/components/ImageLarge.tsx deleted file mode 100644 index dded6ac4..00000000 --- a/src/components/ImageLarge.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { IMAGE_LARGE_WIDTH } from '@/site'; -import ImageWithFallback from './ImageWithFallback'; - -export default function ImageLarge({ - className, - imgClassName, - src, - alt, - aspectRatio, - blurData, - blurCompatibilityMode, - priority, -}: { - className?: string - imgClassName?: string - src: string - alt: string - aspectRatio: number - blurData?: string - blurCompatibilityMode?: boolean - priority?: boolean -}) { - return ( - - ); -}; diff --git a/src/components/ImageSmall.tsx b/src/components/ImageSmall.tsx deleted file mode 100644 index dd0e4d1d..00000000 --- a/src/components/ImageSmall.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { IMAGE_SMALL_WIDTH } from '@/site'; -import ImageWithFallback from './ImageWithFallback'; - -export default function ImageSmall({ - className, - imgClassName, - src, - alt, - aspectRatio, - blurData, - blurCompatibilityMode, - priority, -}: { - className?: string - imgClassName?: string - src: string - alt: string - aspectRatio: number - blurData?: string - blurCompatibilityMode?: boolean - priority?: boolean -}) { - return ( - - ); -}; diff --git a/src/components/ImageTiny.tsx b/src/components/ImageTiny.tsx deleted file mode 100644 index 9c862a2c..00000000 --- a/src/components/ImageTiny.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { IMAGE_TINY_WIDTH } from '@/site'; -import ImageWithFallback from './ImageWithFallback'; - -export default function ImageTiny({ - className, - imgClassName, - src, - alt, - aspectRatio, - blurData, - blurCompatibilityMode, -}: { - className?: string - imgClassName?: string - src: string - alt: string - aspectRatio: number - blurData?: string - blurCompatibilityMode?: boolean -}) { - return ( - - ); -}; diff --git a/src/components/image/ImageLarge.tsx b/src/components/image/ImageLarge.tsx new file mode 100644 index 00000000..18569d92 --- /dev/null +++ b/src/components/image/ImageLarge.tsx @@ -0,0 +1,18 @@ +import { IMAGE_WIDTH_LARGE, ImageProps } from '.'; +import ImageWithFallback from './ImageWithFallback'; + +export default function ImageLarge(props: ImageProps) { + const { + aspectRatio, + blurCompatibilityMode, + ...rest + } = props; + return ( + + ); +}; diff --git a/src/components/image/ImageMedium.tsx b/src/components/image/ImageMedium.tsx new file mode 100644 index 00000000..8d3b7322 --- /dev/null +++ b/src/components/image/ImageMedium.tsx @@ -0,0 +1,18 @@ +import { IMAGE_WIDTH_MEDIUM, ImageProps } from '.'; +import ImageWithFallback from './ImageWithFallback'; + +export default function ImageMedium(props: ImageProps) { + const { + aspectRatio, + blurCompatibilityMode, + ...rest + } = props; + return ( + + ); +}; diff --git a/src/components/image/ImageSmall.tsx b/src/components/image/ImageSmall.tsx new file mode 100644 index 00000000..5878014f --- /dev/null +++ b/src/components/image/ImageSmall.tsx @@ -0,0 +1,18 @@ +import { IMAGE_WIDTH_SMALL, ImageProps } from '.'; +import ImageWithFallback from './ImageWithFallback'; + +export default function ImageSmall(props: ImageProps) { + const { + aspectRatio, + blurCompatibilityMode, + ...rest + } = props; + return ( + + ); +}; diff --git a/src/components/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx similarity index 84% rename from src/components/ImageWithFallback.tsx rename to src/components/image/ImageWithFallback.tsx index 93b4dda1..23457add 100644 --- a/src/components/ImageWithFallback.tsx +++ b/src/components/image/ImageWithFallback.tsx @@ -20,7 +20,7 @@ export default function ImageWithFallback(props: ImageProps & { ...rest } = props; - const { shouldDebugBlur } = useAppState(); + const { shouldDebugImageFallbacks } = useAppState(); const [wasCached, setWasCached] = useState(true); const [isLoading, setIsLoading] = useState(true); @@ -29,7 +29,7 @@ export default function ImageWithFallback(props: ImageProps & { const onLoad = useCallback(() => setIsLoading(false), []); const onError = useCallback(() => setDidError(true), []); - const [hideBlurPlaceholder, setHideBlurPlaceholder] = useState(false); + const [hideFallback, setHideFallback] = useState(false); const imgRef = useRef(null); @@ -44,15 +44,15 @@ export default function ImageWithFallback(props: ImageProps & { useEffect(() => { if (!isLoading && !didError) { const timeout = setTimeout(() => { - setHideBlurPlaceholder(true); + setHideFallback(true); }, 1000); return () => clearTimeout(timeout); } }, [isLoading, didError]); - const showPlaceholder = + const showFallback = !wasCached && - !hideBlurPlaceholder; + !hideFallback; const getBlurClass = () => { switch (blurCompatibilityLevel) { @@ -71,16 +71,18 @@ export default function ImageWithFallback(props: ImageProps & { 'flex relative', )} > - {(showPlaceholder || shouldDebugBlur) && + {(showFallback || shouldDebugImageFallbacks) &&
- {(BLUR_ENABLED && props.blurDataURL) + {(BLUR_ENABLED && blurDataURL) ? - diff --git a/src/photo/PhotoTiny.tsx b/src/photo/PhotoMedium.tsx similarity index 65% rename from src/photo/PhotoTiny.tsx rename to src/photo/PhotoMedium.tsx index 797d8ccb..44956c1e 100644 --- a/src/photo/PhotoTiny.tsx +++ b/src/photo/PhotoMedium.tsx @@ -1,25 +1,35 @@ +'use client'; + import { Photo, altTextForPhoto, doesPhotoNeedBlurCompatibility } from '.'; -import ImageTiny from '@/components/ImageTiny'; +import ImageMedium from '@/components/image/ImageMedium'; import Link from 'next/link'; import { clsx } from 'clsx/lite'; import { pathForPhoto } from '@/site/paths'; +import { Camera } from '@/camera'; +import { FilmSimulation } from '@/simulation'; import { SHOULD_PREFETCH_ALL_LINKS } from '@/site/config'; import { useRef } from 'react'; import useOnVisible from '@/utility/useOnVisible'; -export default function PhotoTiny({ +export default function PhotoMedium({ photo, tag, + camera, + simulation, selected, - className, + priority, prefetch = SHOULD_PREFETCH_ALL_LINKS, + className, onVisible, }: { photo: Photo tag?: string + camera?: Camera + simulation?: FilmSimulation selected?: boolean - className?: string + priority?: boolean prefetch?: boolean + className?: string onVisible?: () => void }) { const ref = useRef(null); @@ -29,23 +39,23 @@ export default function PhotoTiny({ return ( - ); diff --git a/src/photo/PhotoSmall.tsx b/src/photo/PhotoSmall.tsx index da2a47c0..0bb32862 100644 --- a/src/photo/PhotoSmall.tsx +++ b/src/photo/PhotoSmall.tsx @@ -1,12 +1,8 @@ -'use client'; - import { Photo, altTextForPhoto, doesPhotoNeedBlurCompatibility } from '.'; -import ImageSmall from '@/components/ImageSmall'; +import ImageSmall from '@/components/image/ImageSmall'; import Link from 'next/link'; import { clsx } from 'clsx/lite'; import { pathForPhoto } from '@/site/paths'; -import { Camera } from '@/camera'; -import { FilmSimulation } from '@/simulation'; import { SHOULD_PREFETCH_ALL_LINKS } from '@/site/config'; import { useRef } from 'react'; import useOnVisible from '@/utility/useOnVisible'; @@ -14,22 +10,16 @@ import useOnVisible from '@/utility/useOnVisible'; export default function PhotoSmall({ photo, tag, - camera, - simulation, selected, - priority, - prefetch = SHOULD_PREFETCH_ALL_LINKS, className, + prefetch = SHOULD_PREFETCH_ALL_LINKS, onVisible, }: { photo: Photo tag?: string - camera?: Camera - simulation?: FilmSimulation selected?: boolean - priority?: boolean - prefetch?: boolean className?: string + prefetch?: boolean onVisible?: () => void }) { const ref = useRef(null); @@ -39,23 +29,23 @@ export default function PhotoSmall({ return ( ); diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx index 0ae09d51..af82e858 100644 --- a/src/photo/form/PhotoForm.tsx +++ b/src/photo/form/PhotoForm.tsx @@ -18,7 +18,7 @@ import { clsx } from 'clsx/lite'; import { PATH_ADMIN_PHOTOS, PATH_ADMIN_UPLOADS } from '@/site/paths'; import { toastSuccess, toastWarning } from '@/toast'; import { getDimensionsFromSize } from '@/utility/size'; -import ImageWithFallback from '@/components/ImageWithFallback'; +import ImageWithFallback from '@/components/image/ImageWithFallback'; import { TagsWithMeta, sortTagsObjectWithoutFavs } from '@/tag'; import { formatCount, formatCountDescriptive } from '@/utility/string'; import { AiContent } from '../ai/useAiImageQueries'; @@ -59,7 +59,7 @@ export default function PhotoForm({ const [formErrors, setFormErrors] = useState(getFormErrors(initialPhotoForm)); - const { invalidateSwr, shouldDebugBlur } = useAppState(); + const { invalidateSwr, shouldDebugImageFallbacks } = useAppState(); const changedFormKeys = useMemo(() => getChangedFormFields(initialPhotoForm, formData), @@ -199,7 +199,7 @@ export default function PhotoForm({ shouldConfirm={Boolean(formData.semanticDescription)} />; case 'blurData': - return shouldDebugBlur && type === 'edit' && formData.url + return shouldDebugImageFallbacks && type === 'edit' && formData.url ? @@ -219,7 +219,7 @@ export default function PhotoForm({ key === 'blurData' && type === 'create' && !BLUR_ENABLED && - !shouldDebugBlur + !shouldDebugImageFallbacks ) { return true; } else { @@ -307,9 +307,11 @@ export default function PhotoForm({ > - shouldDebugBlur?: boolean - setShouldDebugBlur?: Dispatch> + shouldDebugImageFallbacks?: boolean + setShouldDebugImageFallbacks?: Dispatch> shouldShowBaselineGrid?: boolean setShouldShowBaselineGrid?: Dispatch> } diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx index e6bafb2e..49bfcdb8 100644 --- a/src/state/AppStateProvider.tsx +++ b/src/state/AppStateProvider.tsx @@ -37,7 +37,7 @@ export default function AppStateProvider({ // DEBUG const [arePhotosMatted, setArePhotosMatted] = useState(MATTE_PHOTOS); - const [shouldDebugBlur, setShouldDebugBlur] = + const [shouldDebugImageFallbacks, setShouldDebugImageFallbacks] = useState(false); const [shouldShowBaselineGrid, setShouldShowBaselineGrid] = useState(false); @@ -96,10 +96,10 @@ export default function AppStateProvider({ // DEBUG arePhotosMatted, setArePhotosMatted, - setShouldDebugBlur, - setShouldShowBaselineGrid, + shouldDebugImageFallbacks, + setShouldDebugImageFallbacks, shouldShowBaselineGrid, - shouldDebugBlur, + setShouldShowBaselineGrid, }} > {children} From 42a23d1863037f57d50f8d3ab2bb340131153b14 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Mon, 13 May 2024 20:10:06 -0500 Subject: [PATCH 3/4] Fix blurDataURL capitalization --- src/components/image/index.ts | 2 +- src/photo/PhotoLarge.tsx | 2 +- src/photo/PhotoMedium.tsx | 2 +- src/photo/PhotoSmall.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/image/index.ts b/src/components/image/index.ts index 3dbb01b9..eb7d6582 100644 --- a/src/components/image/index.ts +++ b/src/components/image/index.ts @@ -12,6 +12,6 @@ export interface ImageProps { imgClassName?: string src: string alt: string - blurDataUrl?: string + blurDataURL?: string priority?: boolean } diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index 4c73b81e..92862170 100644 --- a/src/photo/PhotoLarge.tsx +++ b/src/photo/PhotoLarge.tsx @@ -96,7 +96,7 @@ export default function PhotoLarge({ alt={altTextForPhoto(photo)} src={photo.url} aspectRatio={photo.aspectRatio} - blurDataUrl={photo.blurData} + blurDataURL={photo.blurData} blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)} priority={priority} /> diff --git a/src/photo/PhotoMedium.tsx b/src/photo/PhotoMedium.tsx index 44956c1e..ec666919 100644 --- a/src/photo/PhotoMedium.tsx +++ b/src/photo/PhotoMedium.tsx @@ -50,7 +50,7 @@ export default function PhotoMedium({ From 9cd9d751bdb5e5f50e32a6c7f5cbe92c604458b0 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Mon, 13 May 2024 20:16:12 -0500 Subject: [PATCH 4/4] Update cmd-k fallback text --- src/components/CommandKClient.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CommandKClient.tsx b/src/components/CommandKClient.tsx index 47eaa891..4f5af280 100644 --- a/src/components/CommandKClient.tsx +++ b/src/components/CommandKClient.tsx @@ -228,7 +228,7 @@ export default function CommandKClient({ action: () => setArePhotosMatted?.(prev => !prev), annotation: arePhotosMatted ? : undefined, }, { - label: 'Toggle Image Fallback', + label: 'Toggle Image Fallbacks', action: () => setShouldDebugImageFallbacks?.(prev => !prev), annotation: shouldDebugImageFallbacks ?