- Version
- 1.0.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 #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 57
private #dom :DomSmith
Reference to the DomSmith Instance for the scrubber.
- Type
- DomSmith
- Source
- Scrubber.js, line 63
private #canvasContext :CanvasRenderingContext2D
Holds the canvas context of the buffered / played element.
- Type
- CanvasRenderingContext2D
- Source
- Scrubber.js, line 69
private #resizeObserver :ResizeObserver
ResizeObserver instance used to track size changes of the scrubber element.
- Type
- ResizeObserver
- Source
- Scrubber.js, line 75
private #scrubberWidth :number
Holds the actual width of the scrubber (in pixels).
- Type
- number
- Source
- Scrubber.js, line 81
private #scrubberHeight :number
Holds the actual height of the scrubber (in pixels).
- Type
- number
- Source
- Scrubber.js, line 87
private #current :Media~metaData
Reference to the current media item.
- Type
- Media~metaData
- Source
- Scrubber.js, line 93
private #isScrubbing :boolean
Indicates if active scrubbing takes place.
- Type
- boolean
- Source
- Scrubber.js, line 99
private #isDisabled :boolean
Indicates if scrubber is disabled, if true no rendering takes place.
- Type
- boolean
- Source
- Scrubber.js, line 105
private #renderLoop :Looper
Render Loop Instance, used for updating the scrubber.
- Type
- Looper
- Source
- Scrubber.js, line 111
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 117
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 123
private #thumbWidth :number
Saved thumbnail width for later positioning, updated when resize occurs.
- Type
- number
- Source
- Scrubber.js, line 129
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 137
Methods
private #onDomReady()
Called when the entire player is ready. Sets up colors and implements resize.
- Listens
- dom/ready
- Source
- Scrubber.js, line 212
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 231
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 253
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 265
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 277
private #onInputKeyUp()
Keyup handler on the input element, seeks to the last buffered position.
- Fires
- scrubber/end
- Source
- Scrubber.js, line 333
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 353
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 378
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 402
private #onTimeUpdate()
Just updates the aria valuetext, but only if in focus.
- Listens
- media/timeupdate
- Source
- Scrubber.js, line 424
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 438
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 493
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 507
private #enable()
This method enables the scrubber.
- Listens
- media/canplay
- Source
- Scrubber.js, line 525
private #disable()
This method disables the scrubber, for example after an error occurred.
- Listens
- media/error
- data/nomedia
- Source
- Scrubber.js, line 539
getElement() → HTMLElement
Returns the wrapper element for the scrubber.
- Returns
-
The wrapper element of the scrubber.
- Type HTMLElement
- Source
- Scrubber.js, line 551
destroy()
This method removes all events, subscriptions and DOM nodes created by this component.
- Source
- Scrubber.js, line 560
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 572
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 579
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 586