Support Chrome Picture In Picture (PiP) feature

[Maxou44]

I added the Picture In Picture (PiP) mode for react-player, the readme and the demo page are up to date!
At the moment it's only available for the FilePlayer, I hope future iframe APIs allow us to trigger PiP mode.

Specification: https://wicg.github.io/picture-in-picture/
Example: https://developers.google.com/web/updates/2017/09/picture-in-picture

[Maxou44]

Someone can help me with tests, 'document' isn't defined, how I can fix that?

[cookpete]

Nice work @Maxou44. I've added some changes just to tidy things up a bit and reduce the redundant changes across the codebase, eg:

• check that the canEnablePIP static method exists for a player, rather than setting it for each player as () => false
• check that enablePIP and disablePIP exists for a player, rather than setting it as a noop in each.
• use "enable" and "disable" wording in all methods and props, rather than mixing with "enter" and "leave"
• use PIP instead of PiP (just personal preference)

Thanks for the PR!

[cookpete]

@Maxou44 I also removed the weird tickPause hack. I'm not sure what that was for?

[Maxou44]

Thanks for the merge, I will check the trickPause hack and I will open another issue if needed.

[paulincai]

#504 (comment)
@cookpete ReactPlayer.canEnablePiP(url) in Readme needs a bit of update for 'PIP'.

Testing with Youtube (no relevance for FB, haven't tried others)

I am not able to get true from ReactPlayer.canEnablePiP(url) in Chrome or Safari. I am having the situation as initially reported above, running the latest version of the player.

What I have noticed in Chrome:

Chrome has this mobile view option built-in when the debugging tools are open. I set the view for an iPhone 6/7/8/ (same result for Pixel 2XL and Galaxy 5) and I get the PIP icon although ReactPlayer.canEnablePiP(url) still returns false. I then click on the mobile icon in Chrome Tools to revert to normal (desktop) view and the PIP icon is still there (and PIP works fine) until I refresh the page.

It looks like the PIP option is somehow also determined by the navigator.userAgent or perhaps Youtube doesn't want us to PIP their videos on a 'desktop'.

Later... OK, youtube embed hides its video tag controls in Chrome and presents a Chrome custom controls html where the PIP button exists but it is hidden. Anyway, this is the behavior with any other embed. Not sure React Player can alter this behavior.