UI fixes (#11012)

* Get pip working correctly

* Fix system graphs click and hover states

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,
       },

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);