shaka-player 3.2.2 → 3.3.2

package/lib/text/ttml_text_parser.js

@@ -86,16 +86,17 @@ shaka.text.TtmlTextParser = class {
       }
 
       // Get the framerate, subFrameRate and frameRateMultiplier if applicable.
-      const frameRate = XmlUtils.getAttributeNS(tt, ttpNs, 'frameRate');
-      const subFrameRate = XmlUtils.getAttributeNS(tt, ttpNs, 'subFrameRate');
+      const frameRate = XmlUtils.getAttributeNSList(tt, ttpNs, 'frameRate');
+      const subFrameRate = XmlUtils.getAttributeNSList(
+          tt, ttpNs, 'subFrameRate');
       const frameRateMultiplier =
-          XmlUtils.getAttributeNS(tt, ttpNs, 'frameRateMultiplier');
-      const tickRate = XmlUtils.getAttributeNS(tt, ttpNs, 'tickRate');
+          XmlUtils.getAttributeNSList(tt, ttpNs, 'frameRateMultiplier');
+      const tickRate = XmlUtils.getAttributeNSList(tt, ttpNs, 'tickRate');
 
-      const cellResolution = XmlUtils.getAttributeNS(
+      const cellResolution = XmlUtils.getAttributeNSList(
           tt, ttpNs, 'cellResolution');
       const spaceStyle = tt.getAttribute('xml:space') || 'default';
-      const extent = XmlUtils.getAttributeNS(tt, ttsNs, 'extent');
+      const extent = XmlUtils.getAttributeNSList(tt, ttsNs, 'extent');
 
       if (spaceStyle != 'default' && spaceStyle != 'preserve') {
         throw new shaka.util.Error(
@@ -147,28 +148,15 @@ shaka.text.TtmlTextParser = class {
               shaka.util.Error.Code.INVALID_TEXT_CUE,
               '<span> can only be inside <p> in TTML');
         }
+      }
 
-        const pChildren = XmlUtils.findChildren(div, 'p');
-        if (pChildren && pChildren.length) {
-          for (const p of pChildren) {
-            const cue = TtmlTextParser.parseCue_(
-                p, time.periodStart, rateInfo, metadataElements, styles,
-                regionElements, cueRegions, whitespaceTrim,
-                /* isNested= */ false, cellResolutionInfo);
-            if (cue) {
-              cues.push(cue);
-            }
-          }
-        } else {
-          // Only used for parsing the background image
-          const cue = TtmlTextParser.parseCue_(
-              div, time.periodStart, rateInfo, metadataElements, styles,
-              regionElements, cueRegions, whitespaceTrim,
-              /* isNested= */ false, cellResolutionInfo);
-          if (cue) {
-            cues.push(cue);
-          }
-        }
+      const cue = TtmlTextParser.parseCue_(
+          body, time.periodStart, rateInfo, metadataElements, styles,
+          regionElements, cueRegions, whitespaceTrim,
+          cellResolutionInfo, /* parentCueElement= */ null,
+          /* isContent= */ false);
+      if (cue) {
+        cues.push(cue);
       }
     }
 
@@ -186,18 +174,19 @@ shaka.text.TtmlTextParser = class {
    * @param {!Array.<!Element>} regionElements
    * @param {!Array.<!shaka.text.CueRegion>} cueRegions
    * @param {boolean} whitespaceTrim
-   * @param {boolean} isNested
    * @param {?{columns: number, rows: number}} cellResolution
+   * @param {?Element} parentCueElement
+   * @param {boolean} isContent
    * @return {shaka.text.Cue}
    * @private
    */
   static parseCue_(
       cueNode, offset, rateInfo, metadataElements, styles, regionElements,
-      cueRegions, whitespaceTrim, isNested, cellResolution) {
+      cueRegions, whitespaceTrim, cellResolution, parentCueElement, isContent) {
     /** @type {Element} */
     let cueElement;
     /** @type {Element} */
-    let parentElement = /** @type {Element} */(cueNode.parentNode);
+    let parentElement = /** @type {Element} */ (cueNode.parentNode);
 
     if (cueNode.nodeType == Node.COMMENT_NODE) {
       // The comments do not contain information that interests us here.
@@ -205,6 +194,12 @@ shaka.text.TtmlTextParser = class {
     }
 
     if (cueNode.nodeType == Node.TEXT_NODE) {
+      if (!isContent) {
+        // Ignore text elements outside the content. For example, whitespace
+        // on the same lexical level as the <p> elements, in a document with
+        // xml:space="preserve", should not be renderer.
+        return null;
+      }
       // This should generate an "anonymous span" according to the TTML spec.
       // So pretend the element was a <span>.  parentElement was set above, so
       // we should still be able to correctly traverse up for timing
@@ -219,6 +214,21 @@ shaka.text.TtmlTextParser = class {
     }
     goog.asserts.assert(cueElement, 'cueElement should be non-null!');
 
+    let imageElement = null;
+    for (const nameSpace of shaka.text.TtmlTextParser.smpteNsList_) {
+      imageElement = shaka.text.TtmlTextParser.getElementsFromCollection_(
+          cueElement, 'backgroundImage', metadataElements, '#',
+          nameSpace)[0];
+      if (imageElement) {
+        break;
+      }
+    }
+
+    const parentIsContent = isContent;
+    if (cueNode.nodeName == 'p' || imageElement) {
+      isContent = true;
+    }
+
     const spaceStyle = cueElement.getAttribute('xml:space') ||
         (whitespaceTrim ? 'default' : 'preserve');
 
@@ -243,8 +253,9 @@ shaka.text.TtmlTextParser = class {
             regionElements,
             cueRegions,
             localWhitespaceTrim,
-            /* isNested= */ true,
             cellResolution,
+            cueElement,
+            isContent,
         );
 
         // This node may or may not generate a nested cue.
@@ -254,6 +265,8 @@ shaka.text.TtmlTextParser = class {
       }
     }
 
+    const isNested = /** @type {boolean} */ (parentCueElement != null);
+
     // In this regex, "\S" means "non-whitespace character".
     const hasTextContent = /\S/.test(cueElement.textContent);
     const hasTimeAttributes =
@@ -334,6 +347,13 @@ shaka.text.TtmlTextParser = class {
     const cue = new shaka.text.Cue(start, end, payload);
     cue.nestedCues = nestedCues;
 
+    if (!isContent) {
+      // If this is not a <p> element or a <div> with images, and it has no
+      // parent that was a <p> element, then it's part of the outer containers
+      // (e.g. the <body> or a normal <div> element within it).
+      cue.isContainer = true;
+    }
+
     if (cellResolution) {
       cue.cellResolution = cellResolution;
     }
@@ -341,31 +361,32 @@ shaka.text.TtmlTextParser = class {
     // Get other properties if available.
     const regionElement = shaka.text.TtmlTextParser.getElementsFromCollection_(
         cueElement, 'region', regionElements, /* prefix= */ '')[0];
-    if (regionElement && regionElement.getAttribute('xml:id')) {
-      const regionId = regionElement.getAttribute('xml:id');
-      cue.region = cueRegions.filter((region) => region.id == regionId)[0];
-    }
-
-    let imageElement = null;
-    for (const nameSpace of shaka.text.TtmlTextParser.smpteNsList_) {
-      imageElement = shaka.text.TtmlTextParser.getElementsFromCollection_(
-          cueElement, 'backgroundImage', metadataElements, '#',
-          nameSpace)[0];
-      if (imageElement) {
-        break;
+    // Do not actually apply that region unless it is non-inherited, though.
+    // This makes it so that, if a parent element has a region, the children
+    // don't also all independently apply the positioning of that region.
+    if (cueElement.hasAttribute('region')) {
+      if (regionElement && regionElement.getAttribute('xml:id')) {
+        const regionId = regionElement.getAttribute('xml:id');
+        cue.region = cueRegions.filter((region) => region.id == regionId)[0];
       }
     }
 
-    const isLeaf = nestedCues.length == 0;
+    let regionElementForStyle = regionElement;
+    if (parentCueElement && isNested && !cueElement.getAttribute('region') &&
+      !cueElement.getAttribute('style')) {
+      regionElementForStyle =
+          shaka.text.TtmlTextParser.getElementsFromCollection_(
+              parentCueElement, 'region', regionElements, /* prefix= */ '')[0];
+    }
 
     shaka.text.TtmlTextParser.addStyle_(
         cue,
         cueElement,
-        regionElement,
+        regionElementForStyle,
         imageElement,
         styles,
-        isNested,
-        isLeaf);
+        /** isNested= */ parentIsContent, // "nested in a <div>" doesn't count.
+        /** isLeaf= */ (nestedCues.length == 0));
 
     return cue;
   }
@@ -505,14 +526,13 @@ shaka.text.TtmlTextParser = class {
     }
 
     const align = TtmlTextParser.getStyleAttribute_(
-        cueElement, region, styles, 'textAlign', shouldInheritRegionStyles);
+        cueElement, region, styles, 'textAlign', true);
     if (align) {
       cue.positionAlign = TtmlTextParser.textAlignToPositionAlign_[align];
       cue.lineAlign = TtmlTextParser.textAlignToLineAlign_[align];
 
       goog.asserts.assert(align.toUpperCase() in Cue.textAlign,
-          align.toUpperCase() +
-                          ' Should be in Cue.textAlign values!');
+          align.toUpperCase() + ' Should be in Cue.textAlign values!');
 
       cue.textAlign = Cue.textAlign[align.toUpperCase()];
     } else {
@@ -521,7 +541,7 @@ shaka.text.TtmlTextParser = class {
     }
 
     const displayAlign = TtmlTextParser.getStyleAttribute_(
-        cueElement, region, styles, 'displayAlign', shouldInheritRegionStyles);
+        cueElement, region, styles, 'displayAlign', true);
     if (displayAlign) {
       goog.asserts.assert(displayAlign.toUpperCase() in Cue.displayAlign,
           displayAlign.toUpperCase() +
@@ -531,7 +551,6 @@ shaka.text.TtmlTextParser = class {
 
     const color = TtmlTextParser.getStyleAttribute_(
         cueElement, region, styles, 'color', shouldInheritRegionStyles);
-
     if (color) {
       cue.color = color;
     }
@@ -584,7 +603,6 @@ shaka.text.TtmlTextParser = class {
 
     const fontSize = TtmlTextParser.getStyleAttribute_(
         cueElement, region, styles, 'fontSize', shouldInheritRegionStyles);
-
     if (fontSize) {
       const isValidFontSizeUnit =
           fontSize.match(TtmlTextParser.unitValues_) ||
@@ -622,6 +640,31 @@ shaka.text.TtmlTextParser = class {
       }
     }
 
+    const textOutline = TtmlTextParser.getStyleAttribute_(
+        cueElement, region, styles, 'textOutline', shouldInheritRegionStyles);
+    if (textOutline) {
+      // tts:textOutline isn't natively supported by browsers, but it can be
+      // mostly replicated using the non-standard -webkit-text-stroke-width and
+      // -webkit-text-stroke-color properties.
+      const split = textOutline.split(' ');
+      if (split[0].match(TtmlTextParser.unitValues_)) {
+        // There is no defined color, so default to the text color.
+        cue.textStrokeColor = cue.color;
+      } else {
+        cue.textStrokeColor = split[0];
+        split.shift();
+      }
+      if (split[0] && split[0].match(TtmlTextParser.unitValues_)) {
+        cue.textStrokeWidth = split[0];
+      } else {
+        // If there is no width, or the width is not a number, don't draw a
+        // border.
+        cue.textStrokeColor = '';
+      }
+      // There is an optional blur radius also, but we have no way of
+      // replicating that, so ignore it.
+    }
+
     const letterSpacing = TtmlTextParser.getStyleAttribute_(
         cueElement, region, styles, 'letterSpacing', shouldInheritRegionStyles);
     if (letterSpacing && letterSpacing.match(TtmlTextParser.unitValues_)) {
@@ -753,7 +796,7 @@ shaka.text.TtmlTextParser = class {
       return null;
     }
 
-    const attr = XmlUtils.getAttributeNS(region, ttsNs, attribute);
+    const attr = XmlUtils.getAttributeNSList(region, ttsNs, attribute);
     if (attr) {
       return attr;
     }
@@ -778,7 +821,7 @@ shaka.text.TtmlTextParser = class {
 
     // Styling on elements should take precedence
     // over the main styling attributes
-    const elementAttribute = XmlUtils.getAttributeNS(
+    const elementAttribute = XmlUtils.getAttributeNSList(
         cueElement,
         ttsNs,
         attribute);
@@ -821,7 +864,7 @@ shaka.text.TtmlTextParser = class {
 
       if (!styleAttributeValue) {
         // Fall back to tts namespace.
-        styleAttributeValue = XmlUtils.getAttributeNS(
+        styleAttributeValue = XmlUtils.getAttributeNSList(
             inheritedStyles[i],
             ttsNs,
             attribute);
@@ -1276,20 +1319,26 @@ shaka.text.TtmlTextParser.textAlignToPositionAlign_ = {
  * document, not just "ttp:", so we use this with getAttributeNS() to ensure
  * that we support arbitrary namespace names.
  *
- * @const {string}
+ * @const {!Array.<string>}
  * @private
  */
-shaka.text.TtmlTextParser.parameterNs_ = 'http://www.w3.org/ns/ttml#parameter';
+shaka.text.TtmlTextParser.parameterNs_ = [
+  'http://www.w3.org/ns/ttml#parameter',
+  'http://www.w3.org/2006/10/ttaf1#parameter',
+];
 
 /**
  * The namespace URL for TTML styles.  Can be assigned any name in the TTML
  * document, not just "tts:", so we use this with getAttributeNS() to ensure
  * that we support arbitrary namespace names.
  *
- * @const {string}
+ * @const {!Array.<string>}
  * @private
  */
-shaka.text.TtmlTextParser.styleNs_ = 'http://www.w3.org/ns/ttml#styling';
+shaka.text.TtmlTextParser.styleNs_ = [
+  'http://www.w3.org/ns/ttml#styling',
+  'http://www.w3.org/2006/10/ttaf1#styling',
+];
 
 /**
  * The namespace URL for EBU TTML styles.  Can be assigned any name in the TTML

package/lib/text/ui_text_displayer.js

@@ -352,19 +352,22 @@ shaka.text.UITextDisplayer = class {
       type = 'br';
     }
 
+    const needWrapper = !isNested && cue.nestedCues.length > 0;
+
     // Nested cues are inline elements.  Top-level cues are block elements.
     const cueElement = shaka.util.Dom.createHTMLElement(type);
     if (type != 'br') {
-      this.setCaptionStyles_(cueElement, cue, parents);
+      this.setCaptionStyles_(cueElement, cue, parents, needWrapper);
     }
 
     let wrapper = cueElement;
-    if (!isNested && cue.nestedCues.length) {
+    if (needWrapper) {
       // Create a wrapper element which will serve to contain all children into
       // a single item.  This ensures that nested span elements appear
       // horizontally and br elements occupy no vertical space.
       wrapper = shaka.util.Dom.createHTMLElement('span');
       wrapper.classList.add('shaka-text-wrapper');
+      wrapper.style.backgroundColor = cue.backgroundColor;
       cueElement.appendChild(wrapper);
     }
 
@@ -375,9 +378,10 @@ shaka.text.UITextDisplayer = class {
    * @param {!HTMLElement} cueElement
    * @param {!shaka.extern.Cue} cue
    * @param {!Array.<!shaka.extern.Cue>} parents
+   * @param {boolean} hasWrapper
    * @private
    */
-  setCaptionStyles_(cueElement, cue, parents) {
+  setCaptionStyles_(cueElement, cue, parents, hasWrapper) {
     const Cue = shaka.text.Cue;
     const inherit =
         (cb) => shaka.text.UITextDisplayer.inheritProperty_(parents, cb);
@@ -403,8 +407,8 @@ shaka.text.UITextDisplayer = class {
       return nonBreakingSpace.repeat(match.length);
     });
 
-    style.backgroundColor = cue.backgroundColor;
-    style.border = cue.border;
+    style.webkitTextStrokeColor = cue.textStrokeColor;
+    style.webkitTextStrokeWidth = cue.textStrokeWidth;
     style.color = cue.color;
     style.direction = cue.direction;
     style.opacity = cue.opacity;
@@ -434,13 +438,15 @@ shaka.text.UITextDisplayer = class {
       if (cue.border) {
         elem.style.border = cue.border;
       }
-      const bgColor = inherit((c) => c.backgroundColor);
-      if (bgColor) {
-        elem.style.backgroundColor = bgColor;
-      } else if (text) {
-        // If there is no background, default to a semi-transparent black.
-        // Only do this for the text itself.
-        elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+      if (!hasWrapper) {
+        const bgColor = inherit((c) => c.backgroundColor);
+        if (bgColor) {
+          elem.style.backgroundColor = bgColor;
+        } else if (text) {
+          // If there is no background, default to a semi-transparent black.
+          // Only do this for the text itself.
+          elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+        }
       }
       if (text) {
         elem.textContent = text;
@@ -450,7 +456,7 @@ shaka.text.UITextDisplayer = class {
     // The displayAlign attribute specifies the vertical alignment of the
     // captions inside the text container. Before means at the top of the
     // text container, and after means at the bottom.
-    if (isNested) {
+    if (isNested && !parents[parents.length - 1].isContainer) {
       style.display = 'inline';
     } else {
       style.display = 'flex';