updated note preview component

src/components/imageWithFallback.tsx

@@ -30,7 +30,14 @@ export const ImageWithFallback = memo(function ImageWithFallback({
           colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
         />
       ) : (
-        <Image alt={alt} onError={setError} src={src} fill={fill} className={className} />
+        <Image
+          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
+          src={src}
+          alt={alt}
+          fill={fill}
+          className={className}
+          onError={setError}
+        />
       )}
     </>
   );

src/components/note/content/index.tsx

@@ -1,11 +1,9 @@
 import NoteMetadata from '@components/note/content/metadata';
-import { ImageCard } from '@components/note/content/preview/imageCard';
-import { Video } from '@components/note/content/preview/video';
+import NotePreview from '@components/note/content/preview';
 import { UserExtend } from '@components/user/extend';
 
 import dynamic from 'next/dynamic';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import ReactPlayer from 'react-player';
+import { memo } from 'react';
 
 const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
@@ -13,53 +11,6 @@ const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
 });
 
 export const Content = memo(function Content({ data }: { data: any }) {
-  const [preview, setPreview] = useState({});
-
-  const content = useRef(data.content);
-  const urls = useMemo(
-    () =>
-      content.current.match(
-        /((http|ftp|https):\/\/)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi
-      ),
-    []
-  );
-
-  useEffect(() => {
-    if (urls !== null && urls.length > 0) {
-      // #TODO: support multiple url
-      let url = urls[0];
-      // make sure url alway have http://
-      if (!/^https?:\/\//i.test(url)) {
-        url = 'http://' + url;
-      }
-      // parse url with new URL();
-      const parseURL = new URL(url, 'https://uselume.xyz');
-      // #TODO performance test
-      if (parseURL.pathname.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
-        // add image to preview
-        setPreview({ image: parseURL.href, type: 'image' });
-        content.current = content.current.replace(parseURL.href, '');
-      } else if (ReactPlayer.canPlay(parseURL.href)) {
-        // add video to preview
-        setPreview({ url: parseURL.href, type: 'video' });
-        content.current = content.current.replace(parseURL.href, '');
-      } // #TODO: support multiple preview
-    }
-  }, [urls]);
-
-  const previewAttachment = useCallback(() => {
-    if (Object.keys(preview).length > 0) {
-      switch (preview['type']) {
-        case 'image':
-          return <ImageCard data={preview} />;
-        case 'video':
-          return <Video data={preview} />;
-        default:
-          return null;
-      }
-    }
-  }, [preview]);
-
   return (
     <div className="relative z-10 flex flex-col">
       <UserExtend pubkey={data.pubkey} time={data.created_at} />
@@ -68,7 +19,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
           <div className="flex flex-col">
             <div>
               <MarkdownPreview
-                source={content.current}
+                source={data.content}
                 className={
                   'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
                 }
@@ -84,7 +35,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
                 ]}
               />
             </div>
-            <>{previewAttachment()}</>
+            <NotePreview content={data.content} />
           </div>
           <NoteMetadata
             eventID={data.id}

src/components/note/content/preview.tsx

@@ -0,0 +1,43 @@
+import { ImagePreview } from '@components/note/preview/image';
+import { VideoPreview } from '@components/note/preview/video';
+
+import { useEffect, useState } from 'react';
+import ReactPlayer from 'react-player';
+
+export default function NotePreview({ content }: { content: string }) {
+  const [video, setVideo] = useState(null);
+  const [images, setImages] = useState([]);
+
+  useEffect(() => {
+    const urls = content.match(
+      /((http|ftp|https):\/\/)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi
+    );
+
+    if (urls !== null && urls.length > 0) {
+      urls.forEach((url) => {
+        // make sure url alway have http://
+        if (!/^https?:\/\//i.test(url)) {
+          url = 'http://' + url;
+        }
+        // parse url with new URL();
+        const parseURL = new URL(url, 'https://uselume.xyz');
+        // parse image url
+        if (parseURL.pathname.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+          // add image to preview
+          setImages((images) => [...images, parseURL.href]);
+        } else if (ReactPlayer.canPlay(parseURL.href)) {
+          // add video to preview
+          setVideo(parseURL.href);
+        }
+      });
+    }
+  }, [content]);
+
+  if (video) {
+    return <VideoPreview data={video} />;
+  } else if (images.length > 0) {
+    return <ImagePreview data={images} />;
+  } else {
+    return <></>;
+  }
+}

src/components/note/content/preview/imageCard.tsx

@@ -1,22 +0,0 @@
-import Image from 'next/image';
-import { memo } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ImageCard = memo(function ImageCard({ data }: { data: object }) {
-  return (
-    <div className={`relative mt-2 flex flex-col overflow-hidden`}>
-      <div className="relative h-full w-full rounded-lg border border-zinc-800">
-        <Image
-          placeholder="blur"
-          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
-          src={data['image']}
-          alt={data['image']}
-          width="0"
-          height="0"
-          sizes="100vw"
-          className=" h-auto w-full rounded-lg object-cover"
-        />
-      </div>
-    </div>
-  );
-});

src/components/note/content/preview/video.tsx

@@ -1,18 +0,0 @@
-import { memo } from 'react';
-import ReactPlayer from 'react-player/lazy';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Video = memo(function Video({ data }: { data: object }) {
-  return (
-    <div className="relative mt-2 flex flex-col overflow-hidden rounded-xl border border-zinc-800">
-      <ReactPlayer
-        url={data['url']}
-        controls={true}
-        volume={0}
-        className="aspect-video w-full"
-        width="100%"
-        height="100%"
-      />
-    </div>
-  );
-});

src/components/note/preview/image.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+import { memo } from 'react';
+
+export const ImagePreview = memo(function ImagePreview({ data }: { data: any }) {
+  return (
+    <div className="relative mt-2 flex flex-col overflow-hidden">
+      {data.map((image: string, index: number) => (
+        <div key={index} className={`relative h-full w-full rounded-lg ${index == 1 ? 'mt-2' : ''}`}>
+          <Image
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
+            src={image}
+            alt={image}
+            width="0"
+            height="0"
+            sizes="100vw"
+            className="h-auto w-full rounded-lg border border-zinc-800 object-cover"
+          />
+        </div>
+      ))}
+    </div>
+  );
+});

src/components/note/preview/link.tsx

@@ -1,13 +1,12 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function LinkCard({ data }: { data: object }) {
+export default function LinkCard({ data }: { data: any }) {
   return (
     <Link
       href={data['url']}
       target={'_blank'}
-      className="relative mt-2 flex flex-col overflow-hidden rounded-xl border border-zinc-700"
+      className="relative mt-2 flex flex-col overflow-hidden rounded-lg border border-zinc-700"
     >
       <div className="relative aspect-video h-auto w-full">
         <Image src={data['image']} alt="image preview" fill={true} className="object-cover" />

src/components/note/preview/video.tsx

@@ -0,0 +1,10 @@
+import { memo } from 'react';
+import ReactPlayer from 'react-player/lazy';
+
+export const VideoPreview = memo(function VideoPreview({ data }: { data: string }) {
+  return (
+    <div className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
+      <ReactPlayer url={data} controls={true} volume={0} className="aspect-video w-full" width="100%" height="100%" />
+    </div>
+  );
+});