Bug 1167492 - Part 2: vtt.js changes. r=giles
☠☠ backed out by 6ea07e990e01 ☠ ☠
author<pkj1020>
Sun, 08 Nov 2015 16:46:00 -0800
changeset 308665 d02a1e8ea53d1cfa13e79e2ae17690376421ed5e
parent 308664 0a800bbb09f3f74c8e1f2be04b197767875f789b
child 308666 19ded68eecfb1ec37306cb9a83c3c9234d063eb1
push id5513
push userraliiev@mozilla.com
push dateMon, 25 Jan 2016 13:55:34 +0000
treeherdermozilla-beta@5ee97dd05b5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgiles
bugs1167492
milestone45.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1167492 - Part 2: vtt.js changes. r=giles [US Regulation] To Create Settings for Configuring Default Attributes of WebVTT.
dom/media/webvtt/vtt.jsm
--- a/dom/media/webvtt/vtt.jsm
+++ b/dom/media/webvtt/vtt.jsm
@@ -23,16 +23,66 @@ this.EXPORTED_SYMBOLS = ["WebVTT"];
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
 
 
 (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() {}
     return function(o) {
       if (arguments.length !== 1) {
         throw new Error('Object.create shim only accepts one parameter.');
       }
       F.prototype = o;
@@ -724,31 +774,39 @@ this.EXPORTED_SYMBOLS = ["WebVTT"];
   };
 
   // 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) {
     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)";
       backgroundColor = "rgb(0, 0, 0)";
     }
 
     StyleBox.call(this);
     this.cue = cue;
 
     // 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.
     this.cueDiv = parseContent(window, cue.text);
     var styles = {
       color: color,
       backgroundColor: backgroundColor,
+      textShadow: textShadow,
       position: "relative",
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       display: "inline"
     };
 
@@ -1184,17 +1242,17 @@ this.EXPORTED_SYMBOLS = ["WebVTT"];
       }
       return;
     }
 
     var boxPositions = [],
         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() {
       var styleBox, cue;
 
       for (var i = 0; i < cues.length; i++) {
         cue = cues[i];