From 4ea00d1af65f561e70129a7a7dd17f716ee5c2dc Mon Sep 17 00:00:00 2001
From: en <enes@nostrdev.com>
Date: Thu, 27 Feb 2025 17:24:22 +0100
Subject: [PATCH] fix(gallery): invalid source

---
 src/components/Notes/NoteRender.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Notes/NoteRender.tsx b/src/components/Notes/NoteRender.tsx
index 4d97a0f..bfd4d8d 100644
--- a/src/components/Notes/NoteRender.tsx
+++ b/src/components/Notes/NoteRender.tsx
@@ -35,7 +35,7 @@ export const NoteRender = ({ content }: NoteRenderProps) => {
     slide: 1
   })
   const slides = useMemo(() => {
-    const urls: string[] = []
+    const sources: { url: string; type: 'image' | 'video' | 'youtube' }[] = []
     const parts = content.matchAll(new RegExp(`${link.source}`, 'gui'))
     ;[...parts]
       .filter((p) => typeof p !== 'undefined')
@@ -43,18 +43,23 @@ export const NoteRender = ({ content }: NoteRenderProps) => {
         const [href] = part
 
         if (href && isValidUrl(href)) {
-          if (isValidImageUrl(href) || isValidVideoUrl(href)) {
-            urls.push(href)
+          if (isValidImageUrl(href)) {
+            sources.push({ url: href, type: 'image' })
+          } else if (isValidVideoUrl(href)) {
+            sources.push({ url: href, type: 'video' })
           } else if (isYoutubeLink(href)) {
             const id = getIdFromYoutubeLink(href)
             if (id) {
-              urls.push(`https://www.youtube.com/embed/${id}`)
+              sources.push({
+                url: `https://www.youtube.com/embed/${id}`,
+                type: 'youtube'
+              })
             }
           }
         }
       })
 
-    return urls
+    return sources
   }, [content])
 
   const openLightBoxOnSlide = useCallback(
@@ -62,7 +67,7 @@ export const NoteRender = ({ content }: NoteRenderProps) => {
       slides.length &&
         setLightBoxController((prev) => ({
           toggler: !prev.toggler,
-          slide: slides.findIndex((s) => s === url) + 1
+          slide: slides.findIndex((s) => s.url === url) + 1
         }))
     },
     [slides]
@@ -184,7 +189,8 @@ export const NoteRender = ({ content }: NoteRenderProps) => {
         createPortal(
           <FsLightbox
             toggler={lightBoxController.toggler}
-            sources={slides}
+            sources={slides.map((s) => s.url)}
+            types={slides.map((s) => s.type)}
             slide={lightBoxController.slide}
           />,
           document.body