Skip to content

Allow for consumers to control whether or not styles are added to cues #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Allow for consumers to control whether or not styles are added to cues #39

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 17 additions & 8 deletions lib/vtt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -558,13 +558,20 @@ function StyleBox() {

// Apply styles to a div. If there is no div passed then it defaults to the
// div on 'this'.
StyleBox.prototype.applyStyles = function(styles, div) {
StyleBox.prototype.applyStyles = function(styles, div, inlineStyles, onapplystyles) {
div = div || this.div;
for (var prop in styles) {
if (styles.hasOwnProperty(prop)) {
div.style[prop] = styles[prop];

if (this.inlineStyles) {
for (var prop in styles) {
if (styles.hasOwnProperty(prop)) {
div.style[prop] = styles[prop];
}
}
}

if (typeof this.onapplystyles === 'function') {
this.onapplystyles(styles, div);
}
};

StyleBox.prototype.formatStyle = function(val, unit) {
Expand All @@ -573,9 +580,11 @@ StyleBox.prototype.formatStyle = function(val, unit) {

// Constructs the computed display state of the cue (a div). Places the div
// into the overlay which should be a block level element (usually a div).
function CueStyleBox(window, cue, styleOptions) {
function CueStyleBox(window, cue, styleOptions, inlineStyles, onapplystyles) {
StyleBox.call(this);
this.cue = cue;
this.inlineStyles = inlineStyles;
this.onapplystyles = onapplystyles;

// Parse our cue's text into a DOM tree rooted at 'cueDiv'. This div will
// have inline positioning and will function as the cue background box.
Expand All @@ -595,7 +604,7 @@ function CueStyleBox(window, cue, styleOptions) {
unicodeBidi: "plaintext"
};

this.applyStyles(styles, this.cueDiv);
this.applyStyles(styles, this.cueDiv, inlineStyles, onapplystyles);

// Create an absolutely positioned div that will be used to position the cue
// div. Note, all WebVTT cue-setting alignments are equivalent to the CSS
Expand Down Expand Up @@ -973,7 +982,7 @@ var CUE_BACKGROUND_PADDING = "1.5%";
// Runs the processing model over the cues and regions passed to it.
// @param overlay A block level element (usually a div) that the computed cues
// and regions will be placed into.
WebVTT.processCues = function(window, cues, overlay) {
WebVTT.processCues = function({ window, cues, overlay, onapplystyles, inlineStyles = true } = {}) {
if (!window || !cues || !overlay) {
return null;
}
Expand Down Expand Up @@ -1026,7 +1035,7 @@ WebVTT.processCues = function(window, cues, overlay) {
cue = cues[i];

// Compute the intial position and styles of the cue div.
styleBox = new CueStyleBox(window, cue, styleOptions);
styleBox = new CueStyleBox(window, cue, styleOptions, inlineStyles, onapplystyles);
paddedOverlay.appendChild(styleBox.div);

// Move the cue div to it's correct line position.
Expand Down