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/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