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.1.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
Source
PictureInPicture.js, line 12

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 18

Reference to the parent instance.

Type
Controller
Source
PictureInPicture.js, line 24

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

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

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 37

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

Type
DomSmith
Source
PictureInPicture.js, line 43

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 50

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

Type
string
Source
PictureInPicture.js, line 56

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 125

private #togglePip()

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

Source
PictureInPicture.js, line 135

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 146

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 156

private #onPipEnter()

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

Listens
media/enterpictureinpicture
Source
PictureInPicture.js, line 166

private #onPipExit()

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

Listens
media/leavepictureinpicture
Source
PictureInPicture.js, line 179

private #onEngineSet(data)

Invoked when the engine is switched.

Parameters:
Name Type Description
data Object

The event data.

Parameters:
Name Type Description
from Object

The previous engine.
to Object

The new engine.
options Object

The options for the engine switch.
Listens
player/engine/set
Source
PictureInPicture.js, line 196

private #enable()

Enables the PiP button if conditions allow it.

Listens
engine/set
airplay/stop
media/canplay
Source
PictureInPicture.js, line 231

private #disable()

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

Listens
engine/set
airplay/start
data/nomedia
media/error
Source
PictureInPicture.js, line 246

destroy()

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

Source
PictureInPicture.js, line 260