- Version
- 1.1.0
- License
- MIT
- Requires
- DomSmith
- Looper
- Source
- Scrubber.js, line 15
Constructor
new Scrubber(player, parent, optionsopt)
Creates an instance of the Scrubber component.
| Name | Type | Attributes | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
player |
Player |
Reference to the VisionPlayer instance. |
|||||||||
parent |
Controller |
Reference to the parent instance, in this case the controller. |
|||||||||
options |
Object | optional |
Additional options.
|
- Throws
-
If trying to disable this component.
Type Error
Members
private #config :Object
Holds the instance configuration for this component.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
placement
|
string | optional | 'top' | Where to place the scrubber, either on 'top' or centered in the 'buttons' bar. The latter results in a more compact layout. |
continuousUpdate
|
boolean | optional | false | Enables continuous seeking while dragging. Since this can be quite laggy on network connections, this setting is more suitable for playing local files. |
continuousUpdateBlob
|
boolean | optional | true | Enables continuous seeking while dragging for blob media sources, even if |
showBuffered
|
boolean | optional | true | If set, shows buffered ranges on the scrubber. |
showPlayed
|
boolean | optional | true | If set, shows played ranges on the scrubber. |
- Type
- Object
- Source
- Scrubber.js, line 26
private #player :Player
Reference to the main player instance.
- Type
- Player
- Source
- Scrubber.js, line 38
private #parent :Controller
Reference to the parent instance.
- Type
- Controller
- Source
- Scrubber.js, line 44
private #subscriptions :Array<number>
Holds tokens of subscriptions to player events, for later unsubscribe.
- Type
- Array<number>
- Source
- Scrubber.js, line 50
private #engineSubs :Array<number>
Holds tokens of subscriptions to player events, for later unsubscribe.
- Type
- Array<number>
- Source
- Scrubber.js, line 56
private #apiKey :symbol
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
- Scrubber.js, line 63
private #dom :DomSmith
Reference to the DomSmith Instance for the scrubber.
- Type
- DomSmith
- Source
- Scrubber.js, line 69
private #canvasContext :CanvasRenderingContext2D
Holds the canvas context of the buffered / played element.
- Type
- CanvasRenderingContext2D
- Source
- Scrubber.js, line 75
private #resizeObserver :ResizeObserver
ResizeObserver instance used to track size changes of the scrubber element.
- Type
- ResizeObserver
- Source
- Scrubber.js, line 81
private #scrubberWidth :number
Holds the actual width of the scrubber (in pixels).
- Type
- number
- Source
- Scrubber.js, line 87
private #scrubberHeight :number
Holds the actual height of the scrubber (in pixels).
- Type
- number
- Source
- Scrubber.js, line 93
private #current :Media~metaData
Reference to the current media item.
- Type
- Media~metaData
- Source
- Scrubber.js, line 99
private #isScrubbing :boolean
Indicates if active scrubbing takes place.
- Type
- boolean
- Source
- Scrubber.js, line 105
private #isDisabled :boolean
Indicates if scrubber is disabled, if true no rendering takes place.
- Type
- boolean
- Source
- Scrubber.js, line 111
private #renderLoop :Looper
Render Loop Instance, used for updating the scrubber.
- Type
- Looper
- Source
- Scrubber.js, line 117
private #lastSeekTime :number
Used to throttle seeking when seeking continuously, even with local files we don't want to seek 60x a second.
- Type
- number
- Source
- Scrubber.js, line 123
private #scrubOffsetLeft :number
Updated once when dragging starts, so we dont need to calculate this value again when moving the thumbnail.
- Type
- number
- Source
- Scrubber.js, line 129
private #thumbWidth :number
Saved thumbnail width for later positioning, updated when resize occurs.
- Type
- number
- Source
- Scrubber.js, line 135
private #keyDownBufferedTime :number
Holds the last saved time when user is navigating via keyboard. Used for updateing the scrubber after the user has released the key, and also prevwents event processing when the input just entered focus.
- Type
- number
- Source
- Scrubber.js, line 143
Methods
private #onDomReady()
Called when the entire player is ready. Sets up colors and implements resize.
- Listens
- dom/ready
- Source
- Scrubber.js, line 208
private #onMediaReady(metaData)
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.
| Name | Type | Description |
|---|---|---|
metaData |
Media~metaData |
The currently selected metaData. |
- Listens
- media/ready
- Source
- Scrubber.js, line 227
private #onUpdateStart()
Begins updating/rendering as soon as the UI is shown or media is played.
- Listens
- ui/show
- media/play
- Source
- Scrubber.js, line 249
private #onUpdateStop()
Stops updating/rendering as soon as the UI is hidden or media is paused.
- Listens
- ui/hide
- media/pause
- Source
- Scrubber.js, line 261
private #onInputKeyDown(event)
Keydown handler on the input element, basically simulates keyboard interaction and updates the scubber thumbnail as well as the input element itself, so screenreaders are updated. Does not do anything if any non matching key is pressed.
| Name | Type | Description |
|---|---|---|
event |
KeyboardEvent |
The originating keyup event. |
- Fires
- scrubber/update
- Source
- Scrubber.js, line 273
private #onInputKeyUp()
Keyup handler on the input element, seeks to the last buffered position.
- Fires
- scrubber/end
- Source
- Scrubber.js, line 329
private #onScrubberStart(event)
Invoked when dragging starts. Can be either a pointerdown or keyboard event or when element has keyboard focus.
| Name | Type | Description |
|---|---|---|
event |
KeyboardEvent | PointerEvent |
The event that caused the drag start. Can be either a pointerdown or keyboard event. |
- Fires
- scrubber/start
- Source
- Scrubber.js, line 349
private #onScrubberUpdate(event)
Invoked by the scrubber range slider when dragging is in progress or scrubber is triggered by keyboard.
| Name | Type | Description |
|---|---|---|
event |
InputEvent |
The input event that caused the drag start. |
- Fires
- scrubber/update
- Source
- Scrubber.js, line 374
private #onScrubberEnd(event)
Invoked when dragging the scrubber ends or a keyup event occurs.
| Name | Type | Description |
|---|---|---|
event |
KeyboardEvent | PointerEvent |
The event that caused the drag end. Can be either a pointerup or keyboard event. |
- Fires
- scrubber/end
- Source
- Scrubber.js, line 398
private #onTimeUpdate()
Just updates the aria valuetext, but only if in focus.
- Listens
- media/timeupdate
- Source
- Scrubber.js, line 420
private #render(event, topic)
Renders the scrubber progress by drawing the buffered/played ranges on the canvas.
| Name | Type | Description |
|---|---|---|
event |
null |
No Payload. |
topic |
Event |
The event topic ('media/seeked' or 'media/progress'). |
- Listens
- media/progress
- media/seeked
- Source
- Scrubber.js, line 434
private #drawPosition(percentopt)
Positions the scrubber 'thumb' in the range input by setting the current time.
| Name | Type | Attributes | Description |
|---|---|---|---|
percent |
number | optional |
The scrubber position in percent. If not defined value will be calculated from currentTime and duration. |
- Source
- Scrubber.js, line 489
private #resize(entriesopt)
Invoked when window resizes. Sets the scrubber width value accordingly.
| Name | Type | Attributes | Description |
|---|---|---|---|
entries |
Array<ResizeObserverEntry> | optional |
The entries if using ResizeObserver, otherwise |
- Source
- Scrubber.js, line 503
private #onEngineSwitched(data)
Invoked when the engine is switched.
| Name | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data |
Object |
The event data.
|
- Listens
- player/engine/switched
- Source
- Scrubber.js, line 525
private #enable()
This method enables the scrubber.
- Listens
- media/canplay
- Source
- Scrubber.js, line 562
private #disable()
This method disables the scrubber, for example after an error occurred.
- Listens
- media/error
- data/nomedia
- Source
- Scrubber.js, line 576
getElement() → HTMLElement
Returns the wrapper element for the scrubber.
- Returns
-
The wrapper element of the scrubber.
- Type HTMLElement
- Source
- Scrubber.js, line 588
destroy()
This method removes all events, subscriptions and DOM nodes created by this component.
- Source
- Scrubber.js, line 597
Events
scrubber/start
This event is fired when user starts scrubbing.
| Name | Type | Description |
|---|---|---|
position |
Object |
Scrubber Position. |
percent |
number |
Scrubber Position in percent, ranging from 0-100. |
- Source
- Scrubber.js, line 610
scrubber/update
This event is fired while user is scrubbing.
| Name | Type | Description |
|---|---|---|
position |
Object |
Scrubber Position. |
percent |
number |
Scrubber Position in percent, ranging from 0-100. |
- Listeners
- Thumbnails#onScrubberUpdate
- Source
- Scrubber.js, line 617
scrubber/end
This event is fired when user stops scrubbing.
| Name | Type | Description |
|---|---|---|
position |
Object |
Scrubber Position. |
percent |
number |
Scrubber Position in percent, ranging from 0-100. |
- Listeners
- Thumbnails#onScrubberEnd
- Source
- Scrubber.js, line 624