media display

client/src/components/Forms/PostFormCard.tsx

@@ -149,7 +149,7 @@ const NewNoteCard = ({
                             <XCircleIcon className="h-10 w-10 absolute shadow z-100 text-blue-500" />
                         </button>
                     )}
-                    {renderMedia(file)}
+                    {renderMedia([file])}
                 </div>
                 <div className="h-14 flex items-center justify-between">
                     <div className="inline-flex items-center gap-2 bg-neutral-800 px-1.5 py-1 rounded-lg">

client/src/components/Modals/Card.tsx

@@ -27,7 +27,7 @@ const PostCard = ({
     repliedTo,
     type
 }: CardProps) => {
-    const { file } = parseContent(event);
+    const { files } = parseContent(event);
     const icon = getIconFromHash(event.pubkey);
     const metadataParsed = metadata ? getMetadata(metadata) : null;
     const navigate = useNavigate();
@@ -44,7 +44,7 @@ const PostCard = ({
                     <div className={`flex flex-col break-words ${type !== "OP" ? 'hover:cursor-pointer' : ''}`} onClick={handleClick}>
                         <ContentPreview key={event.id} eventdata={event} />
                     </div>
-                    {renderMedia(file)}
+                    {renderMedia(files)}
                     {repliedTo && <div className="flex items-center mt-1" >
                         <span className="text-xs text-gray-500">Reply to: </span>
                         {uniqBy(repliedTo, 'pubkey').map((event, index) => (

client/src/components/Modals/CardModals/QuoteEmbed.tsx

@@ -16,7 +16,7 @@ const QuoteEmbed = ({
   event: Event;
   metadata: Event | null;
 }) => {
-  const { file } = parseContent(event);
+  const { files } = parseContent(event);
   const icon = getIconFromHash(event.pubkey);
 
   let metadataParsed = null;
@@ -30,7 +30,7 @@ const QuoteEmbed = ({
         <div className="flex flex-col break-words">
           <ContentPreview key={event.id} eventdata={event} />
         </div>
-        {renderMedia(file)}
+        {renderMedia(files)}
         <div className="flex justify-between items-center">
             {metadataParsed ?
               <img

client/src/utils/FileUpload.tsx

@@ -51,24 +51,32 @@ export default async function FileUpload(file: File): Promise<UploadResult> {
   };
 }
 
-export const renderMedia = (file: string) => {
+export const renderMedia = (files: string[]) => {
+  const gridTemplateColumns = files.length > 1 ? 'repeat(2, 1fr)' : 'repeat(1, 1fr)';
+  const gridTemplateRows = files.length > 2 ? 'repeat(2, 1fr)' : 'repeat(1, 1fr)';
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns, gridTemplateRows, gap: '2px' }}>
+      {files.map((file, index) => {
         if (file && (file.endsWith(".mp4") || file.endsWith(".webm"))) {
           return (
             <video
+              key={index}
               controls
               muted
               src={file + "#t=0.1"}
               preload="metadata"
-        className="thumb mt-2 rounded-md w-full"
+              className="thumb mt-1 rounded-md w-full"
             >
               <source src={file} type="video/mp4" />
             </video>
           );
         } else if (!file.includes("http")) {
-    return <></>;
+          return null;
         } else {
           return (
             <img
+              key={index}
               alt="Invalid thread"
               loading="lazy"
               className="thumb mt-2 rounded-md w-full"
@@ -76,6 +84,9 @@ export const renderMedia = (file: string) => {
             />
           );
         }
+      })}
+    </div>
+  );
 };
 
 export async function attachFile(file_input: File | null): Promise<string> {

client/src/utils/content.ts

@@ -1,22 +1,21 @@
 import { Event } from 'nostr-tools'
 
-function extractMediaUrl(content: string){
-    const regex = /(https?:\/\/\S+\.(?:jpg|png|jpeg|gif|mp4|webm|mov|webp))/i;
-    const match = content.match(regex);
-    if (match) {
-      return match[0];
-       
-    } else {
-      return '' ;
-    }
+function extractMediaUrls(content: string): string[] {
+  const regex = /(https?:\/\/\S+\.(?:jpg|png|jpeg|gif|mp4|webm|mov|webp))/gi;
+  const matches = content.match(regex);
+  return matches || [];
 }
 
 export function parseContent(event: Event) {
-    const file = extractMediaUrl(event.content) as string;
-    const contentWithoutFile = event.content.replace(file, '');
+  const files = extractMediaUrls(event.content);
+  let contentWithoutFiles = event.content;
+
+  files.forEach(file => {
+      contentWithoutFiles = contentWithoutFiles.replace(file, '');
+  });
 
   return {
-        comment: contentWithoutFile.trim(),
-        file
+      comment: contentWithoutFiles.trim(),
+      files
   };
 }