From e07fa411b6ae8ad75c3f81c7890a6c0d0dc334ce Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Sat, 17 Jun 2023 12:53:38 +0100
Subject: [PATCH] NIP-102 demo

---
 README.md                              |  1 +
 packages/app/package.json              |  1 +
 packages/app/src/Element/LiveEvent.tsx | 21 +++++++++++++++++++++
 packages/app/src/Element/Note.tsx      |  4 ++++
 packages/system/src/EventKind.ts       |  1 +
 yarn.lock                              |  5 +++++
 6 files changed, 33 insertions(+)
 create mode 100644 packages/app/src/Element/LiveEvent.tsx

diff --git a/README.md b/README.md
index 119b21720..d38ac3609 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,7 @@ Snort supports the following NIP's:
 - [x] NIP-59: Gift Wrap
 - [x] NIP-65: Relay List Metadata
 - [ ] NIP-78: App specific data
+- [x] NIP-102: Live Events
 
 ### Running
 
diff --git a/packages/app/package.json b/packages/app/package.json
index 6ac6db76b..063137399 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -16,6 +16,7 @@
     "debug": "^4.3.4",
     "dexie": "^3.2.4",
     "dns-over-http-resolver": "^2.1.1",
+    "hls.js": "^1.4.6",
     "light-bolt11-decoder": "^2.1.0",
     "qr-code-styling": "^1.6.0-rc.1",
     "react": "^18.2.0",
diff --git a/packages/app/src/Element/LiveEvent.tsx b/packages/app/src/Element/LiveEvent.tsx
new file mode 100644
index 000000000..d13354a0f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/app/src/Element/Note.tsx b/packages/app/src/Element/Note.tsx
index a5530c3de..c47911fcc 100644
--- a/packages/app/src/Element/Note.tsx
+++ b/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();
diff --git a/packages/system/src/EventKind.ts b/packages/system/src/EventKind.ts
index 263de665f..3baef1ef0 100644
--- a/packages/system/src/EventKind.ts
+++ b/packages/system/src/EventKind.ts
@@ -21,6 +21,7 @@ enum EventKind {
   TagLists = 30002, // NIP-51c
   Badge = 30009, // NIP-58
   ProfileBadges = 30008, // NIP-58
+  LiveEvent = 30311, // NIP-102
   ZapstrTrack = 31337,
   ZapRequest = 9734, // NIP 57
   ZapReceipt = 9735, // NIP 57
diff --git a/yarn.lock b/yarn.lock
index d05a5285e..67092da74 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5769,6 +5769,11 @@ he@1.2.0, he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hls.js@^1.4.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.4.6.tgz#928752ef7286259aff8f372d4fa179bf932cac78"
+  integrity sha512-lGv9QfjfjfuGQfLa/28vDFlYWb9Myq5QuvM9qWp5DyElp8jTGMNodTdeAjOLzaA/fN4XHeG+HhTkRGzntwuDZw==
+
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"