fix(vision): fix manual calibration overlay not showing on remote camera

- Re-run container dimension effect when isCalibrating changes
- Add height checks in addition to width checks for overlay visibility
- Add delayed dimension update to handle layout settling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-12-31 19:01:42 -06:00
parent 8e4975d395
commit 44dcb01473

View File

@@ -118,22 +118,32 @@ export default function RemoteCameraPage() {
}
}, [isConnected, videoStream, isCameraLoading, requestCamera])
// Update container dimensions
// Update container dimensions - run when isCalibrating changes too
useEffect(() => {
const container = containerRef.current
if (!container) return
const updateDimensions = () => {
const rect = container.getBoundingClientRect()
setContainerDimensions({ width: rect.width, height: rect.height })
if (rect.width > 0 && rect.height > 0) {
setContainerDimensions({ width: rect.width, height: rect.height })
}
}
// Initial update
updateDimensions()
// Also update after a short delay to handle layout settling
const timeoutId = setTimeout(updateDimensions, 100)
const resizeObserver = new ResizeObserver(updateDimensions)
resizeObserver.observe(container)
return () => resizeObserver.disconnect()
}, [])
return () => {
clearTimeout(timeoutId)
resizeObserver.disconnect()
}
}, [isCalibrating]) // Re-run when calibration starts to ensure dimensions are fresh
// Auto-detect markers
useEffect(() => {
@@ -351,7 +361,9 @@ export default function RemoteCameraPage() {
{/* Manual calibration overlay */}
{isCalibrating &&
videoDimensions.width > 0 &&
containerDimensions.width > 0 && (
videoDimensions.height > 0 &&
containerDimensions.width > 0 &&
containerDimensions.height > 0 && (
<CalibrationOverlay
columnCount={13}
videoWidth={videoDimensions.width}