Edit stream info

src/element/new-stream.tsx

@@ -1,15 +1,16 @@
 import { useEffect, useState } from "react";
-import { EventPublisher } from "@snort/system";
+import { EventPublisher, NostrEvent } from "@snort/system";
 import { unixNow } from "@snort/shared";
 import "./new-stream.css";
 import AsyncButton from "./async-button";
 import { System } from "index";
+import { findTag } from "utils";
 
-export function NewStream() {
-    const [title, setTitle] = useState("");
-    const [summary, setSummary] = useState("");
-    const [image, setImage] = useState("");
-    const [stream, setStream] = useState("");
+export function NewStream({ ev, onFinish }: { ev?: NostrEvent, onFinish: () => void }) {
+    const [title, setTitle] = useState(findTag(ev, "title") ?? "");
+    const [summary, setSummary] = useState(findTag(ev, "summary") ?? "");
+    const [image, setImage] = useState(findTag(ev, "image") ?? "");
+    const [stream, setStream] = useState(findTag(ev, "streaming") ?? "");
     const [isValid, setIsValid] = useState(false);
 
     function validate() {
@@ -32,26 +33,27 @@ export function NewStream() {
     async function publishStream() {
         const pub = await EventPublisher.nip7();
         if (pub) {
-            const ev = await pub.generic(eb => {
+            const evNew = await pub.generic(eb => {
                 const now = unixNow();
+                const dTag = findTag(ev, "d") ?? now.toString();
                 return eb.kind(30_311)
-                    .tag(["d", now.toString()])
+                    .tag(["d", dTag])
                     .tag(["title", title])
                     .tag(["summary", summary])
                     .tag(["image", image])
                     .tag(["streaming", stream])
                     .tag(["status", "live"])
             });
-            console.debug(ev);
-            System.BroadcastEvent(ev);
+            console.debug(evNew);
+            System.BroadcastEvent(evNew);
+            onFinish();
         }
     }
 
     return <div className="new-stream">
         <h3>
-            New Stream
+            {ev ? "Edit Stream" : "New Stream"}
         </h3>
-
         <div>
             <p>
                 Title
@@ -89,7 +91,7 @@ export function NewStream() {
         </div>
         <div>
             <AsyncButton type="button" className="btn btn-primary" disabled={!isValid} onClick={publishStream}>
-                Start Stream
+                {ev ? "Save" : "Start Stream"}
             </AsyncButton>
         </div>
     </div>

src/index.css

@@ -72,6 +72,11 @@ a {
   color: white;
 }
 
+.btn-red {
+  background: rgb(143, 0, 0);
+  color: white;
+}
+
 .btn>span {
   display: flex;
   align-items: center;

src/pages/layout.tsx

@@ -63,7 +63,7 @@ export function LayoutPage() {
         </header>
         <Outlet />
         {newStream && <Modal onClose={() => setNewStream(false)} >
-            <NewStream />
+            <NewStream onFinish={() => navigate("/")} />
         </Modal>}
     </>
 }

src/pages/stream-page.css

@@ -54,6 +54,8 @@
 
 .live-page .actions {
   margin: 8px 0 0 0;
+  display: flex;
+  gap: 12px;
 }
 
 .live-page .btn.zap {

src/pages/stream-page.tsx

@@ -15,6 +15,7 @@ import { System } from "index";
 import Modal from "element/modal";
 import { SendZaps } from "element/send-zap";
 import { useUserProfile } from "@snort/system-react";
+import { NewStream } from "element/new-stream";
 
 export function StreamPage() {
   const params = useParams();
@@ -23,6 +24,7 @@ export function StreamPage() {
   const login = useLogin();
   const navigate = useNavigate();
   const [zap, setZap] = useState(false);
+  const [edit, setEdit] = useState(false);
   const profile = useUserProfile(System, thisEvent.data?.pubkey);
 
   const stream = findTag(thisEvent.data, "streaming");
@@ -62,11 +64,14 @@ export function StreamPage() {
                   </span>
                 ))}
             </div>
-            <div className="actions">
-              {isMine && <AsyncButton type="button" className="btn" onClick={deleteStream}>
+            {isMine && <div className="actions">
+              <button type="button" className="btn" onClick={() => setEdit(true)}>
+                Edit
+              </button>
+              <AsyncButton type="button" className="btn btn-red" onClick={deleteStream}>
                 Delete
-              </AsyncButton>}
-            </div>
+              </AsyncButton>
+            </div>}
           </div>
           <div>
             <div className="flex g24">
@@ -89,6 +94,9 @@ export function StreamPage() {
           targetName={getName(thisEvent.data.pubkey, profile)}
           onFinish={() => setZap(false)} />
       </Modal>}
+      {edit && thisEvent.data && <Modal onClose={() => setEdit(false)}>
+        <NewStream ev={thisEvent.data} onFinish={() => window.location.reload()} />
+      </Modal>}
     </div>
   );
 }