Show video player for .m3u8 links
This commit is contained in:
parent
206aaca7b4
commit
19a2589e77
@ -1,21 +1,11 @@
|
|||||||
import { NostrEvent } from "@snort/system";
|
import { NostrEvent } from "@snort/system";
|
||||||
import { findTag } from "SnortUtils";
|
import { findTag } from "SnortUtils";
|
||||||
import { useEffect, useRef } from "react";
|
import { LiveVideoPlayer } from "Element/LiveVideoPlayer";
|
||||||
import Hls from "hls.js";
|
|
||||||
|
|
||||||
export function LiveEvent({ ev }: { ev: NostrEvent }) {
|
export function LiveEvent({ ev }: { ev: NostrEvent }) {
|
||||||
const video = useRef<HTMLVideoElement>(null);
|
|
||||||
useEffect(() => {
|
|
||||||
const stream = findTag(ev, "streaming");
|
const stream = findTag(ev, "streaming");
|
||||||
if (stream && video.current && !video.current.src && Hls.isSupported()) {
|
if (stream) {
|
||||||
const hls = new Hls();
|
return <LiveVideoPlayer src={stream} />;
|
||||||
hls.loadSource(stream);
|
|
||||||
hls.attachMedia(video.current);
|
|
||||||
}
|
}
|
||||||
}, [video, ev]);
|
return null;
|
||||||
return (
|
|
||||||
<div className="w-max">
|
|
||||||
<video className="w-max" ref={video} controls={true} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
18
packages/app/src/Element/LiveVideoPlayer.tsx
Normal file
18
packages/app/src/Element/LiveVideoPlayer.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
@ -12,6 +12,7 @@ import { useWallet } from "Wallet";
|
|||||||
import { PaymentsCache } from "Cache/PaymentsCache";
|
import { PaymentsCache } from "Cache/PaymentsCache";
|
||||||
import { Payment } from "Db";
|
import { Payment } from "Db";
|
||||||
import PageSpinner from "Element/PageSpinner";
|
import PageSpinner from "Element/PageSpinner";
|
||||||
|
import { LiveVideoPlayer } from "Element/LiveVideoPlayer";
|
||||||
/*
|
/*
|
||||||
[
|
[
|
||||||
"imeta",
|
"imeta",
|
||||||
@ -172,11 +173,10 @@ export function MediaElement(props: MediaElementProps) {
|
|||||||
} else if (props.mime.startsWith("audio/")) {
|
} else if (props.mime.startsWith("audio/")) {
|
||||||
return <audio key={props.url} src={url} controls onError={() => probeFor402()} />;
|
return <audio key={props.url} src={url} controls onError={() => probeFor402()} />;
|
||||||
} else if (props.mime.startsWith("video/")) {
|
} else if (props.mime.startsWith("video/")) {
|
||||||
return (
|
if (props.url.endsWith(".m3u8")) {
|
||||||
<SpotlightMedia>
|
return <LiveVideoPlayer src={props.url} />;
|
||||||
<video key={props.url} src={url} controls onError={() => probeFor402()} />
|
}
|
||||||
</SpotlightMedia>
|
return <video key={props.url} src={url} controls onError={() => probeFor402()} />;
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
|
@ -41,6 +41,7 @@ export default function RevealMedia(props: RevealMediaProps) {
|
|||||||
case "avi":
|
case "avi":
|
||||||
case "m4v":
|
case "m4v":
|
||||||
case "webm":
|
case "webm":
|
||||||
|
case "m3u8":
|
||||||
return "video";
|
return "video";
|
||||||
default:
|
default:
|
||||||
return "unknown";
|
return "unknown";
|
||||||
|
Loading…
Reference in New Issue
Block a user