Skip to content

Module: src/controller/Volume

The Volume component allows the user to adjust the media volume and toggle mute/unmute. It optionally includes a slider UI for fine-grained control, which can auto-hide based on configuration. The component listens to player state and updates its icon and slider accordingly. On touch devices, it features specific interaction behavior for first tap and slider visibility.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
Source
Volume.js, line 14

Constructor

new Volume(player, parent)

Creates an instance of the Volume component.

Parameters:
Name Type Description
player Player

Reference to the VisionPlayer instance.
parent Controller

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

Members

Holds the instance configuration for this component.

Properties
Name Type Attributes Default Description
slider boolean optional true

If enabled, a volume slider is shown. If disabled, only muting / unmuting would be possible.
sliderAutoHide boolean optional true

If enabled, the slider is automatically hidden on pointerout after a short delay.
Type
Object
Source
Volume.js, line 22

Reference to the main player instance.

Type
Player
Source
Volume.js, line 31

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

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

DomSmith Instance for the volume wrapper.

Type
DomSmith
Source
Volume.js, line 43

Used to restore former volume when muting / unmuting.

Type
number
Source
Volume.js, line 49

Helper variable used for touch interaction. Since in this case there is no mouseover, the first tap enables the slider, and a second one mutes the media.

Type
boolean
Source
Volume.js, line 56

Timeout ID for hiding the slider automatically.

Type
number | undefined
Source
Volume.js, line 62

Methods

private #toggleMute(eventopt)

Toggle mute state on click/tap:

  • On touch devices: First tap -> reveal the volume slider / Second tap -> actually mute/unmute
  • On desktop: single click -> toggle mute immediately.
Parameters:
Name Type Attributes Description
event PointerEvent optional

The PointerEvent that triggered this call.
Source
Volume.js, line 134

private #setVolume()

Sets the volume of the media based on user input in this component.

Source
Volume.js, line 151

private #onVolumeUpdate()

Updates slider values and also adapts the icon display based on the current volume.

Listens
data/ready
media/volumechange
Source
Volume.js, line 168

private #showSlider(eventopt) → boolean|undefined

Shows the volume slider (if autohide is enabled).

Parameters:
Name Type Attributes Description
event PointerEvent optional

The PointerEvent that triggered this call.
Fires
volume/slider/show
Returns

Returns false when disabled.

Type boolean | undefined
Source
Volume.js, line 192

private #hideSlider(eventopt)

Hides the volume slider (if autohide is enabled).

Parameters:
Name Type Attributes Description
event PointerEvent optional

The PointerEvent that triggered this call.
Fires
volume/slider/hide
Source
Volume.js, line 210

private #disable()

Disables the volume component (e.g., no media, or an error).

Listens
data/nomedia
media/error
Source
Volume.js, line 225

private #enable()

Enables the volume component (e.g., once media can play).

Listens
media/canplay
Source
Volume.js, line 237

destroy()

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

Source
Volume.js, line 248