Get live camera view working

web/src/components/player/LivePlayer.tsx

@@ -20,6 +20,7 @@ type LivePlayerProps = {
   preferredLiveMode?: LivePlayerMode;
   showStillWithoutActivity?: boolean;
   windowVisible?: boolean;
+  onClick?: () => void;
 };
 
 export default function LivePlayer({
@@ -28,6 +29,7 @@ export default function LivePlayer({
   preferredLiveMode,
   showStillWithoutActivity = true,
   windowVisible = true,
+  onClick,
 }: LivePlayerProps) {
   // camera activity
 
@@ -35,8 +37,10 @@ export default function LivePlayer({
     useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
-    () => windowVisible && (activeMotion || activeTracking),
-    [activeMotion, activeTracking, windowVisible],
+    () =>
+      !showStillWithoutActivity ||
+      (windowVisible && (activeMotion || activeTracking)),
+    [activeMotion, activeTracking, showStillWithoutActivity, windowVisible],
   );
 
   // camera live state
@@ -127,11 +131,12 @@ export default function LivePlayer({
 
   return (
     <div
-      className={`relative flex justify-center w-full outline ${
+      className={`relative flex justify-center w-full outline cursor-pointer ${
         activeTracking
           ? "outline-severity_alert outline-1 rounded-2xl shadow-[0_0_6px_2px] shadow-severity_alert"
           : "outline-0 outline-background"
       } transition-all duration-500 ${className}`}
+      onClick={onClick}
     >
       <div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
       <div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>

web/src/pages/Live.tsx

@@ -5,9 +5,12 @@ import LivePlayer from "@/components/player/LivePlayer";
 import { Button } from "@/components/ui/button";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import useOverlayState from "@/hooks/use-overlay-state";
 import { usePersistence } from "@/hooks/use-persistence";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment } from "@/types/review";
+import LiveCameraView from "@/views/live/LiveCameraView";
+import LiveDashboardView from "@/views/live/LiveDashboardView";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { isDesktop, isMobile, isSafari } from "react-device-detect";
 import { CiGrid2H, CiGrid31 } from "react-icons/ci";
@@ -15,45 +18,7 @@ import useSWR from "swr";
 
 function Live() {
   const { data: config } = useSWR<FrigateConfig>("config");
-
-  // layout
-
-  const [layout, setLayout] = usePersistence<"grid" | "list">(
-    "live-layout",
-    isDesktop ? "grid" : "list",
-  );
-
-  // recent events
-  const { payload: eventUpdate } = useFrigateReviews();
-  const { data: allEvents, mutate: updateEvents } = useSWR<ReviewSegment[]>([
-    "review",
-    { limit: 10, severity: "alert" },
-  ]);
-
-  useEffect(() => {
-    if (!eventUpdate) {
-      return;
-    }
-
-    // if event is ended and was saved, update events list
-    if (eventUpdate.type == "end" && eventUpdate.review.severity == "alert") {
-      updateEvents();
-      return;
-    }
-  }, [eventUpdate, updateEvents]);
-
-  const events = useMemo(() => {
-    if (!allEvents) {
-      return [];
-    }
-
-    const date = new Date();
-    date.setHours(date.getHours() - 1);
-    const cutoff = date.getTime() / 1000;
-    return allEvents.filter((event) => event.start_time > cutoff);
-  }, [allEvents]);
-
-  // camera live views
+  const [selectedCameraName, setSelectedCameraName] = useOverlayState("camera");
 
   const cameras = useMemo(() => {
     if (!config) {
@@ -65,84 +30,20 @@ function Live() {
       .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
   }, [config]);
 
-  const [windowVisible, setWindowVisible] = useState(true);
-  const visibilityListener = useCallback(() => {
-    setWindowVisible(document.visibilityState == "visible");
-  }, []);
-
-  useEffect(() => {
-    addEventListener("visibilitychange", visibilityListener);
-
-    return () => {
-      removeEventListener("visibilitychange", visibilityListener);
-    };
-  }, [visibilityListener]);
-
-  return (
-    <div className="size-full overflow-y-scroll px-2">
-      {isMobile && (
-        <div className="relative h-9 flex items-center justify-between">
-          <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
-          <div />
-          <div className="flex items-center gap-1">
-            <Button
-              className={layout == "grid" ? "text-blue-600 bg-blue-200" : ""}
-              size="xs"
-              variant="secondary"
-              onClick={() => setLayout("grid")}
-            >
-              <CiGrid31 className="m-1" />
-            </Button>
-            <Button
-              className={layout == "list" ? "text-blue-600 bg-blue-200" : ""}
-              size="xs"
-              variant="secondary"
-              onClick={() => setLayout("list")}
-            >
-              <CiGrid2H className="m-1" />
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {events && events.length > 0 && (
-        <ScrollArea>
-          <TooltipProvider>
-            <div className="flex">
-              {events.map((event) => {
-                return <AnimatedEventThumbnail key={event.id} event={event} />;
-              })}
-            </div>
-          </TooltipProvider>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-      )}
-
-      <div
-        className={`mt-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4  *:rounded-2xl *:bg-black`}
-      >
-        {cameras.map((camera) => {
-          let grow;
-          const aspectRatio = camera.detect.width / camera.detect.height;
-          if (aspectRatio > 2) {
-            grow = `${layout == "grid" ? "col-span-2" : ""} aspect-wide`;
-          } else if (aspectRatio < 1) {
-            grow = `${layout == "grid" ? "row-span-2 aspect-tall md:h-full" : ""} aspect-tall`;
-          } else {
-            grow = "aspect-video";
-          }
-          return (
-            <LivePlayer
-              key={camera.name}
-              className={grow}
-              windowVisible={windowVisible}
-              cameraConfig={camera}
-              preferredLiveMode={isSafari ? "webrtc" : "mse"}
-            />
+  const selectedCamera = useMemo(
+    () => cameras.find((cam) => cam.name == selectedCameraName),
+    [cameras, selectedCameraName],
   );
-        })}
-      </div>
-    </div>
+
+  if (selectedCamera) {
+    return <LiveCameraView camera={selectedCamera} />;
+  }
+
+  return (
+    <LiveDashboardView
+      cameras={cameras}
+      onSelectCamera={setSelectedCameraName}
+    />
   );
 }
 

web/src/views/live/LiveCameraView.tsx

@@ -0,0 +1,49 @@
+import LivePlayer from "@/components/player/LivePlayer";
+import { Button } from "@/components/ui/button";
+import { CameraConfig } from "@/types/frigateConfig";
+import { useMemo } from "react";
+import { isSafari } from "react-device-detect";
+import { IoMdArrowBack } from "react-icons/io";
+import { useNavigate } from "react-router-dom";
+
+type LiveCameraViewProps = {
+  camera: CameraConfig;
+};
+export default function LiveCameraView({ camera }: LiveCameraViewProps) {
+  const navigate = useNavigate();
+
+  const growClassName = useMemo(() => {
+    if (camera.detect.width / camera.detect.height > 2) {
+      return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
+    } else {
+      return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
+    }
+  }, [camera]);
+
+  return (
+    <div className="size-full flex flex-col">
+      <div className="w-full h-12 flex items-center justify-between">
+        <Button className="rounded-lg" onClick={() => navigate(-1)}>
+          <IoMdArrowBack className="size-5 mr-[10px]" />
+          Back
+        </Button>
+      </div>
+
+      <div className="relative size-full">
+        <div
+          className={growClassName}
+          style={{ aspectRatio: camera.detect.width / camera.detect.height }}
+        >
+          <LivePlayer
+            key={camera.name}
+            className="size-full"
+            windowVisible
+            showStillWithoutActivity={false}
+            cameraConfig={camera}
+            preferredLiveMode={isSafari ? "webrtc" : "mse"}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/views/live/LiveDashboardView.tsx

@@ -0,0 +1,143 @@
+import { useFrigateReviews } from "@/api/ws";
+import Logo from "@/components/Logo";
+import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
+import LivePlayer from "@/components/player/LivePlayer";
+import { Button } from "@/components/ui/button";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { usePersistence } from "@/hooks/use-persistence";
+import { CameraConfig } from "@/types/frigateConfig";
+import { ReviewSegment } from "@/types/review";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { isDesktop, isMobile, isSafari } from "react-device-detect";
+import { CiGrid2H, CiGrid31 } from "react-icons/ci";
+import useSWR from "swr";
+
+type LiveDashboardViewProps = {
+  cameras: CameraConfig[];
+  onSelectCamera: (camera: string) => void;
+};
+export default function LiveDashboardView({
+  cameras,
+  onSelectCamera,
+}: LiveDashboardViewProps) {
+  // layout
+
+  const [layout, setLayout] = usePersistence<"grid" | "list">(
+    "live-layout",
+    isDesktop ? "grid" : "list",
+  );
+
+  // recent events
+  const { payload: eventUpdate } = useFrigateReviews();
+  const { data: allEvents, mutate: updateEvents } = useSWR<ReviewSegment[]>([
+    "review",
+    { limit: 10, severity: "alert" },
+  ]);
+
+  useEffect(() => {
+    if (!eventUpdate) {
+      return;
+    }
+
+    // if event is ended and was saved, update events list
+    if (eventUpdate.type == "end" && eventUpdate.review.severity == "alert") {
+      updateEvents();
+      return;
+    }
+  }, [eventUpdate, updateEvents]);
+
+  const events = useMemo(() => {
+    if (!allEvents) {
+      return [];
+    }
+
+    const date = new Date();
+    date.setHours(date.getHours() - 1);
+    const cutoff = date.getTime() / 1000;
+    return allEvents.filter((event) => event.start_time > cutoff);
+  }, [allEvents]);
+
+  // camera live views
+
+  const [windowVisible, setWindowVisible] = useState(true);
+  const visibilityListener = useCallback(() => {
+    setWindowVisible(document.visibilityState == "visible");
+  }, []);
+
+  useEffect(() => {
+    addEventListener("visibilitychange", visibilityListener);
+
+    return () => {
+      removeEventListener("visibilitychange", visibilityListener);
+    };
+  }, [visibilityListener]);
+
+  return (
+    <div className="size-full overflow-y-scroll px-2">
+      {isMobile && (
+        <div className="relative h-9 flex items-center justify-between">
+          <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
+          <div />
+          <div className="flex items-center gap-1">
+            <Button
+              className={layout == "grid" ? "text-blue-600 bg-blue-200" : ""}
+              size="xs"
+              variant="secondary"
+              onClick={() => setLayout("grid")}
+            >
+              <CiGrid31 className="m-1" />
+            </Button>
+            <Button
+              className={layout == "list" ? "text-blue-600 bg-blue-200" : ""}
+              size="xs"
+              variant="secondary"
+              onClick={() => setLayout("list")}
+            >
+              <CiGrid2H className="m-1" />
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {events && events.length > 0 && (
+        <ScrollArea>
+          <TooltipProvider>
+            <div className="flex">
+              {events.map((event) => {
+                return <AnimatedEventThumbnail key={event.id} event={event} />;
+              })}
+            </div>
+          </TooltipProvider>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      )}
+
+      <div
+        className={`mt-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4  *:rounded-2xl *:bg-black`}
+      >
+        {cameras.map((camera) => {
+          let grow;
+          const aspectRatio = camera.detect.width / camera.detect.height;
+          if (aspectRatio > 2) {
+            grow = `${layout == "grid" ? "col-span-2" : ""} aspect-wide`;
+          } else if (aspectRatio < 1) {
+            grow = `${layout == "grid" ? "row-span-2 aspect-tall md:h-full" : ""} aspect-tall`;
+          } else {
+            grow = "aspect-video";
+          }
+          return (
+            <LivePlayer
+              key={camera.name}
+              className={grow}
+              windowVisible={windowVisible}
+              cameraConfig={camera}
+              preferredLiveMode={isSafari ? "webrtc" : "mse"}
+              onClick={() => onSelectCamera(camera.name)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}