Live player fixes (#13143)

* Jump to live when exceeding buffer time threshold in MSE player

* clean up

* Try adjusting playback rate instead of jumping to live

* clean up

* fallback to webrtc if enabled before jsmpeg

* baseline

* clean up

* remove comments

* adaptive playback rate and intelligent switching improvements

* increase logging and reset live mode after camera is no longer active on dashboard only

* jump to live on safari/iOS

* clean up

* clean up

* refactor camera live mode hook

* remove key listener

* resolve conflicts

web/src/views/live/LiveDashboardView.tsx

@@ -28,8 +28,9 @@ import DraggableGridLayout from "./DraggableGridLayout";
 import { IoClose } from "react-icons/io5";
 import { LuLayoutDashboard } from "react-icons/lu";
 import { cn } from "@/lib/utils";
-import { LivePlayerError, LivePlayerMode } from "@/types/live";
+import { LivePlayerError } from "@/types/live";
 import { FaCompress, FaExpand } from "react-icons/fa";
+import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 import { useResizeObserver } from "@/hooks/resize-observer";
 
 type LiveDashboardViewProps = {
@@ -129,9 +130,6 @@ export default function LiveDashboardView({
   // camera live views
 
   const [autoLiveView] = usePersistence("autoLiveView", true);
-  const [preferredLiveModes, setPreferredLiveModes] = useState<{
-    [key: string]: LivePlayerMode;
-  }>({});
 
   const [{ height: containerHeight }] = useResizeObserver(containerRef);
 
@@ -186,32 +184,8 @@ export default function LiveDashboardView({
     };
   }, []);
 
-  useEffect(() => {
-    if (!cameras) return;
-
-    const mseSupported =
-      "MediaSource" in window || "ManagedMediaSource" in window;
-
-    const newPreferredLiveModes = cameras.reduce(
-      (acc, camera) => {
-        const isRestreamed =
-          config &&
-          Object.keys(config.go2rtc.streams || {}).includes(
-            camera.live.stream_name,
-          );
-
-        if (!mseSupported) {
-          acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
-        } else {
-          acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
-        }
-        return acc;
-      },
-      {} as { [key: string]: LivePlayerMode },
-    );
-
-    setPreferredLiveModes(newPreferredLiveModes);
-  }, [cameras, config, windowVisible]);
+  const { preferredLiveModes, setPreferredLiveModes, resetPreferredLiveMode } =
+    useCameraLiveMode(cameras, windowVisible);
 
   const cameraRef = useCallback(
     (node: HTMLElement | null) => {
@@ -381,6 +355,7 @@ export default function LiveDashboardView({
                   autoLive={autoLiveView}
                   onClick={() => onSelectCamera(camera.name)}
                   onError={(e) => handleError(camera.name, e)}
+                  onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
                 />
               );
             })}