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 = ({
- {renderMedia(file)}
+ {renderMedia(files)}
{repliedTo &&
Reply to:
{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 = ({
- {renderMedia(file)}
+ {renderMedia(files)}
{metadataParsed ?
{
};
}
-export const renderMedia = (file: string) => {
- if (file && (file.endsWith(".mp4") || file.endsWith(".webm"))) {
- return (
-
- );
- } else if (!file.includes("http")) {
- return <>>;
- } else {
- return (
-
- );
- }
+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 (
+
+ {files.map((file, index) => {
+ if (file && (file.endsWith(".mp4") || file.endsWith(".webm"))) {
+ return (
+
+ );
+ } else if (!file.includes("http")) {
+ return null;
+ } else {
+ return (
+
+ );
+ }
+ })}
+
+ );
};
export async function attachFile(file_input: File | null): Promise
{
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