From a0bcd11ad10f68c6c2caa468cc4941499a30b3b1 Mon Sep 17 00:00:00 2001
From: valotvince <valot.vince@gmail.com>
Date: Fri, 24 May 2019 16:21:53 +0200
Subject: [PATCH] add basic support of ttml span in p

---
 demo/demo.less                    | 12 +++++++++++
 demo/main.js                      |  2 ++
 lib/text/simple_text_displayer.js |  4 ++++
 lib/text/ttml_text_parser.js      | 33 ++++++++++++++++++++++---------
 ui/less/containers.less           |  5 +++--
 ui/text_displayer.js              |  6 +++---
 6 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/demo/demo.less b/demo/demo.less
index 41e7e97ea0f..08c0c922190 100644
--- a/demo/demo.less
+++ b/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
diff --git a/demo/main.js b/demo/main.js
index 0b11464f906..5ca5cf92c72 100644
--- a/demo/main.js
+++ b/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);
diff --git a/lib/text/simple_text_displayer.js b/lib/text/simple_text_displayer.js
index 7633c313600..921bfe3da3b 100644
--- a/lib/text/simple_text_displayer.js
+++ b/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;
 };
 
diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
index 8864f1d7b35..25736d47108 100644
--- a/lib/text/ttml_text_parser.js
+++ b/lib/text/ttml_text_parser.js
@@ -266,20 +266,34 @@ 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);
+      }
     }
   }
 
@@ -287,6 +301,7 @@ shaka.text.TtmlTextParser.getLeafNodes_ = function(element) {
   if (!result.length) {
     result.push(element);
   }
+
   return result;
 };
 
diff --git a/ui/less/containers.less b/ui/less/containers.less
index 4beae405c5c..1ae213c9230 100644
--- a/ui/less/containers.less
+++ b/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. */
diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index 930d28a4cba..68fc2430e56 100644
--- a/ui/text_displayer.js
+++ b/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;