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

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 29

Reference to the main player instance.

Type
Player
Source
Playlist.js, line 43

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

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

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 56

Reference to the DomSmith Instance for the controller buttons.

Type
DomSmith
Source
Playlist.js, line 68

References to DOM element holding the popup content.

Type
HTMLElement
Source
Playlist.js, line 80

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

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

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 95

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 179

private #onDataReady()

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

Listens
data/ready
Source
Playlist.js, line 301

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 323

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 342

private #openPlaylist(event)

Opens the playlist popup menu.

Parameters:
Name Type Description
event Event

The click event.
Source
Playlist.js, line 368

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 378

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 393

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 409

private #selectItem(event)

Selects a media item from the playlist menu.

Parameters:
Name Type Description
event Event

The click event.

Parameters:
Name Type Description
target HTMLElement

The target element.
Listens
click (menu item)
Source
Playlist.js, line 431

private #setMediaIndex(index, playopt)

Sets the media index and plays the media if the play flag is true.

Parameters:
Name Type Attributes Description
index number

The index of the media item to switch to.
play boolean optional

Determines whether to play the selected media after selecting.
Source
Playlist.js, line 443

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 456

destroy()

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

Source
Playlist.js, line 473