From 7d30c6a12e0dcc68dd75b786fdfc922f296b6ed0 Mon Sep 17 00:00:00 2001
From: Owen Edwards <owen.r.edwards@gmail.com>
Date: Mon, 11 Jun 2018 21:20:32 -0700
Subject: [PATCH] Add parameter to processCues API to allow styling to be
 overridden.

---
 lib/vtt.js | 38 ++++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/lib/vtt.js b/lib/vtt.js
index 48ce4504..a6a54a59 100644
--- a/lib/vtt.js
+++ b/lib/vtt.js
@@ -538,8 +538,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,
@@ -565,7 +565,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"
   };
@@ -923,18 +926,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);
@@ -946,7 +954,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
@@ -971,11 +979,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;