From 5c404315999bee69dd853d78b656b5f5f5fcefde Mon Sep 17 00:00:00 2001 From: Hampton Maxwell Date: Fri, 18 Jan 2019 16:29:49 -0800 Subject: [PATCH 1/2] Provide the ability to pass styleOptions to processCues --- lib/vtt.js | 38 ++++++++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/lib/vtt.js b/lib/vtt.js index 4a0e7208..8d0d8b5f 100644 --- a/lib/vtt.js +++ b/lib/vtt.js @@ -545,8 +545,8 @@ function CueStyleBox(window, cue, styleOptions) { // have inline positioning and will function as the cue background box. this.cueDiv = parseContent(window, cue.text); var styles = { - color: "rgba(255, 255, 255, 1)", - backgroundColor: "rgba(0, 0, 0, 0.8)", + color: styleOptions.color || "inherit", + backgroundColor: styleOptions.backgroundColor || "inherit", position: "relative", left: 0, right: 0, @@ -572,7 +572,10 @@ function CueStyleBox(window, cue, styleOptions) { : "vertical-rl", unicodeBidi: "plaintext", textAlign: cue.align === "middle" ? "center" : cue.align, - font: styleOptions.font, + font: styleOptions.font || "inherit", + fontVariant: styleOptions.fontVariant || "inherit", + textShadow: styleOptions.textShadow || "inherit", + backgroundColor: styleOptions.windowColor || "inherit", whiteSpace: "pre-line", position: "absolute" }; @@ -930,18 +933,23 @@ WebVTT.convertCueToDOMTree = function(window, cuetext) { return parseContent(window, cuetext); }; -var FONT_SIZE_PERCENT = 0.05; -var FONT_STYLE = "sans-serif"; -var CUE_BACKGROUND_PADDING = "1.5%"; +var DEFAULT_FONT_SIZE_PERCENT = 5; // 5% of the height of the video window +var DEFAULT_FONT_STYLE = "sans-serif"; +var DEFAULT_CUE_BACKGROUND_PADDING = "1.5%"; +var DEFAULT_FOREGROUND_COLOR = "rgba(255, 255, 255, 1)"; // White, 100% opaque +var DEFAULT_BACKGROUND_COLOR = "rgba(0, 0, 0, 0.8)"; // Black, 80% opaque +var DEFAULT_WINDOW_COLOR = "rgba(0, 0, 0, 0.0)"; // Black, translucent // 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, styles) { if (!window || !cues || !overlay) { return null; } + styles = styles || {}; + // Remove all previous children. while (overlay.firstChild) { overlay.removeChild(overlay.firstChild); @@ -953,7 +961,7 @@ WebVTT.processCues = function(window, cues, overlay) { paddedOverlay.style.right = "0"; paddedOverlay.style.top = "0"; paddedOverlay.style.bottom = "0"; - paddedOverlay.style.margin = CUE_BACKGROUND_PADDING; + paddedOverlay.style.margin = styles.cueBackgroundMargin || DEFAULT_CUE_BACKGROUND_PADDING; overlay.appendChild(paddedOverlay); // Determine if we need to compute the display states of the cues. This could @@ -978,11 +986,21 @@ WebVTT.processCues = function(window, cues, overlay) { var boxPositions = [], containerBox = BoxPosition.getSimpleBoxPosition(paddedOverlay), - fontSize = Math.round(containerBox.height * FONT_SIZE_PERCENT * 100) / 100; + fontSize = Math.round(containerBox.height * ((styles.fontSizePercent || 100.0) / 100.0) * DEFAULT_FONT_SIZE_PERCENT) / 100; var styleOptions = { - font: fontSize + "px " + FONT_STYLE + color: styles.color || DEFAULT_FOREGROUND_COLOR, + backgroundColor: styles.backgroundColor || DEFAULT_BACKGROUND_COLOR, + windowColor: styles.windowColor || DEFAULT_WINDOW_COLOR, + font: fontSize + "px " + (styles.fontStyle || DEFAULT_FONT_STYLE) }; + if (styles.fontVariant) { + styleOptions.fontVariant = styles.fontVariant; + } + if (styles.textShadow) { + styleOptions.textShadow = styles.textShadow; + } + (function() { var styleBox, cue; From c76400a46e2f62710c2167e36cd22ac5ca823e42 Mon Sep 17 00:00:00 2001 From: Hampton Maxwell Date: Fri, 18 Jan 2019 16:30:56 -0800 Subject: [PATCH 2/2] Document style options change to processCues --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c78b9403..36d3cbdf 100644 --- a/README.md +++ b/README.md @@ -176,7 +176,7 @@ nodes attached to a top level div. var div = WebVTT.convertCueToDOMTree(window, cuetext); ``` -## WebVTT.processCues(window, cues, overlay) +## WebVTT.processCues(window, cues, overlay, options) Converts the cuetext of the cues passed to it to DOM trees—by calling convertCueToDOMTree—and then runs the processing model steps of the WebVTT specification on the divs. The processing model applies the necessary @@ -184,8 +184,11 @@ CSS styles to the cue divs to prepare them for display on the web page. During t to a block level element (overlay). The overlay should be a part of the live DOM as the algorithm will use the computed styles (only of the divs to do overlap avoidance. +You can pass an optional options object as an argument to override the default styles. See the code for what styles +are supported. + ```javascript -var divs = WebVTT.processCues(window, cues, overlay); +var divs = WebVTT.processCues(window, cues, overlay, options); ``` ## ParsingError