Skip to content

Module: src/settings/VideoControls

The VideoControls component provides UI controls in the controls popup menu to adjust various visual properties of the video output in real time. It includes sliders for brightness, contrast, saturation, sharpening, and hue-rotation. These settings are mapped to CSS filters or SVG-based filters and applied live to the video element. The component is disabled automatically for audio-only media.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
math
Source
VideoControls.js, line 16

Constructor

new VideoControls(player, parent, optionsopt)

Creates an instance of the VideoControls Component.

Parameters:
Name Type Attributes Description
player Player

Reference to the media player instance.
parent Popup

Reference to the parent instance (In this case the settings popup).
options Object optional

Additional options.

Parameters:
Name Type Attributes Description
apiKey symbol optional

Token for extended access to the player API.

Members

Properties
Name Type Attributes Default Description
brightness number optional 1

Enables brightness control and sets initial level (0..2 range).
contrast number optional 1

Enables contrast control and sets initial level (0..2 range).
sharpen number optional 1

Enables sharpen control and sets initial level (0..2 range).
saturate number optional 1

Enables saturation control and sets initial level (0..2 range).
rotateHue number optional 1

Enables hue-rotation control and sets initial factor (0..2 range).
Type
Object
Source
VideoControls.js, line 26

Reference to the main player instance.

Type
Player
Source
VideoControls.js, line 38

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

Type
Array<number>
Source
VideoControls.js, line 44

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
VideoControls.js, line 51

Reference to the DomSmith Instance.

Type
DomSmith
Source
VideoControls.js, line 57

SVG used for the unsharp mask-based sharpening effect (applies feGaussianBlur and feComposite).

Type
DomSmith
Source
VideoControls.js, line 63

Holds the current control values for brightness, contrast, etc. Initialized from this.#config.

Type
Object<string, number>
Source
VideoControls.js, line 69

Unique svg filter id.

Source
VideoControls.js, line 74

Methods

private #onMediaReady(mediaItem)

Handler for "media/ready". If media is audio, disable controls; otherwise enable and apply them.

Parameters:
Name Type Description
mediaItem Data~mediaItem

Object containing media type info.

Parameters:
Name Type Description
mediaType string

Type of the media ('video' or 'audio').
Listens
data/ready
Source
VideoControls.js, line 182

private #updateFilter(eventopt)

Applies the current filter settings to the video element. Called on user input or onMediaReady.

Parameters:
Name Type Attributes Description
event Event optional

The input/change event if triggered by user interaction.
Source
VideoControls.js, line 200

private #resetFilter()

Resets all picture controls to their default values, and re-renders the filter.

Source
VideoControls.js, line 250

private #show()

Shows the controls.

Source
VideoControls.js, line 263

private #hide()

Completely hides the controls.

Source
VideoControls.js, line 272

private #enable()

Enables the UI controls.

Source
VideoControls.js, line 280

private #disable()

Disables the UI controls, eg when the media is audio-only.

Source
VideoControls.js, line 292

destroy()

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

Source
VideoControls.js, line 304