Dynamically enable/disable cameras (#16894)

* config options

* metrics

* stop and restart ffmpeg processes

* dispatcher

* frontend websocket

* buttons for testing

* don't recreate log pipe

* add/remove cam from birdseye when enabling/disabling

* end all objects and send empty camera activity

* enable/disable switch in ui

* disable buttons when camera is disabled

* use enabled_in_config for some frontend checks

* tweaks

* handle settings pane with disabled cameras

* frontend tweaks

* change to debug log

* mqtt docs

* tweak

* ensure all ffmpeg processes are initially started

* clean up

* use zmq

* remove camera metrics

* remove camera metrics

* tweaks

* frontend tweaks

web/src/components/dynamic/CameraFeatureToggle.tsx

@@ -11,11 +11,15 @@ const variants = {
   primary: {
     active: "font-bold text-white bg-selected rounded-lg",
     inactive: "text-secondary-foreground bg-secondary rounded-lg",
+    disabled:
+      "text-secondary-foreground bg-secondary rounded-lg cursor-not-allowed opacity-50",
   },
   overlay: {
     active: "font-bold text-white bg-selected rounded-full",
     inactive:
       "text-primary rounded-full bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500",
+    disabled:
+      "bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 rounded-full cursor-not-allowed opacity-50",
   },
 };
 
@@ -26,6 +30,7 @@ type CameraFeatureToggleProps = {
   Icon: IconType;
   title: string;
   onClick?: () => void;
+  disabled?: boolean; // New prop for disabling
 };
 
 export default function CameraFeatureToggle({
@@ -35,18 +40,28 @@ export default function CameraFeatureToggle({
   Icon,
   title,
   onClick,
+  disabled = false, // Default to false
 }: CameraFeatureToggleProps) {
   const content = (
     <div
-      onClick={onClick}
+      onClick={disabled ? undefined : onClick}
       className={cn(
         "flex flex-col items-center justify-center",
-        variants[variant][isActive ? "active" : "inactive"],
+        disabled
+          ? variants[variant].disabled
+          : variants[variant][isActive ? "active" : "inactive"],
         className,
       )}
     >
       <Icon
-        className={`size-5 md:m-[6px] ${isActive ? "text-white" : "text-secondary-foreground"}`}
+        className={cn(
+          "size-5 md:m-[6px]",
+          disabled
+            ? "text-gray-400"
+            : isActive
+              ? "text-white"
+              : "text-secondary-foreground",
+        )}
       />
     </div>
   );
@@ -54,7 +69,7 @@ export default function CameraFeatureToggle({
   if (isDesktop) {
     return (
       <Tooltip>
-        <TooltipTrigger>{content}</TooltipTrigger>
+        <TooltipTrigger disabled={disabled}>{content}</TooltipTrigger>
         <TooltipContent side="bottom">
           <p>{title}</p>
         </TooltipContent>