From 8e9e03a9362768c9df8a3f79951a686feaada6db Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 12 Feb 2024 14:30:19 -0700
Subject: [PATCH] Only disconnect instead of full remove

---
 web/src/components/player/LivePlayer.tsx |  6 +++---
 web/src/components/player/MsePlayer.tsx  | 20 ++++++++++++--------
 web/src/pages/Live.tsx                   |  2 +-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index c190fe9d1..f6f9c535f 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/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>
-
-      {(showStillWithoutActivity == false || cameraActive) && player}
+      {player}
 
       <div
         className={`absolute left-0 top-0 right-0 bottom-0 w-full ${
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index ebdf09b6f..c4fad17f2 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/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
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index c554b58ee..0812e7a4e 100644
--- a/web/src/pages/Live.tsx
+++ b/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");
   }, []);