Small improvements

src/element/live-chat.tsx

@@ -89,7 +89,12 @@ export function LiveChat({
     .filter((z) => z && z.valid);
 
   const goalZaps = feed.zaps
-    .filter((ev) => (goal ? ev.created_at > goal.created_at && ev.tags.some(t => t[0] === "e" && t[1] === goal.id) : false))
+    .filter((ev) =>
+      goal
+        ? ev.created_at > goal.created_at &&
+          ev.tags.some((t) => t[0] === "e" && t[1] === goal.id)
+        : false
+    )
     .map((ev) => parseZap(ev, System.ProfileLoader.Cache))
     .filter((z) => z && z.valid);
 
@@ -116,14 +121,11 @@ export function LiveChat({
       {(options?.showHeader ?? true) && (
         <div className="header">
           <h2 className="title">Stream Chat</h2>
-          <a
-            href={`/chat/${naddr}`}
-            className="popout-link"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Icon name="link" size={32} />
-          </a>
+          <Icon
+            name="link"
+            size={32}
+            onClick={() => window.open(`/chat/${naddr}?chat=true`, "_blank", "popup,width=400,height=800")}
+          />
         </div>
       )}
       {zaps.length > 0 && (
@@ -132,7 +134,7 @@ export function LiveChat({
           <div className="top-zappers-container">
             <TopZappers zaps={zaps} />
           </div>
-          {goal && <Goal link={link} ev={goal} zaps={goalZaps} />}
+          {goal && <Goal ev={goal} zaps={goalZaps} />}
           {login?.pubkey === streamer && <NewGoalDialog link={link} />}
         </div>
       )}

src/pages/chat-popout.tsx

@@ -9,13 +9,14 @@ export function ChatPopout() {
   const link = parseNostrLink(params.id!);
   const { data: ev } = useEventFeed(link, true);
 
+  const chat = new URL(window.location.href).searchParams.get("chat");
   return (
     <div className="popout-chat">
       <LiveChat
         ev={ev}
         link={link}
         options={{
-          canWrite: false,
+          canWrite: Boolean(chat),
           showHeader: false,
         }}
       />

src/pages/layout.tsx

@@ -2,6 +2,7 @@ import "./layout.css";
 import { useState } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { Outlet, useNavigate, useLocation, Link } from "react-router-dom";
+import { Helmet } from "react-helmet";
 
 import { Icon } from "element/icon";
 import { useLogin } from "hooks/login";
@@ -95,6 +96,9 @@ export function LayoutPage() {
           : "page"
       }
     >
+      <Helmet>
+        <title>Home - zap.stream</title>
+      </Helmet>
       <header>
         <div className="logo" onClick={() => navigate("/")}></div>
         <div className="paper">

src/pages/stream-page.tsx

@@ -1,6 +1,7 @@
 import "./stream-page.css";
 import { parseNostrLink, TaggedRawEvent } from "@snort/system";
 import { useNavigate, useParams } from "react-router-dom";
+import { Helmet } from "react-helmet";
 
 import useEventFeed from "hooks/event-feed";
 import { LiveVideoPlayer } from "element/live-video-player";
@@ -118,8 +119,30 @@ export function StreamPage() {
   const host = getHost(ev);
   const goal = useZapGoal(host, link, true);
 
+  const title = findTag(ev, "title");
+  const summary = findTag(ev, "summary");
+  const image = findTag(ev, "image");
+  const tags = ev?.tags.filter((a) => a[0] === "t").map((a) => a[1]) ?? [];
+
+  const descriptionContent = [
+    title,
+    (summary?.length ?? 0) > 0 ? summary : "Nostr live streaming",
+    ...tags,
+  ].join(", ");
   return (
     <>
+      <Helmet>
+        <title>{`${title} - zap.stream`}</title>
+        <meta name="description" content={descriptionContent} />
+        <meta
+          property="og:url"
+          content={`https://${window.location.host}/${link.encode()}`}
+        />
+        <meta property="og:type" content="video" />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={descriptionContent} />
+        <meta property="og:image" content={image ?? ""} />
+      </Helmet>
       <VideoPlayer ev={ev} />
       <ProfileInfo ev={ev} goal={goal} />
       <LiveChat link={link} ev={ev} goal={goal} />