Merge pull request #4 from anedyaio/dev

Disable camera stats display and add auto-start stream option

Author: surajmaurya-git

src/components/dashboard-builder/PropertiesPanel.tsx

@@ -236,6 +236,16 @@ export default function PropertiesPanel() {
                 />
                 <Label htmlFor="showNetworkStatsBtn" className="font-normal cursor-pointer text-sm">Show Network Stats Button</Label>
               </div>
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="autoStart"
+                  className="w-4 h-4 rounded border-input text-primary focus:ring-primary cursor-pointer"
+                  checked={draftConfig.autoStart === true}
+                  onChange={(e) => handleConfigChange({ autoStart: e.target.checked })}
+                />
+                <Label htmlFor="autoStart" className="font-normal cursor-pointer text-sm">Auto Start Stream on Open</Label>
+              </div>
             </div>
           </div>
         )}

src/components/dashboard-builder/widgets/CameraViewerWidget.tsx

@@ -45,7 +45,7 @@ export default function CameraViewerWidget({ config, nodeId, isEditMode }: Camer
   const [connectionProgress, setConnectionProgress] = useState('CONNECTING...');
 
   const [isFullscreen, setIsFullscreen] = useState(false);
-  const [showStats, setShowStats] = useState(true);
+  const [showStats, setShowStats] = useState(false);
   const [networkStats, setNetworkStats] = useState({ bitrate: 0, fps: 0, packetLoss: 0, resolution: '' });
   const lastBytesReceived = useRef(0);
   const lastTimestamp = useRef(0);
@@ -318,6 +318,13 @@ export default function CameraViewerWidget({ config, nodeId, isEditMode }: Camer
     };
   }, [stopStream]);
 
+  useEffect(() => {
+    if (!isEditMode && config?.config?.autoStart === true && status === 'ready') {
+      startStream();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodeId, isEditMode]);
+
   useEffect(() => {
     const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
     document.addEventListener('fullscreenchange', onFullscreenChange);