🐛 Bug: TypeError when exiting Picture-in-Picture

[arbisoft-qaisarirfan]

Description

When attempting to exit Picture-in-Picture mode, the Vidstack player throws the following error in the console:

vidstack-DUlCophs.js:4913 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'pictureInPicture')
    at MediaRequestManager.exitPictureInPicture (vidstack-DUlCophs.js:4913:22)
    at MediaRequestManager.onDestroy (vidstack-DUlCophs.js:4743:36)
    at Scope.<anonymous> (vidstack-D_bWd66h.js:772:54)
    at compute (vidstack-D_bWd66h.js:149:21)
    at scoped (vidstack-D_bWd66h.js:57:12)
    at Instance.destroy (vidstack-D_bWd66h.js:771:5)
    at createClientComponent.forwardComponent.useEffect.onDestroy (vidstack-D_bWd66h.js:1105:31)

🧩 Affected Component

MediaRequestManager.exitPictureInPicture

💡 Possible Cause

It seems document.pictureInPictureElement or the media element itself is null when the exitPictureInPicture() method is called, likely during component unmount or route change cleanup.

🧪 Steps to Reproduce

1. Start playing a video using Vidstack player.
2. Enter Picture-in-Picture mode.
3. Navigate away (route change or component unmount).
4. Observe the console error.

🧰 Expected Behavior

Player should gracefully handle the exitPictureInPicture() call even when no PiP element is active, without throwing a TypeError.

🖥️ Environment

• Version: 1.12.12
• Browser: Chrome
• Framework: Next.js
• OS: macOS

[pzanella]

Hi @arbisoft-qaisarirfan, I've reproduced your issue by creating a simple Next.js app (you can find here). I was able to resolve it by improving the exitPictureInPicture function. I tested it on different browsers:

• Chrome 142.0.7444.162
• Firefox 145.0
• Safari 18.6

and it works correctly—the player exits PiP mode when navigating away. I tried linking the library in my NextJS app for testing. Here the PR #1724. Let me know what you think. Thanks!