From 93d0ead54e45b38ffffd1903a33fb181d7cf55cd Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Sun, 25 Jun 2023 21:20:23 +0100
Subject: [PATCH] feat: update stream status

---
 src/element/new-stream.css | 13 +++++++++++++
 src/element/new-stream.tsx | 21 +++++++++++++++++++--
 src/element/video-tile.css |  1 +
 src/pages/stream-page.css  |  1 +
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/element/new-stream.css b/src/element/new-stream.css
index a0af867..e05814b 100644
--- a/src/element/new-stream.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/element/new-stream.tsx b/src/element/new-stream.tsx
index fbceec7..ae809f0 100644
--- a/src/element/new-stream.tsx
+++ b/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"
diff --git a/src/element/video-tile.css b/src/element/video-tile.css
index cadcfc0..eb40517 100644
--- a/src/element/video-tile.css
+++ b/src/element/video-tile.css
@@ -18,4 +18,5 @@
 .video-tile .pill {
     float: right;
     margin: 16px 20px 0 0;
+    text-transform: uppercase;
 }
\ No newline at end of file
diff --git a/src/pages/stream-page.css b/src/pages/stream-page.css
index 65c04df..d96cba9 100644
--- a/src/pages/stream-page.css
+++ b/src/pages/stream-page.css
@@ -30,6 +30,7 @@
 
 .live-page .pill.live {
   color: inherit;
+  text-transform: uppercase;
 }
 
 .live-page .info {