add image lightbox

.changeset/gorgeous-kids-run.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Load image thumbnails with imageproxy service

.changeset/two-rockets-give.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add image lightbox and zoom

package.json

@@ -19,6 +19,7 @@
     "idb": "^7.1.1",
     "identicon.js": "^2.3.3",
     "light-bolt11-decoder": "^2.1.0",
+    "lightgallery": "^2.7.1",
     "moment": "^2.29.4",
     "noble-secp256k1": "^1.2.14",
     "nostr-tools": "^1.8.3",

src/components/embed-types/common.tsx

@@ -2,11 +2,15 @@ import { Box, Image, ImageProps, Link, useDisclosure } from "@chakra-ui/react";
 import { EmbedableContent, embedJSX } from "../../helpers/embeds";
 import appSettings from "../../services/app-settings";
 
+import LightGallery from "lightgallery/react";
+import lgThumbnail from "lightgallery/plugins/thumbnail";
+import lgZoom from "lightgallery/plugins/zoom";
+
 const BlurredImage = (props: ImageProps) => {
-  const { isOpen, onToggle } = useDisclosure();
+  const { isOpen, onOpen } = useDisclosure();
   return (
     <Box overflow="hidden">
-      <Image onClick={onToggle} cursor="pointer" filter={isOpen ? "" : "blur(1.5rem)"} {...props} />
+      <Image onClick={onOpen} cursor="pointer" filter={isOpen ? "" : "blur(1.5rem)"} {...props} />
     </Box>
   );
 };
@@ -18,8 +22,18 @@ export function embedImages(content: EmbedableContent, trusted = false) {
       /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,6})((?:\/[\+~%\/\.\w\-_]*)?\.(?:svg|gif|png|jpg|jpeg|webp|avif))(\??(?:[\?#\-\+=&;%@\.\w_]*)#?(?:[\-\.\!\/\\\w]*))?/i,
     render: (match) => {
       const ImageComponent = trusted || !appSettings.value.blurImages ? Image : BlurredImage;
-      const src = appSettings.value.imageProxy ? `${appSettings.value.imageProxy}${match[0]}` : match[0];
-      return <ImageComponent src={src} width="100%" maxWidth="30rem" />;
+      const thumbnail = appSettings.value.imageProxy
+        ? new URL(`/256,fit/${match[0]}`, appSettings.value.imageProxy).toString()
+        : match[0];
+      const src = match[0];
+
+      return (
+        <LightGallery plugins={[lgThumbnail, lgZoom]} licenseKey="1234-5678-9101-1121">
+          <a href={src} target="_blank">
+            <ImageComponent src={thumbnail} cursor="pointer" maxW="30rem" />
+          </a>
+        </LightGallery>
+      );
     },
     name: "Image",
   });

src/components/user-avatar.tsx

@@ -17,17 +17,20 @@ export type UserAvatarProps = Omit<AvatarProps, "src"> & {
   pubkey: string;
 };
 export const UserAvatar = React.memo(({ pubkey, ...props }: UserAvatarProps) => {
-  const { proxyUserMedia } = useSubject(appSettings);
+  const { imageProxy, proxyUserMedia } = useSubject(appSettings);
   const metadata = useUserMetadata(pubkey);
   const picture = useMemo(() => {
     if (metadata?.picture) {
-      if (proxyUserMedia) {
+      const src = safeUrl(metadata?.picture);
+      if (imageProxy && src) {
+        return new URL(`/96/${src}`, imageProxy).toString();
+      } else if (proxyUserMedia) {
         const last4 = String(pubkey).slice(pubkey.length - 4, pubkey.length);
         return `https://media.nostr.band/thumbs/${last4}/${pubkey}-picture-64`;
       }
-      return safeUrl(metadata?.picture);
+      return src;
     }
-  }, [metadata?.picture, proxyUserMedia]);
+  }, [metadata?.picture, imageProxy]);
 
   return <Avatar src={picture} icon={<UserIdenticon pubkey={pubkey} />} overflow="hidden" {...props} />;
 });

src/index.tsx

@@ -3,6 +3,10 @@ import { createRoot } from "react-dom/client";
 import { App } from "./app";
 import { Providers } from "./providers";
 
+import "lightgallery/css/lightgallery.css";
+import "lightgallery/css/lg-zoom.css";
+import "lightgallery/css/lg-thumbnail.css";
+
 // register nostr: protocol handler
 try {
   navigator.registerProtocolHandler("web+nostr", new URL("/l/%s", location.origin).toString());

yarn.lock

@@ -3985,6 +3985,11 @@ light-bolt11-decoder@^2.1.0:
     bn.js "^4.11.8"
     buffer "^6.0.3"
 
+lightgallery@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/lightgallery/-/lightgallery-2.7.1.tgz#6f15bfb72d51ed9499aa6b6363181083fd048ef9"
+  integrity sha512-NbXOzD2APY1OhOOn464jDsBZBaCRahUoLvBxhDFxvwJeC8hCkCIPYSjGgGTYINxVK09DKMsNDJzRr1ngH5nDdg==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"