Add hooks for overriding default cue styling.

To assist players in complyinig with US accessibility regulations, add a WebVTTSet dict the caller can poke user-defined preferences into for font family, size, color, etc. See also https://bugzilla.mozilla.org/show_bug.cgi?id=1167492 Signed-off-by: Ralph Giles <giles@mozilla.com>
mozilla · Nov 27, 2015 · 352982f · 352982f
1 parent 6c4fe04
commit 352982f
Showing 1 changed file with 58 additions and 1 deletion.
diff --git a/lib/vtt.js b/lib/vtt.js
@@ -18,6 +18,55 @@
 /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
 
 (function(global) {
+  function makeColorSet(color, opacity) {
+    if(opacity === undefined) {
+      opacity = 1;
+    }
+    return "rgba(" + [parseInt(color.substring(0, 2), 16),
+                      parseInt(color.substring(2, 4), 16),
+                      parseInt(color.substring(4, 6), 16),
+                      opacity].join(",") + ")";
+  }
+
+  var WebVTTPrefs = ['webvtt.font.color', 'webvtt.font.opacity', 'webvtt.font.scale', 'webvtt.bg.color',
+               'webvtt.bg.opacity', 'webvtt.edge.color', 'webvtt.edge.type'];
+
+  var fontScale = 1;
+
+  function observe(subject, topic, data) {
+     switch (data) {
+        case "webvtt.font.color":
+        case "webvtt.font.opacity":
+            var fontColor = Services.prefs.getCharPref("webvtt.font.color");
+            var fontOpacity = Services.prefs.getIntPref("webvtt.font.opacity") / 100;
+            WebVTTSet.fontSet = makeColorSet(fontColor, fontOpacity);
+            break;
+        case "webvtt.font.scale":
+            fontScale = Services.prefs.getIntPref("webvtt.font.scale") / 100;
+            break;
+        case "webvtt.bg.color":
+        case "webvtt.bg.opacity":
+            var backgroundColor = Services.prefs.getCharPref("webvtt.bg.color");
+            var backgroundOpacity = Services.prefs.getIntPref("webvtt.bg.opacity") / 100;
+            WebVTTSet.backgroundSet = makeColorSet(backgroundColor, backgroundOpacity);
+            break;
+        case "webvtt.edge.color":
+        case "webvtt.edge.type":
+            var edgeTypeList = ["", "0px 0px ", "4px 4px 4px ", "-2px -2px ", "2px 2px "];
+            var edgeType = Services.prefs.getIntPref("webvtt.edge.type");
+            var edgeColor = Services.prefs.getCharPref("webvtt.edge.color");
+            WebVTTSet.edgeSet = edgeTypeList[edgeType] + makeColorSet(edgeColor);
+            break;
+    }
+  }
+
+  if(typeof Services !== "undefined") {
+    var WebVTTSet = {};
+    WebVTTPrefs.forEach(function (pref) {
+      observe(undefined, undefined, pref);
+      Services.prefs.addObserver(pref, observe, false);
+    });
+  }
 
   var _objCreate = Object.create || (function() {
     function F() {}
@@ -719,6 +768,13 @@
     var isIE8 = (/MSIE\s8\.0/).test(navigator.userAgent);
     var color = "rgba(255, 255, 255, 1)";
     var backgroundColor = "rgba(0, 0, 0, 0.8)";
+    var textShadow = "";
+
+    if(typeof WebVTTSet !== "undefined") {
+      color = WebVTTSet.fontSet;
+      backgroundColor = WebVTTSet.backgroundSet;
+      textShadow = WebVTTSet.edgeSet;
+    }
 
     if (isIE8) {
       color = "rgb(255, 255, 255)";
@@ -734,6 +790,7 @@
     var styles = {
       color: color,
       backgroundColor: backgroundColor,
+      textShadow: textShadow,
       position: "relative",
       left: 0,
       right: 0,
@@ -1179,7 +1236,7 @@
         containerBox = BoxPosition.getSimpleBoxPosition(paddedOverlay),
         fontSize = Math.round(containerBox.height * FONT_SIZE_PERCENT * 100) / 100;
     var styleOptions = {
-      font: fontSize + "px " + FONT_STYLE
+      font: (fontSize * fontScale) + "px " + FONT_STYLE
     };
 
     (function() {