Move video controls into Picture-in-Picture
Expose playback controls in the active Picture-in-Picture surface while preserving their state and a usable unsupported fallback.Description
Requirements
Export PictureInPictureControls from src/App.tsx.
Offer Enter when inactive and Leave when active, with one transition request at a time.
Render the supplied control set in the Picture-in-Picture control region while active.
Keep control IDs, labels, pressed state, and callbacks unchanged across surface moves.
Hide unavailable transition actions and explain when Picture-in-Picture is unsupported.
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.
Enter mode
supported is true and Enter resolves
Controls appear in the PiP region with the same state
Offer Enter when inactive and Leave when active, with one transition request at a time.
Unsupported browser
supported is false
No Enter action is offered and an explanation is visible
Render the supplied control set in the Picture-in-Picture control region while active.
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 enter-and-leave-actions behavior and make its observable result deterministic.
Hint 2
Model moves-active-controls independently before combining it with the remaining states.
Hint 3
Verify the boundary described by unsupported-fallback without changing caller-owned input.