Add photoswipe gallery

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "primal-web-app",
-  "version": "0.79.2",
+  "version": "0.97.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "primal-web-app",
-      "version": "0.79.2",
+      "version": "0.97.3",
       "license": "MIT",
       "dependencies": {
         "@cookbook/solid-intl": "0.1.2",
@@ -20,6 +20,7 @@
         "dompurify": "3.0.5",
         "medium-zoom": "1.0.8",
         "nostr-tools": "1.15.0",
+        "photoswipe": "^5.4.3",
         "sass": "1.67.0",
         "solid-js": "1.7.11"
       },
@@ -1830,6 +1831,14 @@
       ],
       "license": "MIT"
     },
+    "node_modules/photoswipe": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.3.tgz",
+      "integrity": "sha512-9UC6oJBK4oXFZ5HcdlcvGkfEHsVrmE4csUdCQhEjHYb3PvPLO3PG7UhnPuOgjxwmhq5s17Un5NUdum01LgBDng==",
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "dev": true,

package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@cookbook/solid-intl": "0.1.2",
     "@jukben/emoji-search": "3.0.0",
-    "@kobalte/core": "^0.11.0",
+    "@kobalte/core": "0.11.0",
     "@picocss/pico": "1.5.10",
     "@scure/base": "1.1.3",
     "@solidjs/router": "0.8.3",
@@ -32,6 +32,7 @@
     "dompurify": "3.0.5",
     "medium-zoom": "1.0.8",
     "nostr-tools": "1.15.0",
+    "photoswipe": "5.4.3",
     "sass": "1.67.0",
     "solid-js": "1.7.11"
   }

src/components/NoteImage/NoteImage.tsx

@@ -7,6 +7,7 @@ import { generatePrivateKey } from "nostr-tools";
 import { MediaVariant } from "../../types/primal";
 
 const NoteImage: Component<{
+  class?: string,
   media?: MediaVariant,
   width?: number,
   src?: string,
@@ -49,26 +50,26 @@ const NoteImage: Component<{
     return `${h}px`;
   };
 
-  // const height = createMemo(() => {
-  //   if (!props.media) {
-  //     return '100%';
-  //   }
+  const zoomW = () => {
+    if (!props.media) {
+      return 100;
+    }
 
+    if (ratio() > 1) {
+      return window.innerWidth;
+    }
 
-  //   const mediaHeight = props.media.h;
-  //   const mediaWidth = props.media.w || 0;
-  //   const rect = imgRefActual?.getBoundingClientRect();
-  //   const imgWidth = props.width || rect?.width || 0;
+    return window.innerHeight * ratio();
+  };
 
-  //   const ratio = mediaWidth / imgWidth;
+  const zoomH = () => {
 
-  //   const h = ratio > 1 ?
-  //   mediaHeight / ratio :
-  //   mediaHeight * ratio;
+    if (ratio() > 1) {
+      return window.innerWidth / ratio();
+    }
 
-  //   console.log('MEDIA: ', props.media, h, ratio);
-  //   return `${h}px`;
-  // });
+    return window.innerHeight;
+  };
 
   const klass = () => `${styles.noteImage} ${isCached() ? '' : 'redBorder'}`;
 
@@ -96,25 +97,30 @@ const NoteImage: Component<{
   }
 
   onMount(() => {
-    getZoom();
+    // getZoom();
   });
 
   onCleanup(() => {
-    const iRef = imgRef();
-    iRef && zoomRef && zoomRef.detach(iRef);
+    // const iRef = imgRef();
+    // iRef && zoomRef && zoomRef.detach(iRef);
   });
 
   return (
-    <div style={`width: 100%; height: ${height()};`}>
+    <a
+      class={props.class || ''}
+      style={`width: 100%; height: ${height()};`}
+      href={src()}
+      data-pswp-width={zoomW()}
+      data-pswp-height={zoomH()}
+    >
       <img
         id={imgId}
         ref={imgRefActual}
         src={src()}
         class={klass()}
         onerror={props.onError}
-        onClick={doZoom}
       />
-    </div>
+    </a>
   );
 }
 

src/components/ParsedNote/ParsedNote.tsx

@@ -42,6 +42,8 @@ import { linebreakRegex, shortMentionInWords, shortNoteWords, specialCharsRegex,
 import { useIntl } from '@cookbook/solid-intl';
 import { actions } from '../../translations';
 
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+
 
 const convertHTMLEntity = (text: string) => {
   const span = document.createElement('span');
@@ -67,6 +69,27 @@ const ParsedNote: Component<{
   const intl = useIntl();
   const media = useMediaContext();
 
+  const id = () => {
+    console.log('ID: ', props.id);
+    // if (props.id) return props.id;
+
+    return `note_${props.note.post.noteId}`;
+  }
+
+  const lightbox = new PhotoSwipeLightbox({
+    gallery: `#${id()}`,
+    children: `a.image_${props.note.post.noteId}`,
+    showHideAnimationType: 'zoom',
+    initialZoomLevel: 'fit',
+    secondaryZoomLevel: 2,
+    maxZoomLevel: 3,
+    pswpModule: () => import('photoswipe')
+  });
+
+  onMount(() => {
+    lightbox.init();
+  });
+
   const [tokens, setTokens] = createStore<string[]>([]);
 
   let wordsDisplayed = 0;
@@ -131,7 +154,7 @@ const ParsedNote: Component<{
 
             wordsDisplayed += shortMentionInWords;
 
-            return <NoteImage src={url} isDev={dev} media={image} width={514} />;
+            return <NoteImage class={`image_${props.note.post.noteId}`} src={url} isDev={dev} media={image} width={514} />;
           }
 
           if (isMp4Video(token)) {
@@ -489,7 +512,7 @@ const ParsedNote: Component<{
   });
 
   return (
-    <div id={props.id} class={styles.parsedNote} >
+    <div id={id()} class={styles.parsedNote} >
       <For each={tokens}>
         {(token) =>
           <Show when={shouldShowToken()}>

src/index.scss

@@ -2,6 +2,8 @@
 
 @import "./palette.scss";
 
+@import 'photoswipe/style.css';
+
 /* Default theme */
 :root[data-theme="dark"],
 :root[data-theme="sunset"],