shaka-player 3.2.1 → 3.3.1

package/lib/text/ui_text_displayer.js

@@ -167,9 +167,14 @@ shaka.text.UITextDisplayer = class {
     }
 
     // Remove the cues out of the time range.
+    const oldNumCues = this.cues_.length;
     this.cues_ = this.cues_.filter(
         (cue) => cue.startTime < start || cue.endTime >= end);
-    this.updateCaptions_();
+    // If anything was actually removed in this process, force the captions to
+    // update. This makes sure that the currently-displayed cues will stop
+    // displaying if removed (say, due to the user changing languages).
+    const forceUpdate = oldNumCues > this.cues_.length;
+    this.updateCaptions_(forceUpdate);
 
     return true;
   }
@@ -192,13 +197,13 @@ shaka.text.UITextDisplayer = class {
   }
 
   /**
-   * @param {!Array.<!shaka.text.Cue>} cues
+   * @param {!Array.<!shaka.extern.Cue>} cues
    * @param {!HTMLElement} container
    * @param {number} currentTime
-   * @param {boolean} isNested
+   * @param {!Array.<!shaka.extern.Cue>} parents
    * @private
    */
-  updateCuesRecursive_(cues, container, currentTime, isNested) {
+  updateCuesRecursive_(cues, container, currentTime, parents) {
     // Set to true if the cues have changed in some way, which will require
     // DOM changes. E.g. if a cue was added or removed.
     let updateDOM = false;
@@ -214,10 +219,12 @@ shaka.text.UITextDisplayer = class {
      * The cues whose corresponding elements should be in the DOM.
      * Some of these might be new, some might have been displayed beforehand.
      * These will only be added if updateDOM is true.
-     * @type {!Array.<!shaka.text.Cue>}
+     * @type {!Array.<!shaka.extern.Cue>}
      */
     const toPlant = [];
     for (const cue of cues) {
+      parents.push(cue);
+
       let cueRegistry = this.currentCuesMap_.get(cue);
       const shouldBeDisplayed =
           cue.startTime <= currentTime && cue.endTime > currentTime;
@@ -241,7 +248,7 @@ shaka.text.UITextDisplayer = class {
         toPlant.push(cue);
         if (!cueRegistry) {
           // The cue has to be made!
-          this.createCue_(cue, isNested);
+          this.createCue_(cue, parents);
           cueRegistry = this.currentCuesMap_.get(cue);
           wrapper = cueRegistry.wrapper;
           updateDOM = true;
@@ -255,8 +262,11 @@ shaka.text.UITextDisplayer = class {
       // guaranteed that the children will neither need to be added nor removed.
       if (cue.nestedCues.length > 0 && wrapper) {
         this.updateCuesRecursive_(
-            cue.nestedCues, wrapper, currentTime, /* isNested= */ true);
+            cue.nestedCues, wrapper, currentTime, parents);
       }
+
+      const topCue = parents.pop();
+      goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
     }
     if (updateDOM) {
       for (const cueElement of toUproot) {
@@ -304,7 +314,7 @@ shaka.text.UITextDisplayer = class {
 
       // Update the cues.
       this.updateCuesRecursive_(
-          this.cues_, this.textContainer_, currentTime, false);
+          this.cues_, this.textContainer_, currentTime, /* parents= */ []);
 
       if (goog.DEBUG) {
         // Previously, we had an issue (#2076) where cues sometimes were not
@@ -327,10 +337,11 @@ shaka.text.UITextDisplayer = class {
    * Creates the object for a cue.
    *
    * @param {!shaka.extern.Cue} cue
-   * @param {boolean} isNested
+   * @param {!Array.<!shaka.extern.Cue>} parents
    * @private
    */
-  createCue_(cue, isNested) {
+  createCue_(cue, parents) {
+    const isNested = parents.length > 1;
     let type = isNested ? 'span' : 'div';
     if (cue.lineBreak || cue.spacer) {
       if (cue.spacer) {
@@ -341,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, isNested);
+      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);
     }
 
@@ -363,13 +377,17 @@ shaka.text.UITextDisplayer = class {
   /**
    * @param {!HTMLElement} cueElement
    * @param {!shaka.extern.Cue} cue
-   * @param {boolean} isNested
+   * @param {!Array.<!shaka.extern.Cue>} parents
+   * @param {boolean} hasWrapper
    * @private
    */
-  setCaptionStyles_(cueElement, cue, isNested) {
+  setCaptionStyles_(cueElement, cue, parents, hasWrapper) {
     const Cue = shaka.text.Cue;
-    let style = cueElement.style;
+    const inherit =
+        (cb) => shaka.text.UITextDisplayer.inheritProperty_(parents, cb);
+    const style = cueElement.style;
     const isLeaf = cue.nestedCues.length == 0;
+    const isNested = parents.length > 1;
 
     // TODO: wrapLine is not yet supported.  Lines always wrap.
 
@@ -388,45 +406,57 @@ shaka.text.UITextDisplayer = class {
       const nonBreakingSpace = '\xa0';
       return nonBreakingSpace.repeat(match.length);
     });
-    if (isNested) {
-      cueElement.textContent = text;
-    } else if (text.length) {
-      // If a top-level cue has text, move to a <span> so the background is
-      // styled correctly.
-      const span = shaka.util.Dom.createHTMLElement('span');
-      span.textContent = text;
-      cueElement.appendChild(span);
-      style = span.style;
-    }
 
-    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;
     style.paddingLeft = shaka.text.UITextDisplayer.convertLengthValue_(
         cue.linePadding, cue, this.videoContainer_);
-    style.paddingRight = shaka.text.UITextDisplayer.convertLengthValue_(
-        cue.linePadding, cue, this.videoContainer_);
+    style.paddingRight =
+        shaka.text.UITextDisplayer.convertLengthValue_(
+            cue.linePadding, cue, this.videoContainer_);
 
     if (cue.backgroundImage) {
       style.backgroundImage = 'url(\'' + cue.backgroundImage + '\')';
       style.backgroundRepeat = 'no-repeat';
       style.backgroundSize = 'contain';
       style.backgroundPosition = 'center';
+    } else {
+      // If we have both text and nested cues, then style everything; otherwise
+      // place the text in its own <span> so the background doesn't fill the
+      // whole region.
+      let elem;
+      if (cue.nestedCues.length) {
+        elem = cueElement;
+      } else {
+        elem = shaka.util.Dom.createHTMLElement('span');
+        cueElement.appendChild(elem);
+      }
 
-      if (cue.backgroundColor == '') {
-        // In text-based cues, background color can default in CSS.
-        // In bitmap-based cues, we default to a transparent background color,
-        // so that the bitmap can be the only background.
-        style.backgroundColor = 'transparent';
+      if (cue.border) {
+        elem.style.border = cue.border;
+      }
+      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;
       }
     }
 
     // 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';
@@ -472,20 +502,28 @@ shaka.text.UITextDisplayer = class {
     // TODO: Implement lineAlignment of 'CENTER'.
     if (cue.line) {
       if (cue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
+        // When setting absolute positioning, you need to set x/y/width/height
+        // so the element is positioned correctly.  Set these as default and
+        // other settings will override them.
         style.position = 'absolute';
+        style.left = '0';
+        style.top = '0';
         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
+          style.width = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
             style.top = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
             style.bottom = cue.line + '%';
           }
         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
+          style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
             style.left = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
             style.right = cue.line + '%';
           }
         } else {
+          style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
             style.right = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
@@ -493,12 +531,7 @@ shaka.text.UITextDisplayer = class {
           }
         }
       }
-    } else if (cue.region && cue.region.id &&
-      ((!isNested && !isLeaf) || (cue.backgroundImage))) {
-      // In text-base cues, regions are only applied to block container
-      // (!isNested && !isLeaf).
-      // In bitmap-based cues, region settings are used to specify the size and
-      // position of the backgroundImage.
+    } else if (cue.region && cue.region.id) {
       const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
       const heightUnit = cue.region.heightUnits == percentageUnit ? '%' : 'px';
       const widthUnit = cue.region.widthUnits == percentageUnit ? '%' : 'px';
@@ -631,4 +664,25 @@ shaka.text.UITextDisplayer = class {
 
     return (containerHeight * value / cue.cellResolution.rows) + 'px';
   }
+
+  /**
+   * Inherits a property from the parent Cue elements.  If the value is falsy,
+   * it is assumed to be inherited from the parent. This returns null if the
+   * value isn't found.
+   *
+   * @param {!Array.<!shaka.extern.Cue>} parents
+   * @param {function(!shaka.extern.Cue):?T} cb
+   * @return {?T}
+   * @template T
+   * @private
+   */
+  static inheritProperty_(parents, cb) {
+    for (let i = parents.length - 1; i >= 0; i--) {
+      const val = cb(parents[i]);
+      if (val || val === 0) {
+        return val;
+      }
+    }
+    return null;
+  }
 };