Draggable grid fixes (#11944)

* Use globals on grid for resizing/dragging flags

* remove unneeded useeffect

web/src/views/live/DraggableGridLayout.tsx

@@ -97,8 +97,9 @@ export default function DraggableGridLayout({
   const [showCircles, setShowCircles] = useState(true);
 
   useEffect(() => {
+    setIsEditMode(false);
     setEditGroup(false);
-  }, [cameraGroup]);
+  }, [cameraGroup, setIsEditMode]);
 
   // camera state
 
@@ -185,8 +186,6 @@ export default function DraggableGridLayout({
         y: 0, // don't set y, grid does automatically
         w: width,
         h: height,
-        isDraggable: isEditMode,
-        isResizable: isEditMode,
       };
 
       optionsMap.push(options);
@@ -195,31 +194,12 @@ export default function DraggableGridLayout({
     return optionsMap;
   }, [
     cameras,
-    isEditMode,
     isGridLayoutLoaded,
     currentGridLayout,
     includeBirdseye,
     birdseyeConfig,
   ]);
 
-  useEffect(() => {
-    if (currentGridLayout) {
-      const updatedGridLayout = currentGridLayout.map((layout) => ({
-        ...layout,
-        isDraggable: isEditMode,
-        isResizable: isEditMode,
-      }));
-      if (isEditMode) {
-        setGridLayout(updatedGridLayout);
-        setCurrentGridLayout(updatedGridLayout);
-      } else {
-        setGridLayout(updatedGridLayout);
-      }
-    }
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isEditMode, setGridLayout]);
-
   useEffect(() => {
     if (isGridLayoutLoaded) {
       if (gridLayout) {
@@ -406,6 +386,8 @@ export default function DraggableGridLayout({
             onResize={handleResize}
             onResizeStart={() => setShowCircles(false)}
             onResizeStop={handleLayoutChange}
+            isDraggable={isEditMode}
+            isResizable={isEditMode}
           >
             {includeBirdseye && birdseyeConfig?.enabled && (
               <BirdseyeLivePlayerGridItem