forked from Kieran/zap.stream
Show offline on video player
This commit is contained in:
parent
b4f18ba230
commit
abad4568da
@ -1,9 +1,15 @@
|
||||
import Hls from "hls.js";
|
||||
import { HTMLProps, useEffect, useMemo, useRef } from "react";
|
||||
import { HTMLProps, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
export enum VideoStatus {
|
||||
Online = "online",
|
||||
Offline = "offline"
|
||||
}
|
||||
|
||||
export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?: string }) {
|
||||
const video = useRef<HTMLVideoElement>(null);
|
||||
const streamCached = useMemo(() => props.stream, [props.stream]);
|
||||
const [status, setStatus] = useState<VideoStatus>();
|
||||
|
||||
useEffect(() => {
|
||||
if (streamCached && video.current && !video.current.src && Hls.isSupported()) {
|
||||
@ -13,17 +19,22 @@ export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?:
|
||||
hls.on(Hls.Events.ERROR, (event, data) => {
|
||||
console.debug(event, data);
|
||||
const errorType = data.type;
|
||||
if(errorType === Hls.ErrorTypes.NETWORK_ERROR) {
|
||||
if (errorType === Hls.ErrorTypes.NETWORK_ERROR) {
|
||||
hls.stopLoad();
|
||||
hls.detachMedia();
|
||||
setStatus(VideoStatus.Offline);
|
||||
}
|
||||
})
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
setStatus(VideoStatus.Online);
|
||||
})
|
||||
return () => hls.destroy();
|
||||
}
|
||||
}, [video, streamCached]);
|
||||
return (
|
||||
<div>
|
||||
<video ref={video} {...props} controls={true} />
|
||||
<div className={status}>
|
||||
<div>{status}</div>
|
||||
<video ref={video} {...props} controls={status === VideoStatus.Online} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -63,4 +63,23 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.live-page .offline {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.live-page .offline>div {
|
||||
position: fixed;
|
||||
text-transform: uppercase;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.live-page .offline>video {
|
||||
z-index: -1;
|
||||
position: relative;
|
||||
}
|
Loading…
Reference in New Issue
Block a user