Tag editor

package.json

@@ -9,7 +9,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-tabs": "^1.0.4",
     "@react-hook/resize-observer": "^1.2.6",
-    "@snort/system-react": "^1.0.10",
+    "@snort/system-react": "^1.0.11",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -25,6 +25,7 @@
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.5.1",
     "react-router-dom": "^6.13.0",
+    "react-tag-input-component": "^2.0.2",
     "semantic-sdp": "^3.26.2",
     "usehooks-ts": "^2.9.1",
     "web-vitals": "^2.1.0",

public/tag_suggestions.json

@@ -0,0 +1,3 @@
+[
+    { "id": "nsfw", "text": "NSFW" }
+]

src/element/live-chat.css

@@ -94,7 +94,6 @@
 .live-chat .write-message input {
   background: unset;
   border: unset;
-  outline: unset;
   color: inherit;
   font: inherit;
   flex-grow: 1;

src/element/new-stream.css

@@ -27,7 +27,7 @@
 
 .new-stream div.paper {
     background: #262626;
-    height: 32px;
+    padding: 12px 16px;
 }
 
 .new-stream .btn:disabled {

src/element/stream-editor.css

@@ -0,0 +1,14 @@
+.rti--container {
+    background-color: unset !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    box-shadow: unset !important;
+}
+
+.rti--tag {
+    color: black !important;
+    padding: 4px 10px !important;
+    border-radius: 12px !important;
+    display: unset !important;
+}

src/element/stream-editor.tsx

@@ -1,10 +1,12 @@
+import "./stream-editor.css";
 import { useEffect, useState, useCallback } from "react";
 import { EventPublisher, NostrEvent } from "@snort/system";
 import { unixNow } from "@snort/shared";
+import { TagsInput } from "react-tag-input-component";
 
 import AsyncButton from "./async-button";
-import { StreamState, System } from "index";
-import { findTag } from "utils";
+import { StreamState } from "../index";
+import { findTag } from "../utils";
 
 export interface StreamEditorProps {
   ev?: NostrEvent;
@@ -27,6 +29,9 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
     findTag(ev, "status") ?? StreamState.Live
   );
   const [start, setStart] = useState(findTag(ev, "starts"));
+  const [tags, setTags] = useState(
+    ev?.tags.filter(a => a[0] === "t").map(a => a[1]) ?? []
+  );
   const [isValid, setIsValid] = useState(false);
 
   const validate = useCallback(() => {
@@ -65,6 +70,9 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
         if (status === StreamState.Ended) {
           eb.tag(["ends", ends]);
         }
+        for (const tx of tags) {
+          eb.tag(["t", tx.trim()]);
+        }
         return eb;
       });
       console.debug(evNew);
@@ -151,6 +159,18 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) {
             </div>
           </div>
         )}</>}
+      <div>
+        <p>Tags</p>
+        <div className="paper">
+          <TagsInput
+            value={tags}
+            onChange={setTags}
+            placeHolder="Music,DJ,English"
+            separators={["\n",","]}
+          />
+        </div>
+        <small>Stream type should be HLS</small>
+      </div>
       <div>
         <AsyncButton
           type="button"

src/element/video-tile.css

@@ -28,4 +28,8 @@
 
 .video-tile .pill-box .pill {
     width: fit-content;
+}
+
+.video-tile .pill-box .pill.viewers {
+    text-transform: lowercase;
 }

src/index.css

@@ -17,6 +17,10 @@ a {
   text-decoration: unset;
 }
 
+:focus-visible {
+  outline: none;
+}
+
 .flex {
   display: flex;
 }
@@ -96,7 +100,6 @@ input[type="text"], textarea, input[type="datetime-local"], input[type="password
   width: 100%;
   font-size: 16px;
   font-weight: 500;
-  outline: none;
 }
 
 div.paper {

src/pages/profile-page.css

@@ -163,7 +163,6 @@
   padding: 6px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
-  outline: none;
 }
 .tabs-content:focus {
   box-shadow: 0 0 0 2px black;

src/providers/nip103.ts

@@ -44,8 +44,9 @@ export class Nip103StreamProvider implements StreamProvider {
         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]);
         await this.#getJson("PATCH", "event", {
-            title, summary, image
+            title, summary, image, tags
         });
     }
 

yarn.lock

@@ -1532,19 +1532,19 @@
     dexie "^3.2.4"
     light-bolt11-decoder "^3.0.0"
 
-"@snort/system-react@^1.0.10":
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/@snort/system-react/-/system-react-1.0.10.tgz#72947af286602022dc468f7d04b01c7b18c14389"
-  integrity sha512-mBgHVmcrt9Sblm3/IN1vHLgoyQGH1xOpYg+v2+ARlFVOUdvkcQTxzQzt4sxWsdF4C63WFiju9hAahW/Dg4UhEw==
+"@snort/system-react@^1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@snort/system-react/-/system-react-1.0.11.tgz#ab17de07e061eee6f6ff76083650c412b35703fe"
+  integrity sha512-eNjVMYWAA0kLpnpaNL/xH3sL+CrTVuGfzBsF/F2JHLqcmR3LASilZMBw6jEwyH/B+LKN7NCaei8PrqzWEU084Q==
   dependencies:
     "@snort/shared" "^1.0.4"
-    "@snort/system" "^1.0.15"
+    "@snort/system" "^1.0.16"
     react "^18.2.0"
 
-"@snort/system@^1.0.15":
-  version "1.0.15"
-  resolved "https://registry.yarnpkg.com/@snort/system/-/system-1.0.15.tgz#845a2aaafcb75e469e7836c143f217404172cee0"
-  integrity sha512-mVXj2ZCS0T/m3EPqn0ICWrp96XUlhBCT4ci1CLzmtT8zXojAE/2eONv4ZR/OzGrvftUIBqarfpFbtJ7q1vohSg==
+"@snort/system@^1.0.16":
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/@snort/system/-/system-1.0.16.tgz#3acdb873fd9e36de05315a331b98c25cd861a36e"
+  integrity sha512-eMATT2yNwkNFOJiB11bW2r4O+0DjYpUyAn+eeGDGk0LY3s2hDCw7VhZGShNk7Pbeb9VrvlXJtAT7f5YS2OBjnQ==
   dependencies:
     "@noble/curves" "^1.0.0"
     "@scure/base" "^1.1.1"
@@ -5419,6 +5419,11 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-tag-input-component@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-tag-input-component/-/react-tag-input-component-2.0.2.tgz#f62f013c6a535141dd1c6c3a88858223170150f1"
+  integrity sha512-dydI9luVwwv9vrjE5u1TTnkcOVkOVL6mhFti8r6hLi78V2F2EKWQOLptURz79UYbDHLSk6tnbvGl8FE+sMpADg==
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"