Only disconnect instead of full remove

web/src/components/player/LivePlayer.tsx

@@ -63,7 +63,7 @@ export default function LivePlayer({
 
   const stillReloadInterval = useMemo(() => {
     if (!windowVisible) {
-      return -1;  // no reason to update the image when the window is not visible
+      return -1; // no reason to update the image when the window is not visible
     }
 
     if (liveReady) {
@@ -96,6 +96,7 @@ export default function LivePlayer({
         <MSEPlayer
           className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
           camera={cameraConfig.name}
+          playbackEnabled={cameraActive}
           onPlaying={() => setLiveReady(true)}
         />
       );
@@ -130,8 +131,7 @@ export default function LivePlayer({
     >
       <div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
       <div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
-
+      {player}
-      {(showStillWithoutActivity == false || cameraActive) && player}
 
       <div
         className={`absolute left-0 top-0 right-0 bottom-0 w-full ${

web/src/components/player/MsePlayer.tsx

@@ -4,10 +4,16 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 type MSEPlayerProps = {
   camera: string;
   className?: string;
+  playbackEnabled?: boolean;
   onPlaying?: () => void;
 };
 
-function MSEPlayer({ camera, className, onPlaying }: MSEPlayerProps) {
+function MSEPlayer({
+  camera,
+  className,
+  playbackEnabled = true,
+  onPlaying,
+}: MSEPlayerProps) {
   let connectTS: number = 0;
 
   const RECONNECT_TIMEOUT: number = 30000;
@@ -203,6 +209,10 @@ function MSEPlayer({ camera, className, onPlaying }: MSEPlayerProps) {
   };
 
   useEffect(() => {
+    if (!playbackEnabled) {
+      return;
+    }
+
     // iOS 17.1+ uses ManagedMediaSource
     const MediaSourceConstructor =
       "ManagedMediaSource" in window ? window.ManagedMediaSource : MediaSource;
@@ -236,18 +246,12 @@ function MSEPlayer({ camera, className, onPlaying }: MSEPlayerProps) {
       observer.observe(videoRef.current!);
     }
 
-    return () => {
-      onDisconnect();
-    };
-  }, [onDisconnect, onConnect]);
-
-  useEffect(() => {
     onConnect();
 
     return () => {
       onDisconnect();
     };
-  }, [wsURL]);
+  }, [playbackEnabled, onDisconnect, onConnect]);
 
   return (
     <video

web/src/pages/Live.tsx

@@ -64,7 +64,7 @@ function Live() {
       .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
   }, [config]);
 
-  const [windowVisible, setWindowVisible] = useState(false);
+  const [windowVisible, setWindowVisible] = useState(true);
   const visibilityListener = useCallback(() => {
     setWindowVisible(document.visibilityState == "visible");
   }, []);