NIP-102 demo

packages/app/src/Element/LiveEvent.tsx

@@ -0,0 +1,21 @@
+import { NostrEvent } from "@snort/system";
+import { findTag } from "SnortUtils";
+import { useEffect, useRef } from "react";
+import Hls from "hls.js";
+
+export function LiveEvent({ ev }: { ev: NostrEvent }) {
+  const video = useRef<HTMLVideoElement>(null);
+  useEffect(() => {
+    const stream = findTag(ev, "streaming");
+    if (stream && video.current && !video.current.src && Hls.isSupported()) {
+      const hls = new Hls();
+      hls.loadSource(stream);
+      hls.attachMedia(video.current);
+    }
+  }, [video, ev]);
+  return (
+    <div>
+      <video ref={video} controls={true} autoPlay={true} muted={true} />
+    </div>
+  );
+}

packages/app/src/Element/Note.tsx

@@ -32,6 +32,7 @@ import { setBookmarked, setPinned } from "Login";
 import { NostrFileElement } from "Element/NostrFileHeader";
 import ZapstrEmbed from "Element/ZapstrEmbed";
 import PubkeyList from "Element/PubkeyList";
+import { LiveEvent } from "Element/LiveEvent";
 
 import messages from "./messages";
 
@@ -86,6 +87,9 @@ export default function Note(props: NoteProps) {
   if (ev.kind === EventKind.PubkeyLists) {
     return <PubkeyList ev={ev} className={className} />;
   }
+  if (ev.kind === EventKind.LiveEvent) {
+    return <LiveEvent ev={ev} />;
+  }
 
   const baseClassName = `note card${className ? ` ${className}` : ""}`;
   const navigate = useNavigate();