Tag editor

This commit is contained in:
Kieran 2023-07-06 15:05:35 +01:00
parent 04975911cf
commit 2df3bbdccc
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
11 changed files with 66 additions and 17 deletions

View File

@ -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",

View File

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

View File

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

View File

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

View File

@ -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;
}

View File

@ -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"

View File

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

View File

@ -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 {

View File

@ -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;

View File

@ -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
});
}

View File

@ -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"