Improve layout of image galleries

.changeset/fresh-starfishes-scream.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Improve layout of image galleries

package.json

@@ -34,6 +34,7 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.45.4",
+    "react-photo-album": "^2.3.0",
     "react-qr-barcode-scanner": "^1.0.6",
     "react-router-dom": "^6.15.0",
     "react-singleton-hook": "^4.0.1",

src/components/embed-types/common.tsx

@@ -1,157 +1,7 @@
-import { useRef } from "react";
-import { Box, Image, ImageProps, Link, LinkProps, SimpleGrid, useDisclosure } from "@chakra-ui/react";
+import { Link } from "@chakra-ui/react";
 
-import appSettings from "../../services/settings/app-settings";
-import { useTrusted } from "../../providers/trust";
 import OpenGraphCard from "../open-graph-card";
-import { EmbedableContent, defaultGetLocation } from "../../helpers/embeds";
-import { getMatchLink } from "../../helpers/regexp";
-import { useRegisterSlide } from "../lightbox-provider";
-import { isImageURL, isVideoURL } from "../../helpers/url";
-
-export const ImageGalleryLink = ({ children, href, ...props }: Omit<LinkProps, "onClick">) => {
-  const ref = useRef<HTMLAnchorElement | null>(null);
-  const { show } = useRegisterSlide(ref, href ? { type: "image", src: href } : undefined);
-
-  return (
-    <Link
-      {...props}
-      href={href}
-      onClick={(e) => {
-        if (href) {
-          e.preventDefault();
-          show();
-        }
-      }}
-      ref={ref}
-    >
-      {children}
-    </Link>
-  );
-};
-
-const BlurredImage = (props: ImageProps) => {
-  const { isOpen, onOpen } = useDisclosure();
-  return (
-    <Box overflow="hidden">
-      <Image
-        onClick={
-          !isOpen
-            ? (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                onOpen();
-              }
-            : undefined
-        }
-        cursor="pointer"
-        filter={isOpen ? "" : "blur(1.5rem)"}
-        {...props}
-      />
-    </Box>
-  );
-};
-
-const EmbeddedImage = ({ src, inGallery }: { src: string; inGallery?: boolean }) => {
-  const trusted = useTrusted();
-  const ImageComponent = trusted || !appSettings.value.blurImages ? Image : BlurredImage;
-  const thumbnail = appSettings.value.imageProxy
-    ? new URL(`/256,fit/${src}`, appSettings.value.imageProxy).toString()
-    : src;
-
-  if (inGallery) {
-    return (
-      <ImageGalleryLink href={src} target="_blank">
-        <ImageComponent src={thumbnail} cursor="pointer" />
-      </ImageGalleryLink>
-    );
-  }
-
-  return (
-    <ImageGalleryLink href={src} target="_blank" display="block" mx="-2">
-      <ImageComponent src={thumbnail} cursor="pointer" maxH={["initial", "35vh"]} mx={["auto", 0]} />
-    </ImageGalleryLink>
-  );
-};
-
-function ImageGallery({ images }: { images: string[] }) {
-  return (
-    <SimpleGrid columns={[2, 2, 3, 3, 4]}>
-      {images.map((src) => (
-        <EmbeddedImage key={src} src={src} inGallery />
-      ))}
-    </SimpleGrid>
-  );
-}
-
-// nevent1qqs8397rp8tt60f3lm8zldt8uqljuqw9axp8z79w0qsmj3r96lmg4tgpz3mhxue69uhhyetvv9ujuerpd46hxtnfduq3zamnwvaz7tmwdaehgun4v5hxxmmd0mkwa9
-export function embedImageGallery(content: EmbedableContent): EmbedableContent {
-  return content
-    .map((subContent, i) => {
-      if (typeof subContent === "string") {
-        const matches = Array.from(subContent.matchAll(getMatchLink()));
-
-        const newContent: EmbedableContent = [];
-        let lastBatchEnd = 0;
-        let batch: RegExpMatchArray[] = [];
-
-        const renderBatch = () => {
-          if (batch.length > 1) {
-            // render previous batch
-            const lastMatchPosition = defaultGetLocation(batch[batch.length - 1]);
-            const before = subContent.substring(lastBatchEnd, defaultGetLocation(batch[0]).start);
-            const render = <ImageGallery images={batch.map((m) => m[0])} />;
-
-            newContent.push(before, render);
-            lastBatchEnd = lastMatchPosition.end;
-          }
-
-          batch = [];
-        };
-
-        for (const match of matches) {
-          try {
-            const url = new URL(match[0]);
-            if (!isImageURL(url)) throw new Error("not an image");
-
-            // if this is the first image, add it to the batch
-            if (batch.length === 0) {
-              batch = [match];
-              continue;
-            }
-
-            const last = defaultGetLocation(batch[batch.length - 1]);
-            const position = defaultGetLocation(match);
-            const space = subContent.substring(last.end, position.start).trim();
-
-            // if there was a non-space between this and the last batch
-            if (space.length > 0) renderBatch();
-
-            batch.push(match);
-          } catch (e) {
-            // start a new batch without current match
-            batch = [];
-          }
-        }
-
-        renderBatch();
-
-        newContent.push(subContent.substring(lastBatchEnd));
-
-        return newContent;
-      }
-
-      return subContent;
-    })
-    .flat();
-}
-
-// nostr:nevent1qqsfhafvv705g5wt8rcaytkj6shsshw3dwgamgfe3za8knk0uq4yesgpzpmhxue69uhkummnw3ezuamfdejszrthwden5te0dehhxtnvdakqsrnltk
-export function renderImageUrl(match: URL) {
-  if (!isImageURL(match)) return null;
-
-  return <EmbeddedImage src={match.toString()} />;
-}
+import { isVideoURL } from "../../helpers/url";
 
 export function renderVideoUrl(match: URL) {
   if (!isVideoURL(match)) return null;

src/components/embed-types/image.tsx

@@ -0,0 +1,158 @@
+import {
+  CSSProperties,
+  MouseEventHandler,
+  MutableRefObject,
+  forwardRef,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Image, ImageProps, useBreakpointValue } from "@chakra-ui/react";
+
+import appSettings from "../../services/settings/app-settings";
+import { useTrusted } from "../../providers/trust";
+import { EmbedableContent, defaultGetLocation } from "../../helpers/embeds";
+import { getMatchLink } from "../../helpers/regexp";
+import { useRegisterSlide } from "../lightbox-provider";
+import { isImageURL } from "../../helpers/url";
+import PhotoGallery, { PhotoWithoutSize } from "../photo-gallery";
+
+function useElementBlur(initBlur = false): { style: CSSProperties; onClick: MouseEventHandler } {
+  const [blur, setBlur] = useState(initBlur);
+
+  const onClick = useCallback<MouseEventHandler>(
+    (e) => {
+      if (blur) {
+        e.stopPropagation();
+        e.preventDefault();
+        setBlur(false);
+      }
+    },
+    [blur],
+  );
+
+  const style: CSSProperties = blur ? { filter: "blur(1.5rem)", cursor: "pointer" } : {};
+
+  return { onClick, style };
+}
+
+export const TrustImage = forwardRef<HTMLImageElement, ImageProps>((props, ref) => {
+  const trusted = useTrusted();
+  const { onClick, style } = useElementBlur(!trusted);
+
+  const handleClick = useCallback<MouseEventHandler<HTMLImageElement>>(
+    (e) => {
+      onClick(e);
+      if (props.onClick && !e.isPropagationStopped()) {
+        props.onClick(e);
+      }
+    },
+    [onClick, props.onClick],
+  );
+
+  return <Image {...props} onClick={handleClick} style={{ ...style, ...props.style }} ref={ref} />;
+});
+
+export const EmbeddedImage = forwardRef<HTMLImageElement, ImageProps>(({ src, ...props }, ref) => {
+  const thumbnail = appSettings.value.imageProxy
+    ? new URL(`/256,fit/${src}`, appSettings.value.imageProxy).toString()
+    : src;
+
+  ref = ref || useRef<HTMLImageElement | null>(null);
+  const { show } = useRegisterSlide(
+    ref as MutableRefObject<HTMLImageElement | null>,
+    src ? { type: "image", src } : undefined,
+  );
+
+  return <TrustImage {...props} src={thumbnail} cursor="pointer" ref={ref} onClick={show} />;
+});
+
+export function ImageGallery({ images }: { images: string[] }) {
+  const photos = useMemo(() => {
+    return images.map((img) => {
+      const photo: PhotoWithoutSize = { src: img };
+      return photo;
+    });
+  }, [images]);
+
+  const rowMultiplier = useBreakpointValue({ base: 1.5, sm: 2, md: 3, lg: 4, xl: 5 }) ?? 4;
+
+  return (
+    <PhotoGallery
+      layout="rows"
+      photos={photos}
+      renderPhoto={({ photo, imageProps, wrapperStyle }) => <EmbeddedImage {...imageProps} />}
+      targetRowHeight={(containerWidth) => containerWidth / rowMultiplier}
+    />
+  );
+}
+
+// nevent1qqs8397rp8tt60f3lm8zldt8uqljuqw9axp8z79w0qsmj3r96lmg4tgpz3mhxue69uhhyetvv9ujuerpd46hxtnfduq3zamnwvaz7tmwdaehgun4v5hxxmmd0mkwa9
+export function embedImageGallery(content: EmbedableContent): EmbedableContent {
+  return content
+    .map((subContent, i) => {
+      if (typeof subContent === "string") {
+        const matches = Array.from(subContent.matchAll(getMatchLink()));
+
+        const newContent: EmbedableContent = [];
+        let lastBatchEnd = 0;
+        let batch: RegExpMatchArray[] = [];
+
+        const renderBatch = () => {
+          if (batch.length > 1) {
+            // render previous batch
+            const lastMatchPosition = defaultGetLocation(batch[batch.length - 1]);
+            const before = subContent.substring(lastBatchEnd, defaultGetLocation(batch[0]).start);
+            const render = <ImageGallery images={batch.map((m) => m[0])} />;
+
+            newContent.push(before, render);
+            lastBatchEnd = lastMatchPosition.end;
+          }
+
+          batch = [];
+        };
+
+        for (const match of matches) {
+          try {
+            const url = new URL(match[0]);
+            if (!isImageURL(url)) throw new Error("not an image");
+
+            // if this is the first image, add it to the batch
+            if (batch.length === 0) {
+              batch = [match];
+              continue;
+            }
+
+            const last = defaultGetLocation(batch[batch.length - 1]);
+            const position = defaultGetLocation(match);
+            const space = subContent.substring(last.end, position.start).trim();
+
+            // if there was a non-space between this and the last batch
+            if (space.length > 0) renderBatch();
+
+            batch.push(match);
+          } catch (e) {
+            // start a new batch without current match
+            batch = [];
+          }
+        }
+
+        renderBatch();
+
+        newContent.push(subContent.substring(lastBatchEnd));
+
+        return newContent;
+      }
+
+      return subContent;
+    })
+    .flat();
+}
+
+// nostr:nevent1qqsfhafvv705g5wt8rcaytkj6shsshw3dwgamgfe3za8knk0uq4yesgpzpmhxue69uhkummnw3ezuamfdejszrthwden5te0dehhxtnvdakqsrnltk
+export function renderImageUrl(match: URL) {
+  if (!isImageURL(match)) return null;
+
+  return <EmbeddedImage src={match.toString()} maxH={["initial", "35vh"]} />;
+}

src/components/embed-types/index.ts

@@ -5,3 +5,4 @@ export * from "./common";
 export * from "./youtube";
 export * from "./nostr";
 export * from "./emoji";
+export * from "./image";

src/components/photo-gallery.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useMemo, useState } from "react";
+import { Photo, PhotoAlbum, PhotoAlbumProps } from "react-photo-album";
+
+type Size = { width: number; height: number };
+const imageSizeCache = new Map<string, Size>();
+function getImageSize(src: string): Promise<{ width: number; height: number }> {
+  const cached = imageSizeCache.get(src);
+  if (cached) return Promise.resolve(cached);
+
+  return new Promise((res, rej) => {
+    const image = new Image();
+    image.src = src;
+
+    image.onload = () => {
+      const size = { width: image.width, height: image.height };
+      imageSizeCache.set(src, size);
+      res(size);
+    };
+    image.onerror = (err) => rej(err);
+  });
+}
+
+export type PhotoWithoutSize = Omit<Photo, "width" | "height"> & { width?: number; height?: number };
+
+export default function PhotoGallery<T extends PhotoWithoutSize>({
+  photos,
+  ...props
+}: Omit<PhotoAlbumProps<T & Size>, "photos"> & { photos: PhotoWithoutSize[] }) {
+  const [loadedSizes, setLoadedSizes] = useState<Record<string, Size>>({});
+
+  useEffect(() => {
+    for (const photo of photos) {
+      getImageSize(photo.src).then(
+        (size) => {
+          setLoadedSizes((dir) => ({ ...dir, [photo.src]: size }));
+        },
+        () => {},
+      );
+    }
+  }, [photos]);
+
+  const loadedPhotos = useMemo(() => {
+    const loaded: (T & Size)[] = [];
+
+    for (const photo of photos) {
+      if (photo.width && photo.height) {
+        loaded.push(photo as T & Size);
+        continue;
+      }
+
+      const loadedImage = loadedSizes[photo.src];
+      if (loadedImage) {
+        loaded.push({ ...photo, width: loadedImage.width, height: loadedImage.height } as T & Size);
+        continue;
+      }
+    }
+
+    return loaded;
+  }, [loadedSizes, photos]);
+
+  return <PhotoAlbum<T & Size> photos={loadedPhotos} {...props} />;
+}

src/components/timeline-page/index.tsx

@@ -43,13 +43,7 @@ export default function TimelinePage({
         return <GenericNoteTimeline timeline={timeline} />;
 
       case "images":
-        return (
-          <LightboxProvider>
-            <SimpleGrid columns={[1, 2, 2, 3, 4, 5]} gap="4">
-              <MediaTimeline timeline={timeline} />
-            </SimpleGrid>
-          </LightboxProvider>
-        );
+        return <MediaTimeline timeline={timeline} />;
 
       case "health":
         return <TimelineHealth timeline={timeline} />;

src/components/timeline-page/media-timeline/index.tsx

@@ -1,61 +1,37 @@
-import React, { useMemo, useRef } from "react";
-import { Box, IconButton, Link } from "@chakra-ui/react";
-import { useNavigate } from "react-router-dom";
+import { useMemo, useRef } from "react";
+import { ImageProps, useBreakpointValue } from "@chakra-ui/react";
 
 import { TimelineLoader } from "../../../classes/timeline-loader";
 import useSubject from "../../../hooks/use-subject";
 import { getMatchLink } from "../../../helpers/regexp";
-import { LightboxProvider, useRegisterSlide } from "../../lightbox-provider";
-import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
-import { getSharableNoteId } from "../../../helpers/nip19";
-import { ExternalLinkIcon } from "../../icons";
+import { LightboxProvider } from "../../lightbox-provider";
 import { isImageURL } from "../../../helpers/url";
+import { EmbeddedImage } from "../../embed-types";
+import { TrustProvider } from "../../../providers/trust";
+import PhotoGallery, { PhotoWithoutSize } from "../../photo-gallery";
+import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
+import { Photo } from "react-photo-album";
 
-type ImagePreview = { eventId: string; src: string; index: number };
+function GalleryImage({ eventId, ...props }: ImageProps & { eventId: string }) {
+  const ref = useRef<HTMLImageElement | null>(null);
+  useRegisterIntersectionEntity(ref, eventId);
 
-const ImagePreview = React.memo(({ image }: { image: ImagePreview }) => {
-  const navigate = useNavigate();
+  return <EmbeddedImage {...props} ref={ref} />;
+}
 
-  const ref = useRef<HTMLDivElement | null>(null);
-  useRegisterIntersectionEntity(ref, image.eventId);
-
-  const { show } = useRegisterSlide(ref, { type: "image", src: image.src });
+type PhotoWithEventId = PhotoWithoutSize & { eventId: string };
+function ImageGallery({ images }: { images: PhotoWithEventId[] }) {
+  const rowMultiplier = useBreakpointValue({ base: 2, sm: 3, md: 3, lg: 4, xl: 5 }) ?? 2;
 
   return (
-    <Link
-      href={image.src}
-      position="relative"
-      onClick={(e) => {
-        if (image.src) {
-          e.preventDefault();
-          show();
-        }
-      }}
-    >
-      <Box
-        aspectRatio={1}
-        backgroundImage={`url(${image.src})`}
-        backgroundSize="cover"
-        backgroundPosition="center"
-        ref={ref}
-      />
-      <IconButton
-        icon={<ExternalLinkIcon />}
-        aria-label="Open note"
-        position="absolute"
-        right="2"
-        top="2"
-        size="sm"
-        colorScheme="brand"
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          navigate(`/n/${getSharableNoteId(image.eventId)}`);
-        }}
-      />
-    </Link>
+    <PhotoGallery<Photo & { eventId: string }>
+      layout="masonry"
+      photos={images}
+      renderPhoto={({ photo, imageProps }) => <GalleryImage eventId={photo.eventId} {...imageProps} />}
+      columns={rowMultiplier}
+    />
   );
-});
+}
 
 export default function MediaTimeline({ timeline }: { timeline: TimelineLoader }) {
   const events = useSubject(timeline.timeline);
@@ -77,9 +53,9 @@ export default function MediaTimeline({ timeline }: { timeline: TimelineLoader }
 
   return (
     <LightboxProvider>
-      {images.map((image) => (
-        <ImagePreview key={image.eventId + "-" + image.index} image={image} />
-      ))}
+      <TrustProvider trust>
+        <ImageGallery images={images} />
+      </TrustProvider>
     </LightboxProvider>
   );
 }

src/helpers/embeds.ts

@@ -30,7 +30,6 @@ export function embedJSX(content: EmbedableContent, embed: EmbedType): Embedable
           for (const match of matches) {
             if (match.index !== undefined) {
               const { start, end } = (embed.getLocation || defaultGetLocation)(match);
-              if (start === 0 && match[0].includes("#")) debugger;
 
               if (start < cursor) continue;
 

yarn.lock

@@ -2678,23 +2678,14 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/react-dom@^18.2.6", "@types/react-dom@^18.2.7":
+"@types/react-dom@^18.2.7":
   version "18.2.7"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63"
   integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.35", "@types/react@^18.2.14":
-  version "18.2.15"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.15.tgz#14792b35df676c20ec3cf595b262f8c615a73066"
-  integrity sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^18.2.20":
+"@types/react@*", "@types/react@^16.9.35", "@types/react@^18.2.20":
   version "18.2.20"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.20.tgz#1605557a83df5c8a2cc4eeb743b3dfc0eb6aaeb2"
   integrity sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==
@@ -5479,6 +5470,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-photo-album@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-photo-album/-/react-photo-album-2.3.0.tgz#262afa60691d8ed5e25b8c8a73cec339ec515652"
+  integrity sha512-CU+UMK4ZQHIoPZ672TSst9loKE5bxy6w0+bf7bY4XOw1g1C7+VdDWCW+wD8wPpbg2ve38QBTS73HVe6xYLAQ3w==
+
 react-qr-barcode-scanner@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/react-qr-barcode-scanner/-/react-qr-barcode-scanner-1.0.6.tgz#1df7ac3f3cb839ad673e8b619e0e93b4bdddc4e3"