Skip to content

Module: src/controller/PictureInPicture

The PictureInPicture component enables support for native Picture-in-Picture (PiP) mode on platforms that support the standardized or WebKit-specific API. It provides a control button in the settings menu and backdrop UI.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
Source
PictureInPicture.js, line 16

Constructor

new PictureInPicture(player, parent, optionsopt)

Creates an instance of the PictureInPicture component.

Parameters:
Name Type Attributes Description
player Player

Reference to the VisionPlayer instance.
parent Controller

Reference to the parent instance, in this case the controller component.
options Object optional

Additional options.

Parameters:
Name Type Attributes Description
apiKey symbol optional

Token for extended access to the player API.

Members

Reference to the main player instance.

Type
Player
Source
PictureInPicture.js, line 22

Reference to the parent instance.

Type
Controller
Source
PictureInPicture.js, line 28

Holds tokens of subscriptions to player events, for later unsubscribe.

Type
Array<number>
Source
PictureInPicture.js, line 34

Secret key only known to the player instance and initialized components. Used to be able to restrict access to API methods in conjunction with secure mode.

Type
symbol
Source
PictureInPicture.js, line 41

A DomSmith instance for the PiP toggle button placed in the top container.

Type
DomSmith
Source
PictureInPicture.js, line 47

A DomSmith instance for the PiP backdrop, used if the video is displayed as PiP and the user wants to cancel PiP or see a placeholder.

Type
DomSmith
Source
PictureInPicture.js, line 54

Type of the media ('video' or 'audio').

Type
string
Source
PictureInPicture.js, line 60

Methods

private #onDataReady(mediaItem)

Called when media data is ready. Enables or disables PiP if the media is video or not.

Parameters:
Name Type Description
mediaItem Data~mediaItem

Object containing media type info.

Parameters:
Name Type Description
mediaType string

Type of the media ('video' or 'audio').
Listens
data/ready
Source
PictureInPicture.js, line 138

private #togglePip()

Toggles PiP status. If PiP is active, exit; otherwise enter PiP mode.

Source
PictureInPicture.js, line 148

async, private #pipEnter() → Promise<void>

Enters Picture-in-Picture mode via the appropriate API (standard or webkit).

Returns
Type Promise<void>
Source
PictureInPicture.js, line 163

async, private #pipExit() → Promise<void>

Exits Picture-in-Picture mode via the appropriate API (standard or webkit).

Returns
Type Promise<void>
Source
PictureInPicture.js, line 179

private #onPipEnter()

Handler for the 'media/enterpictureinpicture' event. Adjusts UI/state accordingly by displaying the PiP backdrop.

Listens
media/enterpictureinpicture
Source
PictureInPicture.js, line 195

private #onPipExit()

Handler for the 'media/leavepictureinpicture' event. Adjusts UI/state accordingly.

Listens
media/leavepictureinpicture
Source
PictureInPicture.js, line 210

private #enable()

Enables the PiP button if conditions allow it.

Listens
chromecast/stop
airplay/stop
media/canplay
Source
PictureInPicture.js, line 227

private #disable()

Disables the PiP button, and exits PiP if currently active.

Listens
chromecast/start
airplay/start
data/nomedia
media/error
Source
PictureInPicture.js, line 240

destroy()

This method removes all events, subscriptions and DOM nodes created by this component.

Source
PictureInPicture.js, line 250