Skip to content

Conversation

@pzanella
Copy link

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:

  1. 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')
  2. Improved Error Handling: Added proper error logging using the existing logger infrastructure instead of silent failures

  3. 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🐛 Bug: TypeError when exiting Picture-in-Picture

1 participant