From aa4811f9480caa4ac33a8f081514053b234956b3 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 12 Mar 2024 13:56:30 -0500
Subject: [PATCH] add birdseye

---
 .../components/filter/CameraGroupSelector.tsx | 38 +++++++++--------
 .../components/player/BirdseyeLivePlayer.tsx  | 41 ++++++++++---------
 web/src/pages/Live.tsx                        | 15 ++++---
 web/src/pages/UIPlayground.tsx                |  1 -
 web/src/views/live/LiveDashboardView.tsx      | 15 ++++++-
 5 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index b36406e4d..c165a938a 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -298,24 +298,26 @@ function NewGroupDialog({ open, setOpen, currentGroups }: NewGroupDialogProps) {
                 </div>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                {Object.keys(config?.cameras ?? {}).map((camera) => (
-                  <FilterCheckBox
-                    key={camera}
-                    isChecked={cameras.includes(camera)}
-                    label={camera.replaceAll("_", " ")}
-                    onCheckedChange={(checked) => {
-                      if (checked) {
-                        setCameras([...cameras, camera]);
-                      } else {
-                        const index = cameras.indexOf(camera);
-                        setCameras([
-                          ...cameras.slice(0, index),
-                          ...cameras.slice(index + 1),
-                        ]);
-                      }
-                    }}
-                  />
-                ))}
+                {[...Object.keys(config?.cameras ?? {}), "birdseye"].map(
+                  (camera) => (
+                    <FilterCheckBox
+                      key={camera}
+                      isChecked={cameras.includes(camera)}
+                      label={camera.replaceAll("_", " ")}
+                      onCheckedChange={(checked) => {
+                        if (checked) {
+                          setCameras([...cameras, camera]);
+                        } else {
+                          const index = cameras.indexOf(camera);
+                          setCameras([
+                            ...cameras.slice(0, index),
+                            ...cameras.slice(index + 1),
+                          ]);
+                        }
+                      }}
+                    />
+                  ),
+                )}
               </DropdownMenuContent>
             </DropdownMenu>
             {error && <div className="text-danger">{error}</div>}
diff --git a/web/src/components/player/BirdseyeLivePlayer.tsx b/web/src/components/player/BirdseyeLivePlayer.tsx
index 145783c20..71cfef96f 100644
--- a/web/src/components/player/BirdseyeLivePlayer.tsx
+++ b/web/src/components/player/BirdseyeLivePlayer.tsx
@@ -13,21 +13,18 @@ export default function BirdseyeLivePlayer({
   birdseyeConfig,
   liveMode,
 }: LivePlayerProps) {
+  let player;
   if (liveMode == "webrtc") {
-    return (
-      <div className="max-w-5xl">
-        <WebRtcPlayer camera="birdseye" />
-      </div>
+    player = (
+      <WebRtcPlayer className={`rounded-2xl size-full`} camera="birdseye" />
     );
   } else if (liveMode == "mse") {
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
-      return (
-        <div className="max-w-5xl">
-          <MSEPlayer camera="birdseye" />
-        </div>
+      player = (
+        <MSEPlayer className={`rounded-2xl size-full`} camera="birdseye" />
       );
     } else {
-      return (
+      player = (
         <div className="w-5xl text-center text-sm">
           MSE is only supported on iOS 17.1+. You'll need to update if available
           or use jsmpeg / webRTC streams. See the docs for more info.
@@ -35,17 +32,23 @@ export default function BirdseyeLivePlayer({
       );
     }
   } else if (liveMode == "jsmpeg") {
-    return (
-      <div className={`max-w-[${birdseyeConfig.width}px]`}>
-        <JSMpegPlayer
-          camera="birdseye"
-          className="w-full flex justify-center rounded-2xl overflow-hidden"
-          width={birdseyeConfig.width}
-          height={birdseyeConfig.height}
-        />
-      </div>
+    player = (
+      <JSMpegPlayer
+        className={`w-full max-w-[${birdseyeConfig.width}px] flex justify-center rounded-2xl overflow-hidden`}
+        camera="birdseye"
+        width={birdseyeConfig.width}
+        height={birdseyeConfig.height}
+      />
     );
   } else {
-    <ActivityIndicator />;
+    player = <ActivityIndicator />;
   }
+
+  return (
+    <div className={`relative flex justify-center w-full cursor-pointer`}>
+      <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>
+      <div className="">{player}</div>
+    </div>
+  );
 }
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index cbf4fb44d..f13214ed7 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -11,6 +11,14 @@ function Live() {
   const [selectedCameraName, setSelectedCameraName] = useOverlayState("camera");
   const [cameraGroup] = useOverlayState("cameraGroup");
 
+  const includesBirdseye = useMemo(() => {
+    if (config && cameraGroup) {
+      return config.camera_groups[cameraGroup].cameras.includes("birdseye");
+    } else {
+      return false;
+    }
+  }, [config, cameraGroup]);
+
   const cameras = useMemo(() => {
     if (!config) {
       return [];
@@ -18,15 +26,9 @@ function Live() {
 
     if (cameraGroup) {
       const group = config.camera_groups[cameraGroup];
-      console.log(config.cameras);
       const groupCameras = Object.values(config.cameras)
         .filter((conf) => conf.enabled && group.cameras.includes(conf.name))
         .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
-      if (group.cameras.includes("birdseye")) {
-        groupCameras.push({
-          name: "birdseye",
-        });
-      }
       return groupCameras;
     }
 
@@ -47,6 +49,7 @@ function Live() {
   return (
     <LiveDashboardView
       cameras={cameras}
+      includeBirdseye={includesBirdseye}
       onSelectCamera={setSelectedCameraName}
     />
   );
diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx
index 407bc6f92..76ac6fe95 100644
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@@ -186,7 +186,6 @@ function UIPlayground() {
 
   const [isEventsReviewTimeline, setIsEventsReviewTimeline] = useState(true);
   const birdseyeConfig = config?.birdseye;
-  console.log(birdseyeConfig);
 
   return (
     <>
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 6381d8de2..ed178f152 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -2,12 +2,13 @@ import { useFrigateReviews } from "@/api/ws";
 import Logo from "@/components/Logo";
 import { CameraGroupSelector } from "@/components/filter/CameraGroupSelector";
 import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
+import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
 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 { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment } from "@/types/review";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { isDesktop, isMobile, isSafari } from "react-device-detect";
@@ -16,12 +17,16 @@ import useSWR from "swr";
 
 type LiveDashboardViewProps = {
   cameras: CameraConfig[];
+  includeBirdseye: boolean;
   onSelectCamera: (camera: string) => void;
 };
 export default function LiveDashboardView({
   cameras,
+  includeBirdseye,
   onSelectCamera,
 }: LiveDashboardViewProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
   // layout
 
   const [layout, setLayout] = usePersistence<"grid" | "list">(
@@ -74,6 +79,8 @@ export default function LiveDashboardView({
     };
   }, [visibilityListener]);
 
+  const birdseyeConfig = config?.birdseye;
+
   return (
     <div className="size-full overflow-y-auto px-2">
       {isMobile && (
@@ -123,6 +130,12 @@ export default function LiveDashboardView({
       <div
         className={`my-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4  *:rounded-2xl *:bg-black`}
       >
+        {includeBirdseye && birdseyeConfig && (
+          <BirdseyeLivePlayer
+            birdseyeConfig={birdseyeConfig}
+            liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
+          />
+        )}
         {cameras.map((camera) => {
           let grow;
           const aspectRatio = camera.detect.width / camera.detect.height;