Hook
useIdleControls
Auto-hides controls and cursor after 3 seconds of mouse inactivity in fullscreen.
Behavior rules
| Condition | Controls visible? |
|---|---|
| Fullscreen + playing + idle 3s | Hidden |
| Fullscreen + playing + mouse moves | Visible (timer resets) |
| Fullscreen + paused | Always visible |
| Fullscreen + popover open | Always visible |
| Windowed mode (any state) | CSS group-hover only |
Usage
idle-controls.tsx
const { controlsVisible, showControls } = useIdleControls({
isPlaying: state.isPlaying,
isFullscreen: state.isFullscreen,
isSettingsOpen,
})Returns
| Prop | Type | Default | Description |
|---|---|---|---|
| controlsVisible | boolean | — | Whether the controls should be rendered visible right now. |
| showControls | () => void | — | Manually show controls and reset the idle timer. |
Cursor hiding
How cursor hiding works
cursor-none is applied to the player container (not the iframe) when controls are hidden in fullscreen. The iframe has pointer-events: noneso the container's cursor style governs what the user sees.