Add ability to add legacy birdseye to camera groups (#10404)

* initial try

* add birdseye

* remove vite

* cleanup

* memoize

* remove console

* ensure birdseye is actually enabled in config

* birdseye first in select list and fix jsmpeg player size

web/src/components/filter/CameraGroupSelector.tsx

@@ -146,6 +146,8 @@ function NewGroupDialog({ open, setOpen, currentGroups }: NewGroupDialogProps) {
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
 
+  const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
+
   // add fields
 
   const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
@@ -298,7 +300,10 @@ function NewGroupDialog({ open, setOpen, currentGroups }: NewGroupDialogProps) {
                 </div>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                {Object.keys(config?.cameras ?? {}).map((camera) => (
+                {[
+                  ...(birdseyeConfig?.enabled ? ["birdseye"] : []),
+                  ...Object.keys(config?.cameras ?? {}),
+                ].map((camera) => (
                   <FilterCheckBox
                     key={camera}
                     isChecked={cameras.includes(camera)}

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,16 +32,23 @@ export default function BirdseyeLivePlayer({
       );
     }
   } else if (liveMode == "jsmpeg") {
-    return (
-      <div className={`max-w-[${birdseyeConfig.width}px]`}>
-        <JSMpegPlayer
-          camera="birdseye"
-          width={birdseyeConfig.width}
-          height={birdseyeConfig.height}
-        />
-      </div>
+    player = (
+      <JSMpegPlayer
+        className="size-full 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="size-full">{player}</div>
+    </div>
+  );
 }