Allow cameras to be disabled in config (#4162)

* add option enabled for each camera in config

* Simplified If-block and removed wrong Optional

* Update Docs enabling/disabling camera in config

* correct format for option

* Disabling Camera for processes, no config changes

* Describe effects of disabled cam in documentation

* change if-logic, obsolete copy, info disabled cam

* changed color to white, added top padding in disabled camera info

* changed indentation

web/src/components/CameraImage.jsx

@@ -14,6 +14,7 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
   const [{ width: availableWidth }] = useResizeObserver(containerRef);
 
   const { name } = config ? config.cameras[camera] : '';
+  const enabled = config ? config.cameras[camera].enabled : 'True';
   const { width, height } = config ? config.cameras[camera].detect : { width: 1, height: 1 };
   const aspectRatio = width / height;
 
@@ -45,12 +46,18 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
 
   return (
     <div className="relative w-full" ref={containerRef}>
-      <canvas data-testid="cameraimage-canvas" height={scaledHeight} ref={canvasRef} width={scaledWidth} />
-      {!hasLoaded ? (
-        <div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
-          <ActivityIndicator />
-        </div>
-      ) : null}
-    </div>
+      {
+        (enabled) ?
+          <canvas data-testid="cameraimage-canvas" height={scaledHeight} ref={canvasRef} width={scaledWidth} />
+          : <div class="text-center pt-6">Camera is disabled in config, no stream or snapshot available!</div>
+      }
+      {
+        (!hasLoaded && enabled) ? (
+          <div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
+            <ActivityIndicator />
+          </div>
+        ) : null
+      }
+    </div >
   );
 }