feat: update stream status

src/element/new-stream.css

@@ -36,4 +36,17 @@
 
 .new-stream .btn:disabled {
     opacity: 0.3;
+}
+
+.new-stream .pill {
+    border-radius: 16px;
+    background: #262626;
+    padding: 8px 12px;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.new-stream .pill.active {
+    color: inherit;
+    background: #353535;
 }

src/element/new-stream.tsx

@@ -1,11 +1,19 @@
+import "./new-stream.css";
+
 import { useEffect, useState } from "react";
 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";
 
+enum StreamState {
+  Live = "live",
+  Ended = "ended",
+  Planned = "planned"
+}
+
 export function NewStream({
   ev,
   onFinish,
@@ -17,6 +25,7 @@ export function NewStream({
   const [summary, setSummary] = useState(findTag(ev, "summary") ?? "");
   const [image, setImage] = useState(findTag(ev, "image") ?? "");
   const [stream, setStream] = useState(findTag(ev, "streaming") ?? "");
+  const [status, setStatus] = useState(findTag(ev, "status") ?? StreamState.Live);
   const [isValid, setIsValid] = useState(false);
 
   function validate() {
@@ -49,7 +58,7 @@ export function NewStream({
           .tag(["summary", summary])
           .tag(["image", image])
           .tag(["streaming", stream])
-          .tag(["status", "live"]);
+          .tag(["status", status]);
       });
       console.debug(evNew);
       System.BroadcastEvent(evNew);
@@ -105,6 +114,14 @@ export function NewStream({
         </div>
         <small>Stream type should be HLS</small>
       </div>
+      <div>
+        <p>Status</p>
+        <div className="flex g12">
+          {[StreamState.Live, StreamState.Planned, StreamState.Ended].map(v => <span className={`pill${status === v ? " active" : ""}`} onClick={() => setStatus(v)}>
+            {v}
+          </span>)}
+        </div>
+      </div>
       <div>
         <AsyncButton
           type="button"

src/element/video-tile.css

@@ -18,4 +18,5 @@
 .video-tile .pill {
     float: right;
     margin: 16px 20px 0 0;
+    text-transform: uppercase;
 }

src/pages/stream-page.css

@@ -30,6 +30,7 @@
 
 .live-page .pill.live {
   color: inherit;
+  text-transform: uppercase;
 }
 
 .live-page .info {