Add support to tts:border, tts:letterSpacing and tts:opacity in TTML (#2408)

Author: Álvaro Velad Galván

externs/shaka/text.js

@@ -255,6 +255,13 @@ shaka.extern.Cue = class {
      */
     this.backgroundImage;
 
+    /**
+     * Text border.
+     * @type {!string}
+     * @exportDoc
+     */
+    this.border;
+
     /**
      * Text font size in px or em (e.g. '100px'/'100em').
      * @type {string}
@@ -283,6 +290,20 @@ shaka.extern.Cue = class {
      */
     this.fontFamily;
 
+    /**
+     * Text letter spacing.
+     * @type {!string}
+     * @exportDoc
+     */
+    this.letterSpacing;
+
+    /**
+     * Text opacity.
+     * @type {!number}
+     * @exportDoc
+     */
+    this.opacity;
+
     /**
      * Text decoration. A combination of underline, overline
      * and line through. Empty array means no decoration.

lib/text/cue.js

@@ -129,6 +129,12 @@ shaka.text.Cue = class {
      */
     this.backgroundImage = '';
 
+    /**
+     * @override
+     * @exportInterface
+     */
+    this.border = '';
+
     /**
      * @override
      * @exportInterface
@@ -153,6 +159,18 @@ shaka.text.Cue = class {
      */
     this.fontFamily = '';
 
+    /**
+     * @override
+     * @exportInterface
+     */
+    this.letterSpacing = '';
+
+    /**
+     * @override
+     * @exportInterface
+     */
+    this.opacity = 1;
+
     /**
      * @override
      * @exportInterface

lib/text/ttml_text_parser.js

@@ -511,6 +511,12 @@ shaka.text.TtmlTextParser = class {
       cue.backgroundColor = backgroundColor;
     }
 
+    const border = TtmlTextParser.getStyleAttribute_(
+        cueElement, region, styles, 'border');
+    if (border) {
+      cue.border = border;
+    }
+
     const fontFamily = TtmlTextParser.getStyleAttribute_(
         cueElement, region, styles, 'fontFamily');
     if (fontFamily) {
@@ -561,6 +567,18 @@ shaka.text.TtmlTextParser = class {
       }
     }
 
+    const letterSpacing = TtmlTextParser.getStyleAttribute_(
+        cueElement, region, styles, 'letterSpacing');
+    if (letterSpacing && letterSpacing.match(TtmlTextParser.unitValues_)) {
+      cue.letterSpacing = letterSpacing;
+    }
+
+    const opacity = TtmlTextParser.getStyleAttribute_(
+        cueElement, region, styles, 'opacity');
+    if (opacity) {
+      cue.opacity = opacity;
+    }
+
     // Text decoration is an array of values which can come both from the
     // element's style or be inherited from elements' parent nodes. All of those
     // values should be applied as long as they don't contradict each other. If

ui/text_displayer.js

@@ -229,8 +229,10 @@ shaka.ui.TextDisplayer = class {
     captionsStyle.whiteSpace = 'pre-line';
     captions.textContent = cue.payload;
     captionsStyle.backgroundColor = cue.backgroundColor;
+    captionsStyle.border = cue.border;
     captionsStyle.color = cue.color;
     captionsStyle.direction = cue.direction;
+    captionsStyle.opacity = cue.opacity;
 
     if (cue.backgroundImage) {
       captionsStyle.backgroundImage = 'url(\'' + cue.backgroundImage + '\')';
@@ -270,6 +272,7 @@ shaka.ui.TextDisplayer = class {
     captionsStyle.fontWeight = cue.fontWeight.toString();
     captionsStyle.fontSize = cue.fontSize;
     captionsStyle.fontStyle = cue.fontStyle;
+    captionsStyle.letterSpacing = cue.letterSpacing;
 
     // The line attribute defines the positioning of the text container inside
     // the video container.