Hide playback controls without losing focus
Auto-hide playback controls during idle playback while guaranteeing that focused controls remain visible and operable.Description
Requirements
Export AutoHidePlaybackControls from src/App.tsx.
Schedule hiding after idleMs only while playing and no control contains focus.
Show controls and reset the idle schedule after pointer, keyboard, or touch interaction.
Cancel hiding when focus enters controls and never hide while focus remains inside.
Cancel every obsolete hide callback after state changes or unmount.
Expose visible status and interactive controls with native semantics, accessible names, and keyboard operation appropriate to the workflow.
Do not mutate props, nested caller-owned values, or arrays supplied to the component.
Keyboard use
Tab focuses Pause just before the idle deadline
Controls remain visible and Pause keeps focus
Schedule hiding after idleMs only while playing and no control contains focus.
Pointer wake
Hidden controls receive pointer movement
Controls show and a fresh idle timer begins
Show controls and reset the idle schedule after pointer, keyboard, or touch interaction.
Constraints
Use React state and effects only where the observable component contract requires themUse injected adapters instead of accessing network, storage, timers, or browser globals directlyKeep one authoritative state transition for each user or adapter event
Hints
Hint 1
Start with the idle-hides-controls behavior and make its observable result deterministic.
Hint 2
Model interaction-restores independently before combining it with the remaining states.
Hint 3
Verify the boundary described by cleanup-schedule without changing caller-owned input.