Updates:

- Clip page
- Reactions on notes / clips
- Summary clips / shares

src/element/clip.tsx

@@ -0,0 +1,37 @@
+import { NostrLink, TaggedNostrEvent } from "@snort/system";
+import { Profile } from "./profile";
+import { FormattedMessage } from "react-intl";
+import { extractStreamInfo, findTag } from "@/utils";
+import { useEventFeed } from "@snort/system-react";
+import EventReactions from "./event-reactions";
+import { Link } from "react-router-dom";
+
+export default function LiveStreamClip({ ev }: { ev: TaggedNostrEvent }) {
+  const src = findTag(ev, "r");
+  const streamTag = NostrLink.fromTags(ev.tags)?.[0];
+
+  const streamEvent = useEventFeed(streamTag);
+  const { title } = extractStreamInfo(streamEvent);
+  return (
+    <>
+      <h1 className="mb-2">
+        <FormattedMessage
+          defaultMessage="Clip from {title}"
+          values={{
+            title: (
+              <Link className="text-primary" to={`/${streamTag?.encode()}`}>
+                {title}
+              </Link>
+            ),
+          }}
+        />
+      </h1>
+      <div className="rounded-xl px-4 py-3 flex flex-col gap-2 border border-layer-1">
+        {ev.content && <h2>{ev.content}</h2>}
+        <Profile pubkey={ev.pubkey} avatarSize={40} />
+        <video src={src} controls />
+        <EventReactions ev={ev} />
+      </div>
+    </>
+  );
+}