feat: Add document picture-in-picture support

[mister-ben]

Description

Implements Document Picture in Picture API, fixes #8108

Preview at https://deploy-preview-8113--videojs-preview.netlify.app/sandbox/docpip.html

Specific Changes proposed

Adds a enableDocumentPictureInPicture player option, to use the doc PIP API where available.
Inserts an el with the player el's classes as a placeholder. Adds poster and titlebar to the placeholder if present.

To do / to discuss

• Tests
• Docs - feat: Add enablePictureInPicture option videojs.com#168
• Aspect ratio not respected by PIP window Tracked in Chromium https://crbug.com/1407629
• Events
• Fullscreen button from PIP window - can we trigger fuullscreen from here, otherwise disable
• Responsive layout styles needed to resize plaeholder text on small players?
• Exit PIP button needed in PIP window, as the window UI already has two buttons
• User expectations that disablePictureInPicture will also disable this?
• Translations

This is implemented so that the current API / control triggers either window.documentPictureInPicture (docPiP) or video.requestPictureInPicure (elPiP). The same events will fire. Promises will be returned when entering and exiting.

• docPiP is opt-in with the enableDocumentPictureInPicture option.
• elPiP remains opt-out with the disablePictureInPicture option.
• if docPiP is enabled and available, and elPiP is not disabled but available, docPiP is used.

The assumption is an integrator will generally prefer docPiP, so controls, ads, etc can be used. Therefore disablePictureInPicture does not disable docPiP, even if that may initially seem unintuitive.

[codecov]

Codecov Report

Merging #8113 (3b17e70) into main (35c539d) will increase coverage by 0.12%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #8113      +/-   ##
==========================================
+ Coverage   82.11%   82.23%   +0.12%     
==========================================
  Files         112      112              
  Lines        7402     7430      +28     
  Branches     1785     1791       +6     
==========================================
+ Hits         6078     6110      +32     
+ Misses       1324     1320       -4     

Impacted Files	Coverage Δ
src/js/control-bar/picture-in-picture-toggle.js	83.87% <100.00%> (+4.56%)	⬆️
src/js/player.js	90.16% <100.00%> (+0.36%)	⬆️

... and 1 file with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[beaufortfrancois]

It seems like all TODOs have been checked. Is there anything left before merging this PR?

[amtins]

@mister-ben this feature is absolutely amazing 🥇

I was testing the feature and I came across a case that does not seem to be supported.

With Apple's bipbop the audio menu is cut off since there is no longer a full screen button next to the audio or subtitles button.

When the player is not in picture-in-picture document it is not an issue because the menu is able to overflow.

video.js/src/css/components/menu/_menu-popup.scss

Line 6 in c1a1f9c

left: -3em; // (Width of vjs-menu - width of button) / 2

[mister-ben]

Consider this temporary. This needs a better solution longer term that only modifies the last visible menu, but this situation could apply in situations other than PiP so deserves tackling separately to thi PR.