feat: clip title

src/element/clip-button.tsx

@@ -23,6 +23,7 @@ export function ClipButton({ ev }: { ev: TaggedNostrEvent }) {
   const [start, setStart] = useState(0);
   const [length, setLength] = useState(0.1);
   const [clipLength, setClipLength] = useState(0);
+  const [title, setTitle] = useState("");
 
   const publisher = login?.publisher();
 
@@ -68,6 +69,7 @@ export function ClipButton({ ev }: { ev: TaggedNostrEvent }) {
         .kind(LIVE_STREAM_CLIP)
         .tag(unwrap(NostrLink.fromEvent(ev).toEventTag("root")))
         .tag(["r", newClip.url])
+        .tag(["title", title])
         .tag(["alt", `Live stream clip created on https://zap.stream\n${newClip.url}`]);
     });
     console.debug(ee);
@@ -104,6 +106,14 @@ export function ClipButton({ ev }: { ev: TaggedNostrEvent }) {
                 setOffset={setStart}
                 setLength={setLength}
               />
+              <div className="flex flex-col gap-1">
+                <small>
+                  <FormattedMessage defaultMessage="Clip title" id="YwzT/0" />
+                </small>
+                <div className="paper">
+                  <input type="text" value={title} onChange={e => setTitle(e.target.value)} placeholder="Epic combo!" />
+                </div>
+              </div>
               <AsyncButton onClick={saveClip}>
                 <FormattedMessage defaultMessage="Publish Clip" id="jJLRgo" />
               </AsyncButton>

src/element/live-chat.tsx

@@ -269,10 +269,11 @@ export function ChatRaid({ link, ev }: { link: NostrLink; ev: TaggedNostrEvent }
 
 function ChatClip({ ev }: { ev: TaggedNostrEvent }) {
   const profile = useUserProfile(ev.pubkey);
-  const rTag = useMemo(() => findTag(ev, "r"), [ev]);
+  const rTag = findTag(ev, "r");
+  const title = findTag(ev, "title");
   return (
-    <div className="px-3 py-2 text-center rounded-xl bg-primary uppercase pointer font-bold flex flex-col gap-2">
+    <div className="px-3 py-2 text-center rounded-xl bg-primary pointer flex flex-col gap-2">
-      <div>
+      <div className="font-bold uppercase">
         <FormattedMessage
           defaultMessage="{name} created a clip"
           id="BD0vyn"
@@ -281,6 +282,7 @@ function ChatClip({ ev }: { ev: TaggedNostrEvent }) {
           }}
         />
       </div>
+      <div>{title}</div>
       {rTag && <video src={rTag} controls playsInline={true} muted={true} />}
     </div>
   );