add children cues

Author: valotvince

lib/text/cue.js

@@ -184,6 +184,12 @@ shaka.text.Cue = function(startTime, endTime, payload) {
    * @exportInterface
    */
   this.id = '';
+
+  /**
+   * @override
+   * @exportInterface
+   */
+  this.children = [];
 };
 
 

lib/text/simple_text_displayer.js

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

lib/text/ttml_text_parser.js

@@ -127,7 +127,7 @@ shaka.text.TtmlTextParser.prototype.parseMedia = function(data, time) {
       }
     }
 
-    let textNodes = TtmlTextParser.getLeafNodes_(
+    let textNodes = TtmlTextParser.getLeafCues_(
         tt.getElementsByTagName('body')[0]);
 
     for (let i = 0; i < textNodes.length; i++) {
@@ -268,7 +268,10 @@ shaka.text.TtmlTextParser.getLeafNodes_ = function(element) {
   for (let i = 0; i < childNodes.length; i++) {
     const childNodeItem = childNodes[i];
 
-    if (childNodeItem.nodeType == Node.ELEMENT_NODE && childNodeItem.nodeName !== 'br') {
+    if (
+      childNodeItem.nodeType == Node.ELEMENT_NODE &&
+      childNodeItem.nodeName !== 'br'
+    ) {
       // Get the leaves the child might contain.
       goog.asserts.assert(childNodeItem instanceof Element,
                           'Node should be Element!');
@@ -277,23 +280,7 @@ shaka.text.TtmlTextParser.getLeafNodes_ = function(element) {
       goog.asserts.assert(leafChildren.length > 0,
                           'Only a null Element should return no leaves!');
 
-      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);
-      }
+      result = result.concat(leafChildren);
     }
   }
 
@@ -305,31 +292,20 @@ shaka.text.TtmlTextParser.getLeafNodes_ = function(element) {
   return result;
 };
 
+shaka.text.TtmlTextParser.getLeafCues_ = function(element) {
+  if (!element) {
+    return [];
+  }
 
-/**
- * Inserts \n where <br> tags are found.
- *
- * @param {!Node} element
- * @param {boolean} whitespaceTrim
- * @private
- */
-shaka.text.TtmlTextParser.addNewLines_ = function(element, whitespaceTrim) {
-  let childNodes = element.childNodes;
+  return Array.from(element.querySelectorAll('[begin][end]'));
+};
 
-  for (let i = 0; i < childNodes.length; i++) {
-    if (childNodes[i].nodeName == 'br' && i > 0) {
-      childNodes[i - 1].textContent += '\n';
-    } else if (childNodes[i].childNodes.length > 0) {
-      shaka.text.TtmlTextParser.addNewLines_(childNodes[i], whitespaceTrim);
-    } else if (whitespaceTrim) {
-      // Trim leading and trailing whitespace.
-      let trimmed = childNodes[i].textContent.trim();
-      // Collapse multiple spaces into one.
-      trimmed = trimmed.replace(/\s+/g, ' ');
-
-      childNodes[i].textContent = trimmed;
-    }
-  }
+shaka.text.TtmlTextParser.sanitizeTextContent = function(textContent) {
+  return textContent
+    // Trim leading and trailing whitespace.
+    .trim()
+    // Collapse multiple spaces into one.
+    .replace(/\s+/g, ' ');
 };
 
 
@@ -349,33 +325,76 @@ shaka.text.TtmlTextParser.addNewLines_ = function(element, whitespaceTrim) {
  */
 shaka.text.TtmlTextParser.parseCue_ = function(
     cueElement, offset, rateInfo, metadataElements, styles,
-    regionElements, cueRegions, whitespaceTrim) {
+    regionElements, cueRegions, whitespaceTrim, isChild) {
+  if (isChild && cueElement.nodeName === 'br') {
+    const cue = new shaka.text.Cue();
+    cue.spacer = true;
+
+    return cue;
+  }
+
   // Disregard empty elements:
   // TTML allows for empty elements like <div></div>.
   // If cueElement has neither time attributes, nor
   // non-whitespace text, don't try to make a cue out of it.
-  if (!cueElement.hasAttribute('begin') &&
-      !cueElement.hasAttribute('end') &&
-      /^\s*$/.test(cueElement.textContent)) {
+  if (
+    /^\s*$/.test(cueElement.textContent) ||
+    (
+      !isChild &&
+      !cueElement.hasAttribute('begin') &&
+      !cueElement.hasAttribute('end')
+    )
+  ) {
     return null;
   }
 
-  shaka.text.TtmlTextParser.addNewLines_(cueElement, whitespaceTrim);
-
   // Get time.
   let start = shaka.text.TtmlTextParser.parseTime_(
       cueElement.getAttribute('begin'), rateInfo);
   let end = shaka.text.TtmlTextParser.parseTime_(
       cueElement.getAttribute('end'), rateInfo);
   let duration = shaka.text.TtmlTextParser.parseTime_(
       cueElement.getAttribute('dur'), rateInfo);
-  let payload = cueElement.textContent;
+  let payload = '';
+  let children = [];
+
+  if (
+    cueElement.childNodes.length === 1 &&
+    cueElement.childNodes[0].nodeType === Node.TEXT_NODE
+  ) {
+    if (whitespaceTrim) {
+      payload = shaka.text.TtmlTextParser.sanitizeTextContent(
+        cueElement.textContent
+      );
+    } else {
+      payload = cueElement.textContent;
+    }
+  } else {
+    for (let i = 0; i < cueElement.childNodes.length; i++) {
+      const childNode = cueElement.childNodes[i];
+      const childCue = shaka.text.TtmlTextParser.parseCue_(
+        childNode,
+        offset,
+        rateInfo,
+        metadataElements,
+        styles,
+        regionElements,
+        cueRegions,
+        whitespaceTrim,
+        true
+      );
+
+      if (childCue) {
+        children.push(childCue);
+      }
+    }
+  }
 
   if (end == null && duration != null) {
     end = start + duration;
   }
 
-  if (start == null || end == null) {
+  if (!isChild && (start == null || end == null)) {
     throw new shaka.util.Error(
         shaka.util.Error.Severity.CRITICAL,
         shaka.util.Error.Category.TEXT,
@@ -386,9 +405,10 @@ shaka.text.TtmlTextParser.parseCue_ = function(
   end += offset;
 
   let cue = new shaka.text.Cue(start, end, payload);
+  cue.children = children;
 
   // Get other properties if available.
-  let regionElement = shaka.text.TtmlTextParser.getElementFromCollection_(
+  const [regionElement] = shaka.text.TtmlTextParser.getElementFromCollection_(
       cueElement, 'region', regionElements, /* prefix= */ '');
   if (regionElement && regionElement.getAttribute('xml:id')) {
     let regionId = regionElement.getAttribute('xml:id');
@@ -397,7 +417,7 @@ shaka.text.TtmlTextParser.parseCue_ = function(
     });
     cue.region = regionsWithId[0];
   }
-  const imageElement = shaka.text.TtmlTextParser.getElementFromCollection_(
+  const [imageElement] = shaka.text.TtmlTextParser.getElementFromCollection_(
       cueElement, 'smpte:backgroundImage', metadataElements, '#');
   shaka.text.TtmlTextParser.addStyle_(
       cue,
@@ -701,6 +721,7 @@ shaka.text.TtmlTextParser.getStyleAttribute_ = function(
   // An attribute can be specified on region level or in a styling block
   // associated with the region or original element.
   const TtmlTextParser = shaka.text.TtmlTextParser;
+
   let attr = TtmlTextParser.getStyleAttributeFromElement_(
       cueElement, styles, attribute);
   if (attr) {
@@ -735,7 +756,7 @@ shaka.text.TtmlTextParser.getStyleAttributeFromRegion_ = function(
     }
   }
 
-  let style = shaka.text.TtmlTextParser.getElementFromCollection_(
+  let [style] = shaka.text.TtmlTextParser.getElementFromCollection_(
       region, 'style', styles, /* prefix= */ '');
   if (style) {
     return XmlUtils.getAttributeNS(style, ttsNs, attribute);
@@ -759,14 +780,36 @@ shaka.text.TtmlTextParser.getStyleAttributeFromElement_ = function(
   const XmlUtils = shaka.util.XmlUtils;
   const ttsNs = shaka.text.TtmlTextParser.styleNs_;
 
-  let getElementFromCollection_ =
-      shaka.text.TtmlTextParser.getElementFromCollection_;
-  let style = getElementFromCollection_(
+  // Styling on elements should take precedence over the main styling attributes
+  const elementAttribute = XmlUtils.getAttributeNS(
+    cueElement,
+    ttsNs,
+    attribute
+  );
+
+  if (elementAttribute) {
+    return elementAttribute;
+  }
+
+  const inheritedStyles = shaka.text.TtmlTextParser.getElementFromCollection_(
       cueElement, 'style', styles, /* prefix= */ '');
-  if (style) {
-    return XmlUtils.getAttributeNS(style, ttsNs, attribute);
+
+  let styleValue;
+
+  // The last value in our styles stack takes the precedence over the others
+  for (let i = 0; i < inheritedStyles.length; i++) {
+    const styleAttributeValue = XmlUtils.getAttributeNS(
+      inheritedStyles[i],
+      ttsNs,
+      attribute
+    );
+
+    if (styleAttributeValue) {
+      styleValue = styleAttributeValue;
+    }
   }
-  return null;
+
+  return styleValue;
 };
 
 
@@ -783,22 +826,31 @@ shaka.text.TtmlTextParser.getStyleAttributeFromElement_ = function(
  */
 shaka.text.TtmlTextParser.getElementFromCollection_ = function(
     element, attributeName, collection, prefixName) {
+  const items = [];
+
   if (!element || collection.length < 1) {
-    return null;
+    return items;
   }
-  let item = null;
-  let itemName = shaka.text.TtmlTextParser.getInheritedAttribute_(
+
+  const attributeValue = shaka.text.TtmlTextParser.getInheritedAttribute_(
       element, attributeName);
-  if (itemName) {
-    for (let i = 0; i < collection.length; i++) {
-      if ((prefixName + collection[i].getAttribute('xml:id')) == itemName) {
-        item = collection[i];
-        break;
+
+  if (attributeValue) {
+    // There could be multiple items in one attribute
+    // <span style="style1 style2">A cue</span>
+    const itemNames = attributeValue.split(' ');
+
+    itemNames.forEach((itemName) => {
+      for (let i = 0; i < collection.length; i++) {
+        if ((prefixName + collection[i].getAttribute('xml:id')) == itemName) {
+          items.push(collection[i]);
+          break;
+        }
       }
-    }
+    });
   }
 
-  return item;
+  return items;
 };
 
 

package.json

@@ -63,6 +63,7 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "prepublish": "in-publish && python build/checkversion.py && python build/all.py --force || not-in-publish"
+    "prepublish": "in-publish && python build/checkversion.py && python build/all.py --force || not-in-publish",
+    "lint": "eslint './{demo,lib,ui}/**/*.js'"
   }
 }

ui/less/containers.less

@@ -212,7 +212,5 @@
   span {
     font-size: 18px;
     color: rgb(255, 255, 255);
-    display: block;
-    max-width:95%;
   }
 }

ui/text_displayer.js

@@ -181,10 +181,38 @@ shaka.ui.TextDisplayer = class {
     });
 
     for (const cue of currentCues) {
-      const captions = shaka.util.Dom.createHTMLElement('span');
+      this.displayCue_(this.textContainer_, cue);
+    }
+  }
+
+  displayChildrenCue_(container, cue) {
+    const captions = shaka.util.Dom.createHTMLElement('span');
+
+    if (cue.spacer) {
+      captions.style.display = 'block';
+    } else {
       this.setCaptionStyles_(captions, cue);
-      this.currentCuesMap_.set(cue, captions);
-      this.textContainer_.appendChild(captions);
+    }
+
+    container.appendChild(captions);
+
+    return captions;
+  }
+
+  displayCue_(container, cue) {
+    if (cue.children.length) {
+      const childrenContainer = shaka.util.Dom.createHTMLElement('p');
+      childrenContainer.style.width = '100%';
+      this.setCaptionStyles_(childrenContainer, cue);
+
+      cue.children.forEach(
+        (childCue) => this.displayChildrenCue_(childrenContainer, childCue)
+      );
+
+      container.appendChild(childrenContainer);
+      this.currentCuesMap_.set(cue, childrenContainer);
+    } else {
+      this.currentCuesMap_.set(cue, this.displayChildrenCue_(container, cue));
     }
   }