Show video player for .m3u8 links

packages/app/src/Element/LiveEvent.tsx

@@ -1,21 +1,11 @@
 import { NostrEvent } from "@snort/system";
 import { findTag } from "SnortUtils";
-import { useEffect, useRef } from "react";
-import Hls from "hls.js";
+import { LiveVideoPlayer } from "Element/LiveVideoPlayer";
 
 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 className="w-max">
-      <video className="w-max" ref={video} controls={true} />
-    </div>
-  );
+  const stream = findTag(ev, "streaming");
+  if (stream) {
+    return <LiveVideoPlayer src={stream} />;
+  }
+  return null;
 }

packages/app/src/Element/LiveVideoPlayer.tsx

@@ -0,0 +1,18 @@
+import Hls from "hls.js";
+import { HTMLProps, useEffect, useRef } from "react";
+
+export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement>) {
+  const video = useRef<HTMLVideoElement>(null);
+  useEffect(() => {
+    if (props.src && video.current && !video.current.src && Hls.isSupported()) {
+      const hls = new Hls();
+      hls.loadSource(props.src);
+      hls.attachMedia(video.current);
+    }
+  }, [video, props]);
+  return (
+    <div className="w-max">
+      <video className="w-max" ref={video} controls={true} />
+    </div>
+  );
+}

packages/app/src/Element/MediaElement.tsx

@@ -12,6 +12,7 @@ import { useWallet } from "Wallet";
 import { PaymentsCache } from "Cache/PaymentsCache";
 import { Payment } from "Db";
 import PageSpinner from "Element/PageSpinner";
+import { LiveVideoPlayer } from "Element/LiveVideoPlayer";
 /*
 [
   "imeta",
@@ -172,11 +173,10 @@ export function MediaElement(props: MediaElementProps) {
   } else if (props.mime.startsWith("audio/")) {
     return <audio key={props.url} src={url} controls onError={() => probeFor402()} />;
   } else if (props.mime.startsWith("video/")) {
-    return (
-      <SpotlightMedia>
-        <video key={props.url} src={url} controls onError={() => probeFor402()} />
-      </SpotlightMedia>
-    );
+    if (props.url.endsWith(".m3u8")) {
+      return <LiveVideoPlayer src={props.url} />;
+    }
+    return <video key={props.url} src={url} controls onError={() => probeFor402()} />;
   } else {
     return (
       <a

packages/app/src/Element/RevealMedia.tsx

@@ -41,6 +41,7 @@ export default function RevealMedia(props: RevealMediaProps) {
       case "avi":
       case "m4v":
       case "webm":
+      case "m3u8":
         return "video";
       default:
         return "unknown";