feat: mobile and tablet styles

src/element/live-video-player.tsx

@@ -3,16 +3,23 @@ import { HTMLProps, useEffect, useMemo, useRef, useState } from "react";
 
 export enum VideoStatus {
   Online = "online",
-  Offline = "offline"
+  Offline = "offline",
 }
 
-export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?: string }) {
+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()) {
+    if (
+      streamCached &&
+      video.current &&
+      !video.current.src &&
+      Hls.isSupported()
+    ) {
       try {
         const hls = new Hls();
         hls.loadSource(streamCached);
@@ -25,10 +32,10 @@ export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?:
             hls.detachMedia();
             setStatus(VideoStatus.Offline);
           }
-        })
+        });
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
           setStatus(VideoStatus.Online);
-        })
+        });
         return () => hls.destroy();
       } catch (e) {
         console.error(e);
@@ -37,9 +44,11 @@ export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?:
     }
   }, [video, streamCached]);
   return (
-    <div className={status}>
-      <div>{status}</div>
+    <>
+      <div className={status}>
+        <div>{status}</div>
+      </div>
       <video ref={video} {...props} controls={status === VideoStatus.Online} />
-    </div>
+    </>
   );
 }