Picture-in-Picture Support

[mihar-22]

Tasks

Design and implement an interface to support entering and exiting picture-in-picture (PiP) across browsers/providers.

Notes

Properties

• isPiPActive: boolean`
• canRequestPiP: boolean

Methods

• requestPiP(): Promise<void>
• exitPiP(): Promise<void>

Events

• vds-pip-change
• vds-enter-pip-request
• vds-exit-pip-request

Important

• How to know if the current provider supports enterting/exiting PiP? The interface designed should account for this via the canRequestPiP property. Refer to the canRequestFullscreen property on the MediaContext for a similar implementation.
• Careful when entering/exiting fullscreen - toggle PiP correctly.

References

• https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/player.tsx#L636-L656
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/file/file.tsx#L443-L447
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerMethods.ts#L87-L107
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/adapters/PiPAdapter.ts
• https://github.com/kaltura/playkit-js/blob/master/src/fullscreen/fullscreen-controller.js