Skip to content

Module: src/ui/Time

The Time component displays the current, remaining, and total media time. Users can click the time element to toggle between representations, including optional frame display and prefix indicators. It dynamically updates based on playback state and disables itself during live streams or playback errors.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
Looper
convertTime
Source
Time.js, line 17

Constructor

new Time(player, parent)

Creates an instance of the Time component.

Parameters:
Name Type Description
player Player

Reference to the Visi#onPlayer instance.
parent Controller

The parent container, in this case the controller.

Members

Holds the instance configuration for this component.

Properties
Name Type Attributes Default Description
display string optional "current"

Initial time display mode, either "current" or "remaining".
showFrames boolean optional false

Whether to display frames in the time string.
Type
Object
Source
Time.js, line 25

Reference to the main player instance.

Type
Player
Source
Time.js, line 34

Reference to the DomSmith Instance for the time display.

Type
DomSmith
Source
Time.js, line 40

Render Loop Instance, used for updating the scrubber.

Type
Looper
Source
Time.js, line 46

Methods

private #onMediaReady()

Sets up the component as soon as the media is available. Uses a placeholder text if the stream is a Live Stream.

Listens
media/ready
Source
Time.js, line 111

private #onPlay()

Immediately updates time display when playback starts (and frames are shown).

Listens
media/play
Source
Time.js, line 149

private #onPause()

Cancels frame-based updates when paused.

Listens
media/pause
Source
Time.js, line 159

private #onTimeUpdate()

Updates the time display based on the timeupdate event, or by using a requestAnimationFrame if frames should be displayed as well (to get more smooth updates in this case).

Listens
media/timeupdate
Source
Time.js, line 170

private #onToggleTime()

Toggles time display mode between "current" and "remaining" after user klicked on the time display.

Source
Time.js, line 208

private #enable()

Enables the play time display. This method listens to canplay events in order to restore a usable state again when the player recovered from a media error (for example by loading another file).

Listens
media/canplay
Source
Time.js, line 220

private #disable()

Disables the time display. This method listens to media error events which cause the time display to be disabled.

Listens
media/error
data/nomedia
Source
Time.js, line 231

destroy()

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

Source
Time.js, line 240