fixup! ♻️(frontend) refactor screen share zoom pan with useMove and imperative DOM updates

src/frontend/src/features/rooms/livekit/hooks/useScreenShareZoom.ts

@@ -100,34 +100,31 @@ export const useScreenShareZoom = () => {
     )
   }, [])
 
-  const zoomIn = useCallback(() => {
-    const next = clampZoom(zoomRef.current + ZOOM_STEP)
-    zoomRef.current = next
-    panRef.current = clampPan(panRef.current, next, readPictureRatio())
-    applyTransform()
-    applyCursor()
-    flush()
-  }, [applyTransform, applyCursor, flush, readPictureRatio])
+  const setZoom = useCallback(
+    (next: number) => {
+      zoomRef.current = next
+      panRef.current =
+        next <= MIN_ZOOM
+          ? { x: 0, y: 0 }
+          : clampPan(panRef.current, next, readPictureRatio())
+      applyTransform()
+      applyCursor()
+      flush()
+    },
+    [applyTransform, applyCursor, flush, readPictureRatio]
+  )
 
-  const zoomOut = useCallback(() => {
-    const next = clampZoom(zoomRef.current - ZOOM_STEP)
-    zoomRef.current = next
-    panRef.current =
-      next <= MIN_ZOOM
-        ? { x: 0, y: 0 }
-        : clampPan(panRef.current, next, readPictureRatio())
-    applyTransform()
-    applyCursor()
-    flush()
-  }, [applyTransform, applyCursor, flush, readPictureRatio])
+  const zoomIn = useCallback(
+    () => setZoom(clampZoom(zoomRef.current + ZOOM_STEP)),
+    [setZoom]
+  )
 
-  const resetZoom = useCallback(() => {
-    zoomRef.current = MIN_ZOOM
-    panRef.current = { x: 0, y: 0 }
-    applyTransform()
-    applyCursor()
-    flush()
-  }, [applyTransform, applyCursor, flush])
+  const zoomOut = useCallback(
+    () => setZoom(clampZoom(zoomRef.current - ZOOM_STEP)),
+    [setZoom]
+  )
+
+  const resetZoom = useCallback(() => setZoom(MIN_ZOOM), [setZoom])
 
   // Must be attached with { passive: false } so preventDefault() blocks
   // the browser's native Ctrl+scroll page zoom.