add basic support of ttml span in p

Author: Vincent Valot

demo/demo.less

@@ -384,6 +384,18 @@ footer .mdl-mega-footer__link-list {
   width: 100%;
   height: 100%;
   margin: auto;
+
+  @cueColors: cyan, red, yellow, blue;
+
+  each(@cueColors, {
+    ::cue(.@{key}) {
+      color: @value;
+    }
+
+    ::cue(.background-@{key}) {
+      background-color: @value;
+    }
+  });
 }
 
 /* Style the intermediate tooltip attach points, required for tooltips to be

demo/main.js

@@ -893,6 +893,8 @@ class ShakaDemoMain {
       if (this.nativeControlsEnabled_) {
         this.controls_.setEnabledShakaControls(false);
         this.controls_.setEnabledNativeControls(true);
+
+        await this.player_.setTextTrackVisibility(true);
       } else {
         this.controls_.setEnabledShakaControls(true);
         this.controls_.setEnabledNativeControls(false);

lib/text/simple_text_displayer.js

@@ -221,6 +221,10 @@ shaka.text.SimpleTextDisplayer.convertToTextTrackCue_ = function(shakaCue) {
     vttCue.position = shakaCue.position;
   }
 
+  if (shakaCue.color !== null) {
+    vttCue.text = `<c.${shakaCue.color}>${shakaCue.payload}</c>`
+  }
+
   return vttCue;
 };
 

lib/text/ttml_text_parser.js

@@ -266,27 +266,42 @@ shaka.text.TtmlTextParser.getLeafNodes_ = function(element) {
 
   let childNodes = element.childNodes;
   for (let i = 0; i < childNodes.length; i++) {
-    // Currently we don't support styles applicable to span
-    // elements, so they are ignored.
-    let isSpanChildOfP = childNodes[i].nodeName == 'span' &&
-        element.nodeName == 'p';
-    if (childNodes[i].nodeType == Node.ELEMENT_NODE &&
-        childNodes[i].nodeName != 'br' && !isSpanChildOfP) {
+    const childNodeItem = childNodes[i];
+
+    if (childNodeItem.nodeType == Node.ELEMENT_NODE && childNodeItem.nodeName !== 'br') {
       // Get the leaves the child might contain.
-      goog.asserts.assert(childNodes[i] instanceof Element,
+      goog.asserts.assert(childNodeItem instanceof Element,
                           'Node should be Element!');
       let leafChildren = shaka.text.TtmlTextParser.getLeafNodes_(
-          /** @type {Element} */(childNodes[i]));
+          /** @type {Element} */(childNodeItem));
       goog.asserts.assert(leafChildren.length > 0,
                           'Only a null Element should return no leaves!');
-      result = result.concat(leafChildren);
+
+      const nearestAncestor = element.hasAttribute('begin') ? element : element.closest('[begin]');
+
+      if (nearestAncestor) {
+        const begin = nearestAncestor.getAttribute('begin');
+        const end = nearestAncestor.getAttribute('end');
+        const region = nearestAncestor.getAttribute('region');
+
+        result = result.concat(leafChildren.map(leafChild => {
+          leafChild.setAttribute('begin', begin);
+          leafChild.setAttribute('end', end);
+          leafChild.setAttribute('region', leafChild.getAttribute('region') || region);
+
+          return leafChild;
+        }));
+      } else {
+        result = result.concat(leafChildren);
+      }
     }
   }
 
   // if no result at this point, the element itself must be a leaf.
   if (!result.length) {
     result.push(element);
   }
+
   return result;
 };
 

ui/less/containers.less

@@ -196,10 +196,11 @@
 
   /* Set the captions in the middle horizontally by default. */
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: flex-end;
 
   /* Set the captions at the bottom by default. */
-  align-items: flex-end;
+  align-items: center;
 
   /* If the captions are too long to fit in the video container, hide the
    * overflow content. */

ui/text_displayer.js

@@ -223,11 +223,11 @@ shaka.ui.TextDisplayer = class {
     // captions inside the text container. Before means at the top of the
     // text container, and after means at the bottom.
     if (cue.displayAlign == Cue.displayAlign.BEFORE) {
-      panelStyle.alignItems = 'flex-start';
+      panelStyle.justifyContent = 'flex-start';
     } else if (cue.displayAlign == Cue.displayAlign.CENTER) {
-      panelStyle.alignItems = 'flex-top';
+      panelStyle.justifyContent = 'center';
     } else {
-      panelStyle.alignItems = 'flex-end';
+      panelStyle.justifyContent = 'flex-end';
     }
 
     captionsStyle.fontFamily = cue.fontFamily;