From 6c107883b57b8a9289e79673dd62607e316ac473 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 17 Jun 2024 14:54:14 -0600
Subject: [PATCH] Small jsmpeg and mse player fixes (#12032)

---
 web/src/components/player/JSMpegPlayer.tsx | 17 +++++------------
 web/src/components/player/MsePlayer.tsx    |  6 +++++-
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
index 91cd3e1c97..dfc56a6e0d 100644
--- a/web/src/components/player/JSMpegPlayer.tsx
+++ b/web/src/components/player/JSMpegPlayer.tsx
@@ -23,6 +23,7 @@ export default function JSMpegPlayer({
 }: JSMpegPlayerProps) {
   const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
   const playerRef = useRef<HTMLDivElement | null>(null);
+  const videoRef = useRef(null);
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
 
   const selectedContainerRef = useMemo(
@@ -86,7 +87,7 @@ export default function JSMpegPlayer({
       return;
     }
 
-    const video = new JSMpeg.VideoElement(
+    videoRef.current = new JSMpeg.VideoElement(
       playerRef.current,
       url,
       { canvas: `#${CSS.escape(uniqueId)}` },
@@ -99,17 +100,9 @@ export default function JSMpegPlayer({
         },
       },
     );
-
-    return () => {
-      if (playerRef.current) {
-        try {
-          video.destroy();
-          // eslint-disable-next-line no-empty
-        } catch (e) {}
-        playerRef.current = null;
-      }
-    };
-  }, [url, uniqueId, onPlaying]);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url, uniqueId]);
 
   return (
     <div className={className}>
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 80844e7495..33ebbccf29 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -260,10 +260,14 @@ function MSEPlayer({
 
     return () => {
       onDisconnect();
+      if (bufferTimeout) {
+        clearTimeout(bufferTimeout);
+        setBufferTimeout(undefined);
+      }
     };
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playbackEnabled, onDisconnect, onConnect]);
+  }, [playbackEnabled]);
 
   // check visibility