Streamline live view (#9772)

* Break out live page * Improving layouts and add chip component * Improve default camera player sizing * Improve live updating * Cleanup and fit figma * Use fixed height * Masonry layout * Fix stuff * Don't force heights * Adjust scaling * Cleanup * remove sidebar (#9731) * remove sidebar * keep sidebar on mobile for now and add icons * Fix revalidation * Cleanup * Cleanup width * Add chips for activity on cameras * Remove dashboard from header * Use Inter font (#9735) * Show still image when no activity is occurring * remove unused search params * add playing check for webrtc * Don't use grid at all for single column * Fix height on mobile * a few style updates to better match figma (#9745) * Remove active objects when they become stationary * Move to sidebar only and make settings separate component * Fix layout * Animate visibility of chips * Sidebar is full screen * Fix tall aspect ratio cameras * Fix complicated aspect logic * remove * Adjust thumbnail aspect and add text * margin on single column layout * Smaller event thumb text * Simplify basic image view * Only show the red dot when camera is recording * Improve typing for camera toggles * animate chips with react-transition-group (#9763) * don't flash when going to still image * revalidate * tooltips and active tracking outline (#9766) * tooltips * fix tooltip provider and add active tracking outline * remove unused icon * remove figma comment * Get live mode working for jsmpeg * add small gradient below timeago on event thumbnails (#9767) * Create live mode hook and make sure jsmpeg can be used * Enforce env var * Use print * Remove unstable * Add tooltips to thumbnails * Put back vite * Format * Update web/src/components/player/JSMpegPlayer.tsx --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Co-authored-by: Blake Blackshear <blake@frigate.video>
2024-02-10 05:30:53 -07:00
parent f6a4c2a7b3
commit 64988c9be0
33 changed files with 1111 additions and 972 deletions
--- a/web/src/hooks/use-camera-live-mode.ts
+++ b/web/src/hooks/use-camera-live-mode.ts
@@ -0,0 +1,49 @@
+import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
+import { useMemo } from "react";
+import useSWR from "swr";
+import { usePersistence } from "./use-persistence";
+import { LivePlayerMode } from "@/types/live";
+
+export default function useCameraLiveMode(
+  cameraConfig: CameraConfig,
+  preferredMode?: string
+): LivePlayerMode {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const restreamEnabled = useMemo(() => {
+    if (!config) {
+      return false;
+    }
+
+    return (
+      cameraConfig &&
+      Object.keys(config.go2rtc.streams || {}).includes(
+        cameraConfig.live.stream_name
+      )
+    );
+  }, [config, cameraConfig]);
+  const defaultLiveMode = useMemo(() => {
+    if (config && cameraConfig) {
+      if (restreamEnabled) {
+        return cameraConfig.ui.live_mode || config?.ui.live_mode;
+      }
+
+      return "jsmpeg";
+    }
+
+    return undefined;
+  }, [cameraConfig, restreamEnabled]);
+  const [viewSource] = usePersistence(
+    `${cameraConfig.name}-source`,
+    defaultLiveMode
+  );
+
+  if (
+    restreamEnabled &&
+    (preferredMode == "mse" || preferredMode == "webrtc")
+  ) {
+    return preferredMode;
+  } else {
+    return viewSource;
+  }
+}