Skip to content

Module: src/selection/Playlist

The Playlist component provides a UI for selecting and managing multiple media items. It extends the player’s intrinsic ability to handle multiple media entries (see also the section describing the media format) by offering a user interface and additional functionality. The component supports previous/next navigation and an optional popup menu listing all playlist items, including thumbnails and secondary titles — if available. The Playlist menu also adds controls for looping, shuffling (with repetition avoidance), and continuous playback.

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

Constructor

new Playlist(player, parent, optionsopt)

Creates an instance of the Playlist component.

Parameters:
Name Type Attributes Description
player Player

Reference to the VisionPlayer instance.
parent Controller

The parent container, in this case the controller.
options Object optional

Additional options.

Parameters:
Name Type Attributes Description
apiKey symbol optional

Token for extended access to the player API.

Members

Holds the components' configuration options.

Properties
Name Type Attributes Default Description
loop boolean optional false

Enables looping the playlist to the first item after reaching the last one.
shuffle boolean optional false

Randomizes playback order; avoids repetitions.
continuous boolean optional true

Enables automatic playback of the next item after media ends.
showButtons boolean optional true

Shows previous/next navigation buttons in the controller UI.
showMenu boolean optional true

Enables the playlist menu popup and displays the menu button in the controller.
showMenuButtons boolean optional true

Shows control buttons for playlist behavior (loop, shuffle, etc.) in the menu.
showPoster boolean optional true

Displays poster images for each media item in the playlist menu.
Type
Object
Source
Playlist.js, line 33

Reference to the main player instance.

Type
Player
Source
Playlist.js, line 47

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

Type
Array<number>
Source
Playlist.js, line 53

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
Playlist.js, line 60

Reference to the DomSmith Instance for the controller buttons.

Type
DomSmith
Source
Playlist.js, line 72

References to DOM element holding the popup content.

Type
HTMLElement
Source
Playlist.js, line 84

Stores shuffled playback order when shuffle is enabled. Ensures each index is chosen only once before repeating.

Type
Array<number>
Source
Playlist.js, line 91

Holds all media items, basically a copy of the Data components' state.

Properties
Name Type Description
media Array<Data~mediaItem>

Array of media items.
currentMediaIndex number

Index of the currently active media item.
Type
Object
Source
Playlist.js, line 99

Methods

private #onDataParsed(data)

Event handler for when the player data is parsed, so we can build the playlist menu. Updates the playlist UI based on the current media data.

Parameters:
Name Type Description
data Object

Reference to the data store.
Listens
data/parsed
Source
Playlist.js, line 184

private #onDataReady()

Event handler for when the data is ready, updating the UI.

Listens
data/ready
Source
Playlist.js, line 306

private #updatePrevNextButtons(currentopt) → void

Updates the previous and next navigation buttons based on the current media index.

Parameters:
Name Type Attributes Default Description
current number optional this.#player.data.getMediaData("index")

The current media index.
Returns
Type void
Source
Playlist.js, line 328

private #shuffle(playopt, lastopt)

Selects a new random media index for playback in shuffle mode. Also makes sure to minimize repetitions.

Parameters:
Name Type Attributes Description
play boolean optional

Whether to immediately play the selected media.
last number optional

Index of last played element, to avoid repetitions.
Source
Playlist.js, line 347

private #openPlaylist(event)

Opens the playlist popup menu.

Parameters:
Name Type Description
event Event

The click event.
Source
Playlist.js, line 373

private #toggleSettings(type)

Toggles a specific setting (e.g., "continuous", "loop", or "shuffle") and updates the UI.

Parameters:
Name Type Description
type string

The type of setting to toggle ("continuous", "loop", or "shuffle").
Source
Playlist.js, line 383

private #nextItem(event, playopt)

Advances to the next media item.

Parameters:
Name Type Attributes Description
event Event

The click event (optional).
play boolean optional

Determines whether to play the new media immediately.
Source
Playlist.js, line 398

private #prevItem(event, playopt)

Moves to the previous media item.

Parameters:
Name Type Attributes Description
event Event

The click event (optional).
play boolean optional

Determines whether to play the new media immediately.
Source
Playlist.js, line 414

private #selectItem(event, playopt)

Selects a media item from the playlist menu.

Parameters:
Name Type Attributes Description
event Event

The click event.
play boolean optional

Determines whether to play the selected media after selecting.
Listens
click (menu item)
Source
Playlist.js, line 436

private #onMediaEnded()

Event handler for when the media ends. If continuous playback is enabled, moves to the next item or loops back to the first item.

Listens
media/ended
Source
Playlist.js, line 448

destroy()

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

Source
Playlist.js, line 465