Skip to content

Module: src/controller/PlayOverlay

The PlayOverlay component displays a large play button centered in the viewport, allowing the user to toggle media playback. It dynamically hides or shows itself in response to player events and can optionally dim the background when paused. The overlay can also be shown only once after media load, based on configuration.

Version: 1.0.0
Author: Frank Kudermann - alphanull
License: MIT
Requires: DomSmith
Source: PlayOverlay.js, line 13

Constructor

new PlayOverlay(player, parent)

Creates an instance of the PlayOverlay component.

Parameters:

Name	Type	Description
`player`	Player	Reference to the VisionPlayer instance.
`parent`	UI	Reference to the parent instance, in this case the UI component.

Members

private #config :Object

Holds the instance configuration for this component.

Properties

Name	Type	Attributes	Default	Description
`dimmer`	boolean	optional	false	If enabled, dims the viewport background when media is paused.
`showOnce`	boolean	optional	false	If enabled, shows the overlay only once after the media has loaded.

Type: Object
Source: PlayOverlay.js, line 21

private #player :Player

Reference to the main player instance.

Type: Player
Source: PlayOverlay.js, line 30

private #subscriptions :Array<number>

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

Type: Array<number>
Source: PlayOverlay.js, line 36

private #overlay :DomSmith

Reference to the DomSmith Instance for the UI element.

Type: DomSmith
Source: PlayOverlay.js, line 42

private #isDisabled :boolean

Internal disabled flag to track whether the overlay is currently active.

Type: boolean
Source: PlayOverlay.js, line 48

Methods

private #onMediaReady()

Invoked when the media has loaded and metadata is available.

Listens: media/ready
Source: PlayOverlay.js, line 102

private #togglePlay()

This method toggles play / pause.

Source: PlayOverlay.js, line 114

private #onPlay()

This method switches the appearance of the play button to the 'play' state.

Listens: media/play
Source: PlayOverlay.js, line 127

private #onPause()

This method switches the appearance of the play button to the 'pause' state.

Listens: media/pause
Source: PlayOverlay.js, line 140

private #enable()

This method enables the play button.

Listens: media/canplay
Source: PlayOverlay.js, line 152

private #disable()

This method disables the play button, for example after an error occurred.

Listens: media/error; data/nomedia
Source: PlayOverlay.js, line 167

destroy()

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

Source: PlayOverlay.js, line 178