Show offline on video player

src/element/live-video-player.tsx

@@ -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>
+    <div className={status}>
-      <video ref={video} {...props} controls={true} />
+      <div>{status}</div>
+      <video ref={video} {...props} controls={status === VideoStatus.Online} />
     </div>
   );
 }

src/pages/stream-page.css

@@ -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;
 }