From c850604931dd24b805137011985e91033e0b8066 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 15 Jul 2024 10:38:59 -0500
Subject: [PATCH] Fix flashing of previous still image when live player stops
 (#12458)

---
 web/src/components/player/LivePlayer.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 5d3129ffe..1ff5c5f37 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -79,7 +79,7 @@ export default function LivePlayer({
     }
 
     if (!cameraActive) {
-      setLiveReady(false);
+      setTimeout(() => setLiveReady(false), 500);
     }
     // live mode won't change
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -92,6 +92,10 @@ export default function LivePlayer({
       return -1; // no reason to update the image when the window is not visible
     }
 
+    if (liveReady && !cameraActive) {
+      return 300;
+    }
+
     if (liveReady) {
       return 60000;
     }
@@ -113,6 +117,7 @@ export default function LivePlayer({
     activeTracking,
     offline,
     windowVisible,
+    cameraActive,
   ]);
 
   useEffect(() => {
@@ -135,7 +140,7 @@ export default function LivePlayer({
       <WebRtcPlayer
         className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
         camera={cameraConfig.live.stream_name}
-        playbackEnabled={cameraActive}
+        playbackEnabled={cameraActive || liveReady}
         audioEnabled={playAudio}
         microphoneEnabled={micEnabled}
         iOSCompatFullScreen={iOSCompatFullScreen}
@@ -150,7 +155,7 @@ export default function LivePlayer({
         <MSEPlayer
           className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
           camera={cameraConfig.live.stream_name}
-          playbackEnabled={cameraActive}
+          playbackEnabled={cameraActive || liveReady}
           audioEnabled={playAudio}
           onPlaying={playerIsPlaying}
           pip={pip}
@@ -166,14 +171,16 @@ export default function LivePlayer({
       );
     }
   } else if (liveMode == "jsmpeg") {
-    if (cameraActive || !showStillWithoutActivity) {
+    if (cameraActive || !showStillWithoutActivity || liveReady) {
       player = (
         <JSMpegPlayer
           className="flex justify-center overflow-hidden rounded-lg md:rounded-2xl"
           camera={cameraConfig.name}
           width={cameraConfig.detect.width}
           height={cameraConfig.detect.height}
-          playbackEnabled={cameraActive || !showStillWithoutActivity}
+          playbackEnabled={
+            cameraActive || !showStillWithoutActivity || liveReady
+          }
           containerRef={containerRef ?? internalContainerRef}
           onPlaying={playerIsPlaying}
         />