gsadmin/meet
1
0
Fork 0
mirror of https://github.com/suitenumerique/meet.git synced 2026-09-03 06:08:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ovgodd
2026-09-01 10:23:24 +02:00
parent d17548ba86
commit 7a64a6c047
1 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/features/rooms/livekit/hooks/useScreenShareZoom.ts
+8 -9
View File
@@ -67,11 +67,10 @@ export const useScreenShareZoom = () => {
listenersRef.current.forEach((cb) => cb()) listenersRef.current.forEach((cb) => cb())
}, []) }, [])
const applyTransform = useCallback((transition: boolean) => { const applyTransform = useCallback(() => {
const el = transformElRef.current const el = transformElRef.current
if (!el) return if (!el) return
el.style.transform = getZoomTransform(zoomRef.current, panRef.current) el.style.transform = getZoomTransform(zoomRef.current, panRef.current)
el.style.transition = transition ? 'transform 150ms ease-out' : 'none'
}, []) }, [])
const applyCursor = useCallback(() => { const applyCursor = useCallback(() => {
@@ -87,7 +86,7 @@ export const useScreenShareZoom = () => {
const next = clampZoom(zoomRef.current + ZOOM_STEP) const next = clampZoom(zoomRef.current + ZOOM_STEP)
zoomRef.current = next zoomRef.current = next
panRef.current = clampPan(panRef.current, next) panRef.current = clampPan(panRef.current, next)
applyTransform(true) applyTransform()
applyCursor() applyCursor()
flush() flush()
}, [applyTransform, applyCursor, flush]) }, [applyTransform, applyCursor, flush])
@@ -97,7 +96,7 @@ export const useScreenShareZoom = () => {
zoomRef.current = next zoomRef.current = next
panRef.current = panRef.current =
next <= MIN_ZOOM ? { x: 0, y: 0 } : clampPan(panRef.current, next) next <= MIN_ZOOM ? { x: 0, y: 0 } : clampPan(panRef.current, next)
applyTransform(true) applyTransform()
applyCursor() applyCursor()
flush() flush()
}, [applyTransform, applyCursor, flush]) }, [applyTransform, applyCursor, flush])
@@ -105,7 +104,7 @@ export const useScreenShareZoom = () => {
const resetZoom = useCallback(() => { const resetZoom = useCallback(() => {
zoomRef.current = MIN_ZOOM zoomRef.current = MIN_ZOOM
panRef.current = { x: 0, y: 0 } panRef.current = { x: 0, y: 0 }
applyTransform(true) applyTransform()
applyCursor() applyCursor()
flush() flush()
}, [applyTransform, applyCursor, flush]) }, [applyTransform, applyCursor, flush])
@@ -140,7 +139,7 @@ export const useScreenShareZoom = () => {
}) })
} }
applyTransform(false) applyTransform()
applyCursor() applyCursor()
flush() flush()
}, },
@@ -177,7 +176,7 @@ export const useScreenShareZoom = () => {
zoomRef.current zoomRef.current
) )
applyTransform(false) applyTransform()
// Mouse drag: skip flush (imperative-only) to avoid re-renders per frame. // Mouse drag: skip flush (imperative-only) to avoid re-renders per frame.
// Keyboard: flush so the toolbar reflects the updated position. // Keyboard: flush so the toolbar reflects the updated position.
if (e.pointerType === 'keyboard') { if (e.pointerType === 'keyboard') {
@@ -186,7 +185,7 @@ export const useScreenShareZoom = () => {
}, },
onMoveEnd() { onMoveEnd() {
draggingRef.current = false draggingRef.current = false
applyTransform(true) applyTransform()
applyCursor() applyCursor()
flush() flush()
}, },
@@ -198,7 +197,7 @@ export const useScreenShareZoom = () => {
{ x: panRef.current.x + dx, y: panRef.current.y + dy }, { x: panRef.current.x + dx, y: panRef.current.y + dy },
zoomRef.current zoomRef.current
) )
applyTransform(true) applyTransform()
flush() flush()
}, },
[applyTransform, flush] [applyTransform, flush]