From fa4bd81dd69dc6c6d51fd724fd4f621dd069bfda Mon Sep 17 00:00:00 2001
From: zeudev <coding@zeu.dev>
Date: Tue, 12 May 2026 15:29:14 -0700
Subject: [PATCH] implement /live

---
 astro.config.mjs                      |  2 +-
 src/actions/index.ts                  | 54 ++++++++++++++++++++++++
 src/components/SiteLayout.astro       |  2 +-
 src/components/StreamplaceChat.svelte | 59 +++++++++++++++++++++++++++
 src/lib/utils.ts                      |  2 +
 src/pages/live.astro                  | 46 +++++++++++++++++++++
 src/pages/stream.astro                |  6 ---
 7 files changed, 163 insertions(+), 8 deletions(-)
 create mode 100644 src/actions/index.ts
 create mode 100644 src/components/StreamplaceChat.svelte
 create mode 100644 src/pages/live.astro
 delete mode 100644 src/pages/stream.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 4986d02..2414bff 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -19,7 +19,7 @@ export default defineConfig({
       "applicationName": "Zeu's Personal Site",
       "applicationDomain": "https://zeu.dev",
       scopes: [
-        "repo:place.stream.chat.message?action=create"
+        "include:place.stream.authFull",
       ]
     })
   ],
diff --git a/src/actions/index.ts b/src/actions/index.ts
new file mode 100644
index 0000000..b88e7ab
--- /dev/null
+++ b/src/actions/index.ts
@@ -0,0 +1,54 @@
+import { z } from "astro/zod";
+import { ActionError, defineAction } from "astro:actions";
+import { getPdsAgent } from "@fujocoded/authproto/helpers";
+import { TID } from "@atproto/common-web";
+
+export const server = {
+  sendChatMessage: defineAction({
+    accept: "form",
+    input: z.object({
+      message: z.string().optional()
+    }),
+    handler: async (input, context) => {
+      console.log({ input });
+      const loggedInUser = context.locals.loggedInUser;
+      if (!loggedInUser) {
+        throw new ActionError({
+          code: "UNAUTHORIZED",
+          message: "You're not logged in!"
+        });
+      }
+
+      const agent = await getPdsAgent({ loggedInUser });
+      if (!agent) {
+        throw new ActionError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Something went wrong when connecting to your PDS."
+        });
+      }
+
+      try {
+        const record = await agent.com.atproto.repo.createRecord({
+          repo: loggedInUser.did,
+          collection: "place.stream.chat.message",
+          rkey: TID.nextStr(),
+          record: {
+            text: input.message,
+            createdAt: new Date().toISOString(),
+            streamer: "did:plc:gotnvwkr56ibs33l4hwgfoet",
+            $type: "place.stream.chat.message"
+          }
+        });
+        console.log(record);
+      }
+      catch (e) {
+        console.error(e);
+        console.log("EWRROR");
+        throw new ActionError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Something went wrong with posting your status to your PDS!"
+        })
+      }
+    }
+  }),
+}
diff --git a/src/components/SiteLayout.astro b/src/components/SiteLayout.astro
index c360d0e..89d3255 100644
--- a/src/components/SiteLayout.astro
+++ b/src/components/SiteLayout.astro
@@ -51,7 +51,7 @@ const loggedInUser = Astro.locals.loggedInUser;
 
         <section class="flex flex-col gap-2 text-white">
           <h3 class="text-yellow-500">
-            <a href="/stream" class="after:content-['_->'] before:content-['🔴_']">stream</a>
+            <a href="/live" class="after:content-['_->'] before:content-['🔴_']">live</a>
           </h3>
           <h3 class="text-yellow-500">
             <a href="/resume" class="after:content-['_->'] before:content-['💼_']">resume</a>
diff --git a/src/components/StreamplaceChat.svelte b/src/components/StreamplaceChat.svelte
new file mode 100644
index 0000000..001b9fb
--- /dev/null
+++ b/src/components/StreamplaceChat.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { onDestroy, onMount } from "svelte";
+
+  const wsUrl = `wss://stream.place/api/websocket/${encodeURIComponent("zeu.dev")}`;
+  const websocket = new WebSocket(wsUrl);
+  let chat = $state([]);
+  let title = $state("");
+  let viewerCount = $state(0);
+
+  websocket.onopen = () => {
+    console.log("Chat connected", "success");
+  };
+
+  websocket.onclose = (e) => {
+    console.log(`Chat disconnected (code ${e.code})`);
+  };
+
+  websocket.onerror = () => {
+    console.log("Chat WebSocket error", "error");
+  };
+
+  websocket.onmessage = (event) => {
+    try {
+      const data = JSON.parse(event.data);
+      if (data.$type === "place.stream.chat.defs#messageView") {
+        // @ts-ignore
+        chat.push(data);
+      } 
+      else if (data.$type === "place.stream.livestream#livestreamView") {
+        title = data.record?.title || "";
+      }
+      else if (data.$type === "place.stream.livestream#viewerCount") {
+        viewerCount = data.count;
+      }
+    } catch {
+      // Ignore non-JSON or unknown message types
+    }
+  };
+
+  $effect(() => {
+    // @ts-ignore
+    chat = chat.toSorted((a, b) => new Date(a.createdAt).getTime() > new Date(b.createdAt).getTime());
+  });
+
+  onDestroy(() => {
+    websocket.close();
+  });
+</script>
+
+
+<p>👁️ {viewerCount} Viewers</p>
+<div class="w-lg">
+  {#each chat as msg}
+    <span class="flex gap-4">
+      <a href={`https://${msg.author.handle}`} class="text-blue-500 hover:underline">{msg.author.handle}</a>
+      <p class="text-wrap">{msg.record.text}</p>
+    </span>
+  {/each}
+</div>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 42b2bf9..b5d1d89 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -76,5 +76,7 @@ export async function resolveHandle(handle: string) {
   const response = await fetch(url);
   const miniDoc = await response.json() as MiniDoc;
 
+  handleCache = {...handleCache, [miniDoc.handle]: miniDoc};
+
   return miniDoc;
 }
diff --git a/src/pages/live.astro b/src/pages/live.astro
new file mode 100644
index 0000000..26dae83
--- /dev/null
+++ b/src/pages/live.astro
@@ -0,0 +1,46 @@
+---
+import { actions } from "astro:actions";
+import SiteLayout from "../components/SiteLayout.astro"
+import StreamplaceChat from "../components/StreamplaceChat.svelte";
+
+export const prerender = false;
+const loggedInUser = Astro.locals.loggedInUser;
+const result = Astro.getActionResult(actions.sendChatMessage);
+console.log({ result });
+---
+
+<SiteLayout title="Stream | zeu.dev">
+  <main class="flex flex-col gap-8 px-4 py-8 text-white text-lg">
+    <h1 class="text-3xl font-bold text-yellow-500">Livestream</h1>
+    <iframe
+      src="https://stream.place/embed/zeu.dev"
+      width="560"
+      height="315"
+      allowfullscreen
+      class="border border-yellow-500 p-2"
+    ></iframe>
+
+    <form id="msgForm">
+      {!loggedInUser && <p class="text-red-400">Login to chat</p>}
+      <div class="">
+        <input id="msgInput" name="message" type="text" class="border border-yellow-500" disabled={!loggedInUser} />
+        <button type="submit" disabled={!loggedInUser}>Send</button>
+      </div>
+    </form>
+    <StreamplaceChat client:load />
+  </main>
+</SiteLayout>
+
+<script>
+  import { actions } from "astro:actions";
+  const msgInput = document.getElementById("msgInput") as HTMLInputElement;
+  const form = document.getElementById("msgForm") as HTMLFormElement;
+  form?.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const formData = new FormData(form);
+    const result = await actions.sendChatMessage(formData);
+    if (!result.error) {
+      msgInput.value = "";
+    }
+  });
+</script>
diff --git a/src/pages/stream.astro b/src/pages/stream.astro
deleted file mode 100644
index bb82da6..0000000
--- a/src/pages/stream.astro
+++ /dev/null
@@ -1,6 +0,0 @@
----
-import SiteLayout from "../components/SiteLayout.astro"
----
-
-<SiteLayout title="Stream | zeu.dev">
-</SiteLayout>
-- 
2.51.2