Skip to content

Module: src/controller/ScrubberTooltip

The ScrubberTooltip component provides a tooltip when hovering over the scrubber. Tooltip shows the time indicated by the hover position, but also can act as a container for other modules, like chapter or thumbnails.

Version
1.0.2
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
Tooltip
convertTime
Source
ScrubberTooltip.js, line 17

Constructor

new ScrubberTooltip(player, parent, optionsopt)

Creates an instance of the ScrubberTooltip component.

Parameters:
Name Type Attributes Description
player Player

Reference to the VisionPlayer instance.

parent Scrubber

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

options Object optional

Additional options.

Parameters:
Name Type Attributes Description
apiKey symbol optional

Token for extended access to the player API.

Members

Holds the instance configuration for this component.

Properties
Name Type Attributes Default Description
showFrames boolean optional false

If „true“, the tooltip also shows frames in addition (only works if frameRate information is available).

showTime boolean optional true

If „true“, the tooltip shows the time at the current scrubber position.

Type
Object
Source
ScrubberTooltip.js, line 25

Reference to the main player instance.

Type
Player
Source
ScrubberTooltip.js, line 34

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

Type
Array<number>
Source
ScrubberTooltip.js, line 40

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
ScrubberTooltip.js, line 47

Reference to the DomSmith instance for the tooltip container.

Type
DomSmith
Source
ScrubberTooltip.js, line 53

Reference to the scrubber's root DOM element.

Type
HTMLElement
Source
ScrubberTooltip.js, line 59

Tooltip instance used to display time/frame info.

Type
Tooltip
Source
ScrubberTooltip.js, line 65

Methods

private #onMediaReady()

Sets up the scrubber as soon as the meta data is available. If the current media happens to be a live stream, the scrubber is being hidden.

Listens
media/ready
Source
ScrubberTooltip.js, line 126

private #onTooltipShow(event) → boolean|undefined

Called when the pointer enters the scrubber area, showing the tooltip.

Parameters:
Name Type Description
event PointerEvent

The pointer event that triggers showing the tooltip.

Fires
scrubber/tooltip/show
Returns

Returns false if no finite duration.

Type boolean | undefined
Source
ScrubberTooltip.js, line 139

private #onTooltipHidden(event)

Called when the pointer leaves the scrubber area, hiding the tooltip.

Parameters:
Name Type Description
event PointerEvent

The pointer event that triggers hiding the tooltip.

Source
ScrubberTooltip.js, line 152

private #onTooltipVisible(event, tt)

Called once the tooltip is fully shown, updates the time for the initial position.

Parameters:
Name Type Description
event PointerEvent

The originating pointer event.

tt uiTooltip

The Tooltip instance.

Fires
scrubber/tooltip/visible
Source
ScrubberTooltip.js, line 164

private #onTooltipMove(event, tt)

Callback, invoked by the tooltip module when it is being moved. Used to update the time display based on the tooltip position.

Parameters:
Name Type Description
event PointerEvent

The originating pointer event.

tt uiTooltip

The Tooltip instance.

Fires
scrubber/tooltip/move
Source
ScrubberTooltip.js, line 179

private #setToolTipTime(range)

Sets the tooltip text to the correct time (or frames) based on the given fraction of duration.

Parameters:
Name Type Description
range number

A value from 0 to 1, fraction of total duration.

Source
ScrubberTooltip.js, line 191

private #enable()

Enables the tooltip, attaching the pointerenter listener.

Source
ScrubberTooltip.js, line 205

private #disable()

Disables the tooltip, removing the pointerenter listener.

Source
ScrubberTooltip.js, line 215

getElement() → HTMLElement

Returns the tooltip's main container element.

Returns

The tooltip wrapper element.

Type HTMLElement
Source
ScrubberTooltip.js, line 226

destroy()

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

Source
ScrubberTooltip.js, line 235

Events

scrubber/tooltip/show

This event is fired when the tooltip is abpout being shown.

Listeners
Chapters#onToolTip
Source
ScrubberTooltip.js, line 247

scrubber/tooltip/visible

This event is fired when the tooltip is visible.

Parameters:
Name Type Description
position Object

Tooltip Position relative to scrubber.

percent number

Tooltip position (in percent).

Listeners
Chapters#onToolTip
Thumbnails#onThumbRender
Source
ScrubberTooltip.js, line 252

scrubber/tooltip/move

This event is fired when the tooltip is moving.

Parameters:
Name Type Description
position Object

Tooltip Position relative to scrubber.

percent number

Tooltip position (in percent).

Listeners
Chapters#onToolTip
Thumbnails#onThumbRender
Source
ScrubberTooltip.js, line 259