add mobile friendly lightbox

.changeset/thin-games-appear.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add mobile friendly lightbox

package.json

@@ -38,7 +38,8 @@
     "react-router-dom": "^6.14.1",
     "react-singleton-hook": "^4.0.1",
     "react-use": "^17.4.0",
-    "webln": "^0.3.2"
+    "webln": "^0.3.2",
+    "yet-another-react-lightbox": "^3.12.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.2",

src/components/embed-types/common.tsx

@@ -61,6 +61,8 @@ function ImageGallery({ images }: { images: string[] }) {
 }
 
 const imageExt = [".svg", ".gif", ".png", ".jpg", ".jpeg", ".webp", ".avif"];
+
+// nevent1qqs8397rp8tt60f3lm8zldt8uqljuqw9axp8z79w0qsmj3r96lmg4tgpz3mhxue69uhhyetvv9ujuerpd46hxtnfduq3zamnwvaz7tmwdaehgun4v5hxxmmd0mkwa9
 export function embedImageGallery(content: EmbedableContent): EmbedableContent {
   return content
     .map((subContent, i) => {
@@ -122,7 +124,7 @@ export function embedImageGallery(content: EmbedableContent): EmbedableContent {
     .flat();
 }
 
-// note1n06jceulg3gukw836ghd94p0ppwaz6u3mksnnz960d8vlcp2fnqsgx3fu9
+// nostr:nevent1qqsfhafvv705g5wt8rcaytkj6shsshw3dwgamgfe3za8knk0uq4yesgpzpmhxue69uhkummnw3ezuamfdejszrthwden5te0dehhxtnvdakqsrnltk
 export function renderImageUrl(match: URL) {
   if (!imageExt.some((ext) => match.pathname.endsWith(ext))) return null;
 

src/components/image-gallery.tsx

@@ -1,18 +1,12 @@
-import {
-  LinkProps,
-  Link,
-  useDisclosure,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  ModalBody,
-  Image,
-  ModalFooter,
-  Button,
-} from "@chakra-ui/react";
-import { PropsWithChildren, createContext, forwardRef, useContext, useState } from "react";
+import { PropsWithChildren, createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import { LinkProps, Link, useDisclosure } from "@chakra-ui/react";
+import Lightbox, { SlideImage } from "yet-another-react-lightbox";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
+import Counter from "yet-another-react-lightbox/plugins/counter";
+import Download from "yet-another-react-lightbox/plugins/download";
+
+import "yet-another-react-lightbox/styles.css";
+import "yet-another-react-lightbox/plugins/counter.css";
 
 const GalleryContext = createContext({
   isOpen: false,
@@ -43,34 +37,29 @@ export const ImageGalleryLink = forwardRef(({ children, href, ...props }: Omit<L
 });
 
 export function ImageGalleryProvider({ children }: PropsWithChildren) {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const [image, setImage] = useState("");
+  const open = useDisclosure();
+  const [slides, setSlides] = useState<SlideImage[]>([]);
 
-  const openImage = (url: string) => {
-    setImage(url);
-    onOpen();
-  };
-  const context = { isOpen, openImage };
+  const openImage = useCallback(
+    (url: string) => {
+      setSlides([{ src: url }]);
+      open.onOpen();
+    },
+    [setSlides, open.onOpen]
+  );
+
+  const context = useMemo(() => ({ isOpen: open.isOpen, openImage }), [open.isOpen, openImage]);
 
   return (
     <GalleryContext.Provider value={context}>
       {children}
-      <Modal isOpen={isOpen} onClose={onClose} size="6xl">
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Image</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody p="0">
-            <Image src={image} w="full" />
-          </ModalBody>
-
-          <ModalFooter>
-            <Button colorScheme="brand" onClick={onClose}>
-              Close
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+      <Lightbox
+        open={open.isOpen}
+        slides={slides}
+        close={open.onClose}
+        plugins={[Zoom, Counter, Download]}
+        zoom={{ scrollToZoom: true, maxZoomPixelRatio: 4, wheelZoomDistanceFactor: 100 }}
+      />
     </GalleryContext.Provider>
   );
 }

yarn.lock

@@ -6797,6 +6797,11 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yet-another-react-lightbox@^3.12.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/yet-another-react-lightbox/-/yet-another-react-lightbox-3.12.0.tgz#0b23c61724dce80b8696a65b782f5f3f1bd49605"
+  integrity sha512-Hd3CzPJJFFQ2TMP9QvhkuKouWJ/DIw/mrlPkUa6KiQu4AW+CwtKIiJsxWixNN9uS4sC10G0V1ULyJKpHs4yk8g==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"