event page

3 files changed, 46 insertions, 6 deletions

diff --git a/src/components/Media.svelte b/src/components/Media.svelte
new file mode 100644
index 00000000..d24dd12d
--- /dev/null
+++ b/src/components/Media.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  export const isImage = (url: string) =>
+    url?.match(/^.*\.(jpg|jpeg|png|webp|gif|avif|svg)/gi);
+  export const isVideo = (url: string) =>
+    url?.match(/^.*\.(mov|mkv|mp4|avi|m4v|webm)/gi);
+  export const isAudio = (url: string) => url?.match(/^.*\.(ogg|mp3|wav)/gi);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export let value: any;
+</script>
+
+{#if !!isImage(value.url)}
+  <img src={value.url} alt={""} />
+{:else if isVideo(value.url)}
+  <!-- svelte-ignore a11y-media-has-caption -->
+  <video src={value.url} controls />
+{:else if isAudio(value.url)}
+  <audio src={value.url} controls>
+    <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a>
+  </audio>
+{:else}
+  <a href={value.url}>
+    {value.url.replace(/https?:\/\/(www\.)?/, "")}
+  </a>
+{/if}
diff --git a/src/routes/(app)/e/[id]/+page.server.ts b/src/routes/(app)/e/[id]/+page.server.ts
index 4bad1b9b..78e3ea6e 100644
--- a/src/routes/(app)/e/[id]/+page.server.ts
+++ b/src/routes/(app)/e/[id]/+page.server.ts
@@ -1,12 +1,14 @@
-import { get } from "$lib/utils";
+import { get, post } from "$lib/utils";
 import { error } from "@sveltejs/kit";
 
 export async function load({ params }) {
 	try {
 		const event = await get(`/event/${params.id}`);
+		const { parts, names } = await post("/parseEvent", { event });
 		const author = await get(`/users/${event.pubkey}`);
 		const zaps = await get(`/zaps/${params.id}`);
-		return { author, event, zaps };
+
+		return { author, event, names, parts, zaps };
 	} catch (e) {
 		console.log(e);
 		error(500, { message: "Failed to get event" });
diff --git a/src/routes/(app)/e/[id]/+page.svelte b/src/routes/(app)/e/[id]/+page.svelte
index 891ee0eb..15e2be72 100644
--- a/src/routes/(app)/e/[id]/+page.svelte
+++ b/src/routes/(app)/e/[id]/+page.svelte
@@ -1,18 +1,31 @@
 <script>
   import Avatar from "$comp/Avatar.svelte";
+  import Media from "$comp/Media.svelte";
+
   let { data } = $props();
-  let { author, event, zaps } = $derived(data);
+  let { author, event, names, parts, zaps } = $derived(data);
 
   let zap = () => {};
 </script>
 
-<div class="container px-4 max-w-xl mx-auto space-y-5 break-words">
+<div class="container px-4 max-w-xl mx-auto space-y-5">
   <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
     Event
   </h1>
-  <div class="flex items-center gap-2 text-2xl">
+  <div class="flex gap-2 text-2xl">
     <Avatar user={author} size={16} />
-    <div class="break-words overflow-wrap">{event.content}</div>
+
+    <div class="space-y-5">
+      {#each parts as { type, value }, i}
+        {#if type === "text"}
+          {value}
+        {:else if type === "link"}
+          <Media {value} />
+        {:else if type.match(/^nostr:np(rofile|ub)$/)}
+          <a href={`/${value.pubkey}`} class="font-bold">@{names[value.pubkey]}</a>
+        {/if}
+      {/each}
+    </div>
   </div>
   <a href={`/send/zap/${event.pubkey}/${event.id}`} class="btn btn-accent">
     <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"