Store video widget size in redux (#828)

* add video scale to slice

* use redux for scale

* add useEffect

* cleanup duplicate code

* copilot changes

Author: Turnlings

gcs/src/components/dashboard/videoWidget.jsx

@@ -25,24 +25,27 @@ import Webcam from "react-webcam"
 import GetOutsideVisibilityColor from "../../helpers/outsideVisibility"
 import {
   selectVideoMaximized,
+  selectVideoScale,
   selectVideoSource,
   setVideoMaximized,
+  setVideoScale,
   setVideoSource,
 } from "../../redux/slices/droneConnectionSlice"
 import VideoWidgetSourceSelectModal from "./videoWidgetSourceSelectModal"
 
 export default function VideoWidget({ telemetryPanelWidth }) {
   const videoSource = useSelector(selectVideoSource)
   const isMaximized = useSelector(selectVideoMaximized)
+  const scale = useSelector(selectVideoScale) // Scale factor for resizing
   const dispatch = useDispatch()
 
   const [error, setError] = useState(null)
   const [videoDimensions, setVideoDimensions] = useState({
-    width: 350,
-    height: 197,
+    width: 350 * scale,
+    height: 197 * scale,
   }) // Default 16:9 aspect ratio
+
   const [baseAspectRatio, setBaseAspectRatio] = useState(16 / 9) // Track original aspect ratio
-  const [scale, setScale] = useState(1) // Scale factor for resizing
   const [isPoppedOut, setIsPoppedOut] = useState(false) // Track if video is popped out
 
   const [
@@ -61,21 +64,6 @@ export default function VideoWidget({ telemetryPanelWidth }) {
     dispatch(setVideoMaximized(true))
   }
 
-  function updateScale(newScale) {
-    const clampedScale = Math.max(1, Math.min(3, newScale)) // Clamp between 1x and 3x
-    setScale(clampedScale)
-
-    // Recalculate dimensions based on new scale
-    const baseWidth = 350
-    const newWidth = baseWidth * clampedScale
-    const newHeight = Math.round(newWidth / baseAspectRatio)
-
-    setVideoDimensions({
-      width: newWidth,
-      height: newHeight,
-    })
-  }
-
   function handleResizeStart(e) {
     const startX = e.clientX
     const startScale = scale
@@ -84,7 +72,8 @@ export default function VideoWidget({ telemetryPanelWidth }) {
       const deltaX = e.clientX - startX
       const scaleChange = deltaX / 200 // Adjust sensitivity
       const newScale = startScale + scaleChange
-      updateScale(newScale)
+      const clampedScale = Math.max(1, Math.min(3, newScale)) // Clamp between 1x and 3x
+      dispatch(setVideoScale(clampedScale))
     }
 
     const handleMouseUp = () => {
@@ -250,6 +239,18 @@ export default function VideoWidget({ telemetryPanelWidth }) {
     }
   }
 
+  useEffect(() => {
+    // Update video dimensions when scale changes
+    const baseWidth = 350
+    const newWidth = baseWidth * scale
+    const newHeight = Math.round(newWidth / baseAspectRatio)
+
+    setVideoDimensions({
+      width: newWidth,
+      height: newHeight,
+    })
+  }, [scale, baseAspectRatio])
+
   useEffect(() => {
     // Listen for video window close events
     const handleVideoWindowClose = async () => {

gcs/src/redux/slices/droneConnectionSlice.js

@@ -42,6 +42,7 @@ const initialState = {
 
   videoSource: null,
   videoMaximized: false,
+  videoScale: 1,
 }
 
 const droneConnectionSlice = createSlice({
@@ -139,6 +140,9 @@ const droneConnectionSlice = createSlice({
     setVideoMaximized: (state, action) => {
       state.videoMaximized = action.payload
     },
+    setVideoScale: (state, action) => {
+      state.videoScale = action.payload
+    },
 
     // Emits
     emitIsConnectedToDrone: () => {},
@@ -182,6 +186,7 @@ const droneConnectionSlice = createSlice({
     selectOutsideVisibility: (state) => state.outsideVisibility,
     selectVideoSource: (state) => state.videoSource,
     selectVideoMaximized: (state) => state.videoMaximized,
+    selectVideoScale: (state) => state.videoScale,
   },
 })
 
@@ -207,6 +212,7 @@ export const {
   setOutsideVisibility,
   setVideoSource,
   setVideoMaximized,
+  setVideoScale,
 
   // Emitters
   emitIsConnectedToDrone,
@@ -247,6 +253,7 @@ export const {
   selectOutsideVisibility,
   selectVideoSource,
   selectVideoMaximized,
+  selectVideoScale,
 } = droneConnectionSlice.selectors
 
 export default droneConnectionSlice