Skip to content

Module: src/ui/Thumbnails

The Thumbnails component displays preview images while scrubbing and hovering on the timeline. It uses a sprite sheet or grid-based image layout to show frame-accurate thumbnails in the scrubber tooltip and a larger preview above the player if enabled. The component dynamically adapts its layout and supports language-specific thumbnails when defined.

Version
1.0.2
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
object
Source
Thumbnails.js, line 15

Constructor

new Thumbnails(player, parent, optionsopt)

Creates an instance of the component.

Parameters:
Name Type Attributes Description
player Player

Reference to the VisionPlayer instance.
parent Controller

Reference to the parent instance.
options Object optional

Additional options.

Parameters:
Name Type Attributes Description
apiKey symbol optional

Token for extended access to the player API.

Members

Configuration options for the Thumbnails component.

Properties
Name Type Attributes Default Description
showInScrubber boolean optional true

Displays a thumbnail inside the scrubber tooltip.
showPreview boolean optional true

Displays a larger preview overlay while scrubbing.
Type
Object
Source
Thumbnails.js, line 22

Reference to the main player instance.

Type
Player
Source
Thumbnails.js, line 31

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

Type
Array<number>
Source
Thumbnails.js, line 37

Additional subscriptions once we confirm we have thumbnails data.

Type
Array<number>
Source
Thumbnails.js, line 43

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
Thumbnails.js, line 50

If enabled, holds a DOM node for the scrubber tooltip.

Type
DomSmith | undefined
Source
Thumbnails.js, line 56

If enabled, holds a DOM node for a bigger preview while scrubbing.

Type
DomSmith | undefined
Source
Thumbnails.js, line 62

Holds a copy of the media data thumbnail section.

Type
Object
Source
Thumbnails.js, line 68

Internal object storing current thumbnail info (src, dimensions, etc.).

Type
Data~mediaItem_thumbnail
Source
Thumbnails.js, line 74

Reference to the tooltip component.

Type
ScrubberTooltip
Source
Thumbnails.js, line 80

Methods

private #onDataReady(mediaItem)

Called when the media data is ready, checks for "thumbnails" in the data, sets up events if found.

Parameters:
Name Type Description
mediaItem Data~mediaItem

Object containing media data.

Parameters:
Name Type Attributes Description
thumbnails Data~mediaItem_thumbnail optional

The thumbnail configuration from the media data.
Listens
data/ready
Source
Thumbnails.js, line 136

private #onMediaReady(metaData)

Called when the media is ready. If we have thumbnail data, we load the thumbnail image(s).

Parameters:
Name Type Description
metaData Media~metaData

The currently selected meta data.

Parameters:
Name Type Description
language string | Object<string, string>

Possibly used if there are multiple language keys in "thumbnails.src".
Listens
media/ready
Throws

If thumbnail format is invalid.

Type Error
Source
Thumbnails.js, line 172

private #onThumbLoaded()

Called when the thumbnail image is loaded. Computes scaling and updates the layout.

Source
Thumbnails.js, line 237

private #onThumbError()

Called if the thumbnail image fails to load, showing an error style.

Source
Thumbnails.js, line 251

private #onThumbRender(percent)

Renders a portion of the thumbnail for the given scrubber tooltip position.

Parameters:
Name Type Description
percent number

The fraction of the media timeline (0..1).
Listens
scrubber/tooltip/visible
scrubber/tooltip/move
Source
Thumbnails.js, line 264

private #onScrubberUpdate(percent)

Handles scrubber moves to show a bigger preview (if enabled).

Parameters:
Name Type Description
percent number

The fraction of the media timeline (0..1).
Listens
scrubber/update
Source
Thumbnails.js, line 285

private #onScrubberEnd()

Called when scrubbing ends, hides the bigger preview.

Listens
scrubber/end
Source
Thumbnails.js, line 304

private #resize(size)

Called on UI resize, adjusts the bigger preview's aspect ratio scaling to match the viewport.

Parameters:
Name Type Description
size Object

Object containing the new size information.

Parameters:
Name Type Attributes Description
width number optional

The new player width.
height number optional

The new player height.
Listens
ui/resize
Source
Thumbnails.js, line 317

getElement() → HTMLElement|undefined

Returns the container element for this component, if needed.

Returns

The Tooltip Element.

Type HTMLElement | undefined
Source
Thumbnails.js, line 333

destroy()

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

Source
Thumbnails.js, line 342