From 107b93bbd3f790c6a4a2cd65228680e9eda4d084 Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Sat, 2 Dec 2023 21:28:57 +1100
Subject: [PATCH] media display

---
 client/src/components/Forms/PostFormCard.tsx  |  2 +-
 client/src/components/Modals/Card.tsx         |  4 +-
 .../Modals/CardModals/QuoteEmbed.tsx          |  4 +-
 client/src/utils/FileUpload.tsx               | 61 +++++++++++--------
 client/src/utils/content.ts                   | 31 +++++-----
 5 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/client/src/components/Forms/PostFormCard.tsx b/client/src/components/Forms/PostFormCard.tsx
index fae8d46..344f116 100644
--- a/client/src/components/Forms/PostFormCard.tsx
+++ b/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">
diff --git a/client/src/components/Modals/Card.tsx b/client/src/components/Modals/Card.tsx
index d5bbbeb..071b919 100644
--- a/client/src/components/Modals/Card.tsx
+++ b/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) => (
diff --git a/client/src/components/Modals/CardModals/QuoteEmbed.tsx b/client/src/components/Modals/CardModals/QuoteEmbed.tsx
index 3307d73..94e9979 100644
--- a/client/src/components/Modals/CardModals/QuoteEmbed.tsx
+++ b/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
diff --git a/client/src/utils/FileUpload.tsx b/client/src/utils/FileUpload.tsx
index 7d2b3e3..10446cf 100644
--- a/client/src/utils/FileUpload.tsx
+++ b/client/src/utils/FileUpload.tsx
@@ -51,31 +51,42 @@ export default async function FileUpload(file: File): Promise<UploadResult> {
   };
 }
 
-export const renderMedia = (file: string) => {
-  if (file && (file.endsWith(".mp4") || file.endsWith(".webm"))) {
-    return (
-      <video
-        controls
-        muted
-        src={file + "#t=0.1"}
-        preload="metadata"
-        className="thumb mt-2 rounded-md w-full"
-      >
-        <source src={file} type="video/mp4" />
-      </video>
-    );
-  } else if (!file.includes("http")) {
-    return <></>;
-  } else {
-    return (
-      <img
-        alt="Invalid thread"
-        loading="lazy"
-        className="thumb mt-2 rounded-md w-full"
-        src={file}
-      />
-    );
-  }
+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-1 rounded-md w-full"
+            >
+              <source src={file} type="video/mp4" />
+            </video>
+          );
+        } else if (!file.includes("http")) {
+          return null;
+        } else {
+          return (
+            <img
+              key={index}
+              alt="Invalid thread"
+              loading="lazy"
+              className="thumb mt-2 rounded-md w-full"
+              src={file}
+            />
+          );
+        }
+      })}
+    </div>
+  );
 };
 
 export async function attachFile(file_input: File | null): Promise<string> {
diff --git a/client/src/utils/content.ts b/client/src/utils/content.ts
index 379dec3..2bd941b 100644
--- a/client/src/utils/content.ts
+++ b/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;
 
-    return {
-        comment: contentWithoutFile.trim(),
-        file
-    };
+  files.forEach(file => {
+      contentWithoutFiles = contentWithoutFiles.replace(file, '');
+  });
+
+  return {
+      comment: contentWithoutFiles.trim(),
+      files
+  };
 }
\ No newline at end of file