fix: Mouse passthrough bug, v 1.3.0beta#486
fix: Mouse passthrough bug, v 1.3.0beta#486ExtraBinoss wants to merge 2 commits intowebadderallorg:mainfrom
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughTracks pointer presence over HUD interactive elements, marks HUD window non-focusable, adds reassertHudOverlayMousePassthrough() to retoggle passthrough on Windows, calls it during highlight-window lifecycle, and closes popovers on window blur. ChangesHUD Overlay Mouse Passthrough System
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/launch/hooks/useLaunchHudInteractionState.ts (1)
29-59: 💤 Low valueConsider moving
timeoutRefdeclaration before its first usage for clarity.The
timeoutRefref (declared at line 72) is referenced inside this effect's callback. While this works because React effect callbacks run after render (when all hooks are initialized), declaring refs before their usage improves readability and avoids confusion about temporal dead zones.Additionally, the
closest()selector relies on class substring matching ([class*="menuCard"],[class*="recordingWebcamPreview"]) which is fragile if class names change or if CSS modules are introduced with hashed names. Consider using data attributes for more robust element identification.🔧 Suggested reordering and data attribute approach
Move
timeoutRefdeclaration up:export function useLaunchHudInteractionState({...}) { const isMouseOverHudRef = useRef(false); + const timeoutRef = useRef<NodeJS.Timeout | null>(null); useEffect(() => { // openId effect... }, [openId]); useEffect(() => { const handleMouseOver = (e: globalThis.MouseEvent) => { // ... }; // ... }, [isHudDraggingRef, isWebcamPreviewDraggingRef, webcamPreviewDragStartRef]);For more robust element detection, consider adding
data-hud-interactiveattributes to interactive elements and simplifying the selector:const isInteractive = !!target.closest('[data-hud-interactive], [data-radix-popper-content-wrapper]');🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/launch/hooks/useLaunchHudInteractionState.ts` around lines 29 - 59, Move the timeoutRef declaration so it appears before use in the useEffect/handleMouseOver (ensure timeoutRef is defined above the handleMouseOver closure), and replace fragile class-substring selectors inside handleMouseOver's closest(...) call with a stable data attribute check such as '[data-hud-interactive]' (keep other stable selectors like '[data-radix-popper-content-wrapper]' if needed); update any interactive elements to include data-hud-interactive and ensure you still clear/set timeoutRef and call window.electronAPI?.hudOverlaySetIgnoreMouse?.(...) and update isMouseOverHudRef, isHudDraggingRef, isWebcamPreviewDraggingRef, webcamPreviewDragStartRef logic unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/launch/hooks/useLaunchHudInteractionState.ts`:
- Around line 29-59: Move the timeoutRef declaration so it appears before use in
the useEffect/handleMouseOver (ensure timeoutRef is defined above the
handleMouseOver closure), and replace fragile class-substring selectors inside
handleMouseOver's closest(...) call with a stable data attribute check such as
'[data-hud-interactive]' (keep other stable selectors like
'[data-radix-popper-content-wrapper]' if needed); update any interactive
elements to include data-hud-interactive and ensure you still clear/set
timeoutRef and call window.electronAPI?.hudOverlaySetIgnoreMouse?.(...) and
update isMouseOverHudRef, isHudDraggingRef, isWebcamPreviewDraggingRef,
webcamPreviewDragStartRef logic unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 034f1811-8586-4968-b482-c045bbd45dde
📒 Files selected for processing (4)
electron/ipc/register/sources.tselectron/windows.tssrc/components/launch/hooks/useLaunchHudInteractionState.tssrc/components/launch/popovers/LaunchPopoverCoordinator.tsx
Fixing mouse passthrough
Description
Mouse doesn't passthrough , wether recording or not.
This issue has been confirmed not to be related to resolution / dual monitor setup
What has been done here
Fixed Mouse Passthrough Corruption (Windows 11+)
Files: electron/windows.ts, electron/ipc/register/sources.ts
Change: Added reassertHudOverlayMousePassthrough(). This function forces a reset of the native WS_EX_TRANSPARENT flag.
Rationale: On Windows 11, creating ephemeral windows (like the source highlight rectangle) often silently breaks the HUD's hover detection. We now force a "repair" of this state whenever a highlight appears or disappears.
Eliminated Focus Stealing
File: electron/windows.ts
Change: Set the HUD overlay window to focusable: false.
Rationale: This fixes the issue where clicking a HUD button would cause background apps (like Discord or games) to freeze, turn black, or stop showing a blinking text cursor. The HUD now receives clicks without becoming the "Active" window in the OS.
Intelligent Interaction Tracking (DOM Raycasting)
File: useLaunchHudInteractionState.ts
Change: Replaced local onMouseEnter/Leave events with a global mouseover listener that dynamically checks if the target (target.closest) is an interactive element (the bar, Radix popovers, or the webcam preview).
Rationale: This allows the HUD to track the mouse even when it moves into popovers rendered via Portals (which sit outside the main bar's DOM hierarchy).
Immediate Mouse Release & Auto-Close
Files: useLaunchHudInteractionState.ts, LaunchPopoverCoordinator.tsx
Change: The HUD now enables click-through (ignoreMouseEvents: true) immediately when the mouse leaves interactive areas, even if a menu is open. We added a window.blur listener to handle closing the menus when the user clicks another application.
Rationale: This ensures that users can click on background apps (like Discord) instantly, without the HUD "swallowing" the first click to close itself.
In summary: These changes make the HUD overlay completely transparent to the OS when not in use, and ensure it never disrupts the user's focus or workflow in other applications.
Type of Change
Related Issue(s)
Mouse passthrough bug, v 1.3.0beta #479
Reported from discord. and happened to me too. on Windows 11 latest version
Testing Guide
Run the app
npm run devYou should for example, if you are on Youtube, and you are on a video, if you switch sources, the popover shouldn't make the video go blackOther example, with Recordly open, try going into an input box, it should continue to trigger the little marker of where you are typing (blinking caret). This was not possible before the fix as the popovers and most of the HUD would not be seen as transparent.
Summary by CodeRabbit