Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

fix(state): exit pip mode#1724

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
pzanella wants to merge1 commit intovidstack:main
base:main
Choose a base branch
Loading
frompzanella:fix/exit-pip

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 inexitPictureInPicture():

    • Primary: Use browser's nativedocument.exitPictureInPicture() API (most reliable)
    • Secondary: Fall back to provider's PiP API if available
    • Tertiary: Direct video element detection and WebKit Safari support viawebkitSetPresentationMode('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 freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

🐛 Bug: TypeError when exiting Picture-in-Picture

1 participant

@pzanella

[8]ページ先頭

©2009-2025 Movatter.jp