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/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 [];
@@ -40,6 +48,7 @@ function Live() {
   return (
     <LiveDashboardView
       cameras={cameras}
+      includeBirdseye={includesBirdseye}
       onSelectCamera={setSelectedCameraName}
     />
   );

web/src/pages/UIPlayground.tsx

@@ -22,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
 
 // Color data
 const colors = [
@@ -184,6 +185,7 @@ function UIPlayground() {
   };
 
   const [isEventsReviewTimeline, setIsEventsReviewTimeline] = useState(true);
+  const birdseyeConfig = config?.birdseye;
 
   return (
     <>
@@ -243,6 +245,14 @@ function UIPlayground() {
               <div className="w-[40px] my-4">
                 <CameraActivityIndicator />
               </div>
+              <div className="">
+                {birdseyeConfig && (
+                  <BirdseyeLivePlayer
+                    birdseyeConfig={birdseyeConfig}
+                    liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
+                  />
+                )}
+              </div>
               <p>
                 <Button onClick={handleZoomOut} disabled={zoomLevel === 0}>
                   Zoom Out