Skip to content

Module: src/text/SubtitleRendererVTT

The SubtitleRendererVTT component handles the rendering and positioning of VTT-based subtitles. It is responsible for displaying subtitle cues on screen, adapting to both horizontal and vertical layouts, and supporting snapping to line grids or absolute positioning. The renderer also performs HTML sanitization.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
sanitize
Source
SubtitleRendererVTT.js, line 15

Constructor

new SubtitleRendererVTT(player, parent)

Creates an instance of the SubtitleRendererVTT.

Parameters:
Name Type Description
player Player

Main player instance.
parent Subtitles

The parent Subtitles component.

Members

Configuration options for the SubtitleRendererVTT component.

Type
SubtitleRendererVTT~SubtitleRendererVTTConfig
Source
SubtitleRendererVTT.js, line 21

The player instance that this renderer belongs to.

Type
Object
Source
SubtitleRendererVTT.js, line 29

Maximum number of horizontal subtitle lines.

Type
number
Source
SubtitleRendererVTT.js, line 35

Map of active horizontal lines. Tracks which lines are in use.

Type
Array<{isActive: boolean}>
Source
SubtitleRendererVTT.js, line 41

Maximum number of vertical subtitle lines.

Type
number
Source
SubtitleRendererVTT.js, line 47

Map of active vertical lines. Tracks which lines are in use.

Type
Array<{isActive: boolean}>
Source
SubtitleRendererVTT.js, line 53

DomSmith instance to manage the structure of the subtitle elements.

Type
DomSmith
Source
SubtitleRendererVTT.js, line 59

A map containing all currently active subtitle cues.

Type
Map
Source
SubtitleRendererVTT.js, line 65

Methods

canRender(cue) → boolean

Checks if the subtitle cue has text to be rendered.

Parameters:
Name Type Description
cue Object

The subtitle cue object.
Returns

True if the cue contains text, false otherwise.

Type boolean
Source
SubtitleRendererVTT.js, line 109

render(cue, currentCues)

Renders a subtitle cue on the screen, positioning it based on various options.

Parameters:
Name Type Description
cue Object

The subtitle cue to render.
currentCues Map

A map containing all currently active subtitle cues.
Source
SubtitleRendererVTT.js, line 120

private #replaceOldestLine(cue, ele, isVertical)

Replaces the oldest subtitle line with a new one.

Parameters:
Name Type Description
cue Object

The subtitle cue to replace.
ele HTMLElement

Element representing the subtitle.
isVertical boolean

Whether the subtitle is displayed vertically.
Source
SubtitleRendererVTT.js, line 281

private #addLine(cue, index, ele, isVertical)

Adds a subtitle line to the grid.

Parameters:
Name Type Description
cue Object

The subtitle cue object.
index number

The index of the current line.
ele HTMLElement

Element representing the subtitle.
isVertical boolean

Whether the subtitle is displayed vertically.
Source
SubtitleRendererVTT.js, line 304

clear()

Clears the rendered subtitles and resets the line maps.

Source
SubtitleRendererVTT.js, line 334

remove(params)

Removes a subtitle line from the grid.

Parameters:
Name Type Description
params Object

The parameters for removing a line.

Parameters:
Name Type Attributes Description
line number optional

The index of the line to remove.
isVertical boolean

Whether the subtitle is vertical.
Source
SubtitleRendererVTT.js, line 357

destroy()

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

Source
SubtitleRendererVTT.js, line 369