From ff849b6f7d363bbf26b74311554a0c7f5aa84d94 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 2 Apr 2024 08:15:24 -0600
Subject: [PATCH] Don't stop mse when pip is enabled and not visible

---
 web/src/components/player/MsePlayer.tsx | 45 ++++++++++---------------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 7c88780a8..ecc4a7762 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -33,8 +33,7 @@ function MSEPlayer({
     "opus", // OPUS Chrome, Firefox
   ];
 
-  const visibilityThreshold: number = 0;
-  const visibilityCheck: boolean = true;
+  const visibilityCheck: boolean = !pip;
 
   const [wsState, setWsState] = useState<number>(WebSocket.CLOSED);
 
@@ -235,6 +234,22 @@ function MSEPlayer({
     // @ts-expect-error for typing
     msRef.current = new MediaSourceConstructor();
 
+    onConnect();
+
+    return () => {
+      onDisconnect();
+    };
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playbackEnabled, onDisconnect, onConnect]);
+
+  // check visibility
+
+  useEffect(() => {
+    if (!playbackEnabled) {
+      return;
+    }
+
     if ("hidden" in document && visibilityCheck) {
       document.addEventListener("visibilitychange", () => {
         if (document.hidden) {
@@ -244,31 +259,7 @@ function MSEPlayer({
         }
       });
     }
-
-    if ("IntersectionObserver" in window && visibilityThreshold) {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (!entry.isIntersecting) {
-              onDisconnect();
-            } else if (videoRef.current?.isConnected) {
-              onConnect();
-            }
-          });
-        },
-        { threshold: visibilityThreshold },
-      );
-      observer.observe(videoRef.current!);
-    }
-
-    onConnect();
-
-    return () => {
-      onDisconnect();
-    };
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playbackEnabled, onDisconnect, onConnect]);
+  }, [playbackEnabled, visibilityCheck, onConnect, onDisconnect]);
 
   // control pip