Skip to content

Module: src/ui/Popup

The Popup component adds a customizable button to the controller that opens a layered popup panel. It is designed to be reused by other components such as AirPlay, Quality, PlaybackRate, and Loop, which inject their UI into the popup dynamically. The component supports flexible layout areas (top, center, bottom) and only reveals itself when actual content is detected.

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

Constructor

new Popup(player, parent, optionsopt)

Creates an instance of the Popup component.

Parameters:
Name Type Attributes Description
player Player

Reference to the player instance.

parent Controller

Reference to the parent instance, in this case the controller.

options Popup~PopupConfig optional

Additional configuration for the popup (defined at build time).

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
Popup.js, line 32

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

Type
Array<number>
Source
Popup.js, line 38

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
Popup.js, line 45

A DomSmith instance to create a button in the controller or parent container. This button is initially hidden until we detect content inside the popup.

Type
DomSmith
Source
Popup.js, line 52

A DomSmith used as the content container within the popup. Child components (AirPlay, Quality, etc.) attach their UI here.

Type
DomSmith
Source
Popup.js, line 65

MutationObserver that reveals the popup button once content is added to the popup container. Also tracks deletions of content nodes and automatically disables or hides the popup when no content is present.

Type
MutationObserver
Source
Popup.js, line 72

If true , popup icon is completely hidden instead of greyed our when popup content is empty.

Type
boolean
Source
Popup.js, line 79

Methods

private #onMutation(mutationList)

Called by the mutation observer when popup content changes. Hides or disables the popup icon if no content is present.

Parameters:
Name Type Description
mutationList Array

[description].

Source
Popup.js, line 155

showPopup(event)

Shows the popup when the user clicks the associated button.

Parameters:
Name Type Description
event Event

The DOM event that triggered this method.

Source
Popup.js, line 186

hidePopup()

Hides the popup, either because the UI hides or the user clicks away from the popup.

Listens
ui/hide
Source
Popup.js, line 196

refreshPopup()

Refreshes Popup (recalculates layout) on media/ready if open. May be necessary because child components might alter popup content. This handler is invoked with a very low priority to ensure it comes last.

Listens
media/ready
Source
Popup.js, line 208

getElement(area) → HTMLElement

Provides container elements for child components that want to attach content to this popup. "top", "center", and "bottom" can be used for layout areas, or fallback to the root wrapper.

Parameters:
Name Type Description
area string

The desired area: "top", "center", "bottom".

Returns

The container element for that area.

Type HTMLElement
Source
Popup.js, line 220

destroy()

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

Source
Popup.js, line 229

Type Definitions

Configuration options for the Popup Component. Those options are set at build time, not runtime by adding them to the "addComponent" function.

Properties
Name Type Attributes Default Description
buttonClass string optional

CSS class(es) for the popup button in the controller.

label string optional

Translate Path for the accessible label text for the button.

attach string optional

Where to attach the button in the parent's container (e.g., "right", "top", etc.).

viewClass string optional ""

Additional CSS class to apply to the popup container.

hideNoContent string optional false

If true and no content is present after dynamic deletion hide the popup icon completely, otherwise set it to disabled.

Type
Object
Source
Popup.js, line 4

Example

Player.addComponent("ui.controller.popupControls", Popup, { buttonClass: "icon control", viewClass: "vip-control-popup", label: "components.pictureControls.header", attach: "right" });