Save initial camera state to update when websocket connects (#11174)

* Send camera state to dispatcher

* Fix logic

* Cleanup

* Send camera activitiy in on connect

* Support reading initial camera state

* Fix key

* Formatting

* Sorting

web/src/components/Statusbar.tsx

@@ -131,7 +131,11 @@ export default function Statusbar() {
                 );
 
                 if (link) {
-                  return <Link to={link}>{message}</Link>;
+                  return (
+                    <Link key={id} to={link}>
+                      {message}
+                    </Link>
+                  );
                 } else {
                   return message;
                 }

web/src/components/player/LivePlayer.tsx

@@ -48,7 +48,7 @@ export default function LivePlayer({
 
   // camera activity
 
-  const { activeMotion, activeTracking, activeObjects } =
+  const { activeMotion, activeTracking, objects } =
     useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
@@ -166,7 +166,7 @@ export default function LivePlayer({
       <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
       {player}
 
-      {activeObjects.length > 0 && (
+      {objects.length > 0 && (
         <div className="absolute left-0 top-2 z-40">
           <Tooltip>
             <div className="flex">
@@ -177,7 +177,7 @@ export default function LivePlayer({
                   >
                     {[
                       ...new Set([
-                        ...(activeObjects || []).map(({ label }) => label),
+                        ...(objects || []).map(({ label }) => label),
                       ]),
                     ]
                       .map((label) => {
@@ -189,11 +189,7 @@ export default function LivePlayer({
               </TooltipTrigger>
             </div>
             <TooltipContent className="capitalize">
-              {[
-                ...new Set([
-                  ...(activeObjects || []).map(({ label }) => label),
-                ]),
-              ]
+              {[...new Set([...(objects || []).map(({ label }) => label)])]
                 .filter(
                   (label) =>
                     label !== undefined && !label.includes("-verified"),