From fb721ad031dc2d31e9e4d7ea9983528a403302cc Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 18 Apr 2024 10:34:18 -0600
Subject: [PATCH] UI fixes (#11012)

* Get pip working correctly

* Fix system graphs click and hover states
---
 web/src/components/graph/SystemGraph.tsx | 19 +++++++++++++++++++
 web/src/views/live/LiveCameraView.tsx    | 12 ++++++------
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index 31d12ddf8..e96ce8235 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -90,6 +90,13 @@ export function ThresholdBarGraph({
           distributed: true,
         },
       },
+      states: {
+        active: {
+          filter: {
+            type: "none",
+          },
+        },
+      },
       tooltip: {
         theme: systemTheme || theme,
         y: {
@@ -192,6 +199,18 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
           horizontal: true,
         },
       },
+      states: {
+        active: {
+          filter: {
+            type: "none",
+          },
+        },
+        hover: {
+          filter: {
+            type: "none",
+          },
+        },
+      },
       tooltip: {
         enabled: false,
       },
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index ee71a687c..3bf140d15 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -127,22 +127,22 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
     if (mainRef.current == null) {
       return;
     }
-
     const fsListener = () => {
       setFullscreen(document.fullscreenElement != null);
     };
-    const pipListener = () => {
-      setPip(document.pictureInPictureElement != null);
-    };
     document.addEventListener("fullscreenchange", fsListener);
-    document.addEventListener("focusin", pipListener);
 
     return () => {
       document.removeEventListener("fullscreenchange", fsListener);
-      document.removeEventListener("focusin", pipListener);
     };
   }, [mainRef]);
 
+  useEffect(() => {
+    setPip(document.pictureInPictureElement != null);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [document.pictureInPictureElement]);
+
   // playback state
 
   const [audio, setAudio] = useState(false);