fix(state): exit pip mode
Related:
Fixes picture-in-picture mode getting stuck during Next.js route navigation Closes #1723
Description:
This PR resolves an issue where the media player would remain stuck in picture-in-picture (PiP) mode when navigating between pages in Next.js applications. The problem occurred because the original implementation relied solely on the provider's PiP API, which could become null during component destruction, causing the exit operation to fail silently.
Key Changes:
-
Enhanced PiP Exit Strategy: Implemented a multi-layered fallback approach in
exitPictureInPicture():- Primary: Use browser's native
document.exitPictureInPicture()API (most reliable) - Secondary: Fall back to provider's PiP API if available
- Tertiary: Direct video element detection and WebKit Safari support via
webkitSetPresentationMode('inline')
- Primary: Use browser's native
-
Improved Error Handling: Added proper error logging using the existing logger infrastructure instead of silent failures
-
Cross-browser Compatibility: Added support for WebKit browsers (Safari) that use proprietary PiP APIs
Technical Implementation:
The solution wraps the exit logic in a try-catch block and implements three sequential fallback strategies to ensure PiP mode is properly exited even when:
- The component is being destroyed during route changes
- The provider becomes null or unavailable
- Different browser APIs are required (Chrome vs Safari)
This ensures clean state management and prevents the player from getting stuck in PiP mode during navigation.
Ready?
Yes, this PR is ready for review. The implementation follows existing code patterns, uses proper error handling, and maintains backward compatibility.
Anything Else?
Testing Scenarios:
- Navigate between pages while video is in PiP mode (Next.js/React Router)
- Test on multiple browsers (Chrome, Firefox, Safari)
- Verify normal PiP exit functionality remains unchanged
- Test with different media providers
Impact:
- Fixes user experience issue in Next.js applications
- Improves cross-browser compatibility
- No breaking changes to existing API
- Maintains performance with early returns and efficient fallback chain