shaka-player 3.1.1 → 3.1.5

package/lib/text/ui_text_displayer.js

@@ -73,7 +73,14 @@ shaka.text.UITextDisplayer = class {
       this.updateCaptions_();
     }).tickEvery(updatePeriod);
 
-    /** private {Map.<!shaka.extern.Cue, !HTMLElement>} */
+    /**
+     * Maps cues to cue elements. Specifically points out the wrapper element of
+     * the cue (e.g. the HTML element to put nested cues inside).
+     * @private {Map.<!shaka.extern.Cue, !{
+     *   cueElement: !HTMLElement,
+     *   wrapper: !HTMLElement
+     * }>}
+     */
     this.currentCuesMap_ = new Map();
 
     /** @private {shaka.util.EventManager} */
@@ -160,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;
   }
@@ -185,68 +197,151 @@ shaka.text.UITextDisplayer = class {
   }
 
   /**
-   * Display the current captions.
-   * @param {boolean=} forceUpdate
+   * @param {!Array.<!shaka.extern.Cue>} cues
+   * @param {!HTMLElement} container
+   * @param {number} currentTime
+   * @param {!Array.<!shaka.extern.Cue>} parents
    * @private
    */
-  updateCaptions_(forceUpdate = false) {
-    const currentTime = this.video_.currentTime;
+  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;
+    /**
+     * The elements to remove from the DOM.
+     * Some of these elements may be added back again, if their corresponding
+     * cue is in toPlant.
+     * These elements are only removed if updateDOM is true.
+     * @type {!Array.<!HTMLElement>}
+     */
+    const toUproot = [];
+    /**
+     * 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.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;
+      let wrapper = cueRegistry ? cueRegistry.wrapper : null;
+
+      if (cueRegistry) {
+        // If the cues are replanted, all existing cues should be uprooted,
+        // even ones which are going to be planted again.
+        toUproot.push(cueRegistry.cueElement);
+
+        // If the cue should not be displayed, remove it entirely.
+        if (!shouldBeDisplayed) {
+          // Since something has to be removed, we will need to update the DOM.
+          updateDOM = true;
+          this.currentCuesMap_.delete(cue);
+          cueRegistry = null;
+        }
+      }
 
-    // Return true if the cue should be displayed at the current time point.
-    const shouldCueBeDisplayed = (cue) => {
-      return this.cues_.includes(cue) && this.isTextVisible_ &&
-             cue.startTime <= currentTime && cue.endTime > currentTime;
-    };
+      if (shouldBeDisplayed) {
+        toPlant.push(cue);
+        if (!cueRegistry) {
+          // The cue has to be made!
+          this.createCue_(cue, parents);
+          cueRegistry = this.currentCuesMap_.get(cue);
+          wrapper = cueRegistry.wrapper;
+          updateDOM = true;
+        }
+      }
 
-    // For each cue in the current cues map, if the cue's end time has passed,
-    // remove the entry from the map, and remove the captions from the page.
-    for (const cue of this.currentCuesMap_.keys()) {
-      if (!shouldCueBeDisplayed(cue) || forceUpdate) {
-        const captions = this.currentCuesMap_.get(cue);
-        this.textContainer_.removeChild(captions);
-        this.currentCuesMap_.delete(cue);
+      // Recursively check the nested cues, to see if they need to be added or
+      // removed.
+      // If wrapper is null, that means that the cue is not only not being
+      // displayed currently, it also was not removed this tick. So it's
+      // guaranteed that the children will neither need to be added nor removed.
+      if (cue.nestedCues.length > 0 && wrapper) {
+        this.updateCuesRecursive_(
+            cue.nestedCues, wrapper, currentTime, parents);
       }
-    }
 
-    // Sometimes we don't remove a cue element correctly.  So check all the
-    // child nodes and remove any that don't have an associated cue.
-    const expectedChildren = new Set(this.currentCuesMap_.values());
-    for (const child of Array.from(this.textContainer_.childNodes)) {
-      if (!expectedChildren.has(child)) {
-        this.textContainer_.removeChild(child);
+      const topCue = parents.pop();
+      goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
+    }
+    if (updateDOM) {
+      for (const cueElement of toUproot) {
+        container.removeChild(cueElement);
+      }
+      toPlant.sort((a, b) => {
+        if (a.startTime != b.startTime) {
+          return a.startTime - b.startTime;
+        } else {
+          return a.endTime - b.endTime;
+        }
+      });
+      for (const cue of toPlant) {
+        const cueRegistry = this.currentCuesMap_.get(cue);
+        goog.asserts.assert(cueRegistry, 'cueRegistry should exist.');
+        container.appendChild(cueRegistry.cueElement);
       }
     }
+  }
 
-    // Get the current cues that should be added to display. If the cue is not
-    // being displayed already, add it to the map, and add the captions onto the
-    // page.
-    const currentCues = this.cues_.filter((cue) => {
-      return shouldCueBeDisplayed(cue) && !this.currentCuesMap_.has(cue);
-    }).sort((a, b) => {
-      if (a.startTime != b.startTime) {
-        return a.startTime - b.startTime;
-      } else {
-        return a.endTime - b.endTime;
+  /**
+   * Display the current captions.
+   * @param {boolean=} forceUpdate
+   * @private
+   */
+  updateCaptions_(forceUpdate = false) {
+    if (!this.textContainer_) {
+      return;
+    }
+
+    const currentTime = this.video_.currentTime;
+    if (!this.isTextVisible_ || forceUpdate) {
+      if (this.currentCuesMap_.size > 0) {
+        // Clear away any existing cues.
+        shaka.util.Dom.removeAllChildren(this.textContainer_);
+        this.currentCuesMap_.clear();
+      }
+    }
+    if (this.isTextVisible_) {
+      // Log currently attached cue elements for verification, later.
+      const previousCuesMap = new Map();
+      for (const cue of this.currentCuesMap_.keys()) {
+        previousCuesMap.set(cue, this.currentCuesMap_.get(cue));
       }
-    });
 
-    for (const cue of currentCues) {
-      const cueElement = this.displayCue_(
-          this.textContainer_, cue, /* isNested= */ false);
-      this.currentCuesMap_.set(cue, cueElement);
+      // Update the cues.
+      this.updateCuesRecursive_(
+          this.cues_, this.textContainer_, currentTime, /* parents= */ []);
+
+      if (goog.DEBUG) {
+        // Previously, we had an issue (#2076) where cues sometimes were not
+        // properly removed from the DOM. It is not clear if this issue still
+        // happens, so the previous fix for it has been changed to an assert.
+        for (const cue of previousCuesMap.keys()) {
+          if (!this.currentCuesMap_.has(cue)) {
+            // TODO: If the problem does not appear again, then we should remove
+            // this assert (and the previousCuesMap code) in Shaka v4.
+            const cueElement = previousCuesMap.get(cue).cueElement;
+            goog.asserts.assert(
+                !cueElement.parentNode, 'Cue was not properly removed!');
+          }
+        }
+      }
     }
   }
 
   /**
-   * Displays a cue
+   * Creates the object for a cue.
    *
-   * @param {Element} container
    * @param {!shaka.extern.Cue} cue
-   * @param {boolean} isNested
-   * @return {!Element} the created captions element
+   * @param {!Array.<!shaka.extern.Cue>} parents
    * @private
    */
-  displayCue_(container, cue, isNested) {
+  createCue_(cue, parents) {
+    const isNested = parents.length > 1;
     let type = isNested ? 'span' : 'div';
     if (cue.lineBreak || cue.spacer) {
       if (cue.spacer) {
@@ -257,31 +352,42 @@ 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);
+    }
 
-      for (const nestedCue of cue.nestedCues) {
-        this.displayCue_(cueElement, nestedCue, /* isNested= */ true);
-      }
+    let wrapper = cueElement;
+    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);
     }
 
-    container.appendChild(cueElement);
-    return cueElement;
+    this.currentCuesMap_.set(cue, {cueElement, wrapper});
   }
 
   /**
    * @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.
 
@@ -300,16 +406,6 @@ 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;
@@ -318,32 +414,62 @@ shaka.text.UITextDisplayer = class {
     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 (cue.displayAlign == Cue.displayAlign.BEFORE) {
-      style.verticalAlign = 'top';
-    } else if (cue.displayAlign == Cue.displayAlign.CENTER) {
-      style.verticalAlign = 'middle';
+    if (isNested && !parents[parents.length - 1].isContainer) {
+      style.display = 'inline';
     } else {
-      style.verticalAlign = 'bottom';
+      style.display = 'flex';
+      style.flexDirection = 'column';
+      style.alignItems = 'center';
+
+      if (cue.displayAlign == Cue.displayAlign.BEFORE) {
+        style.justifyContent = 'flex-start';
+      } else if (cue.displayAlign == Cue.displayAlign.CENTER) {
+        style.justifyContent = 'center';
+      } else {
+        style.justifyContent = 'flex-end';
+      }
     }
 
     if (!isLeaf) {
@@ -376,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) {
@@ -397,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';
@@ -535,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;
+  }
 };

package/lib/text/vtt_text_parser.js

@@ -122,7 +122,7 @@ shaka.text.VttTextParser = class {
   }
 
   /**
-   * Add deafult color
+   * Add default color
    *
    * @param {!Map.<string, shaka.text.Cue>} styles
    * @private
@@ -436,7 +436,9 @@ shaka.text.VttTextParser = class {
         }
         const tagEnd = payload.substring(i + 1, end);
         const tagStart = names.pop();
-        if (tagStart === tagEnd) {
+        if (!tagEnd || !tagStart) {
+          return payload;
+        } else if (tagStart === tagEnd) {
           newPayload += '/' + tagEnd + '>';
           i += tagEnd.length + 1;
         } else {

package/lib/util/fake_event.js

@@ -6,6 +6,8 @@
 
 goog.provide('shaka.util.FakeEvent');
 
+goog.require('goog.asserts');
+
 
 /**
  * @summary Create an Event work-alike object based on the provided dictionary.
@@ -16,18 +18,62 @@ goog.provide('shaka.util.FakeEvent');
  */
 shaka.util.FakeEvent = class {
   /**
-   * @param {string} type
-   * @param {Object=} dict
+   * @param {!Event} event
+   * @return {!shaka.util.FakeEvent}
    */
-  constructor(type, dict = {}) {
-    // Take properties from dict if present.
-    for (const key in dict) {
-      Object.defineProperty(this, key, {
-        value: dict[key],
+  static fromRealEvent(event) {
+    const fakeEvent = new shaka.util.FakeEvent(event.type);
+    for (const key in event) {
+      Object.defineProperty(fakeEvent, key, {
+        value: event[key],
         writable: true,
         enumerable: true,
       });
     }
+    return fakeEvent;
+  }
+
+  /**
+   * Allows us to tell the compiler that the dictionary "map" is actually a
+   * generic object, for backwards compatibility.
+   * @param {!Map.<string, Object>} dict
+   * @return {!Object}
+   * @suppress {invalidCasts}
+   * @private
+   */
+  static recastDictAsObject_(dict) {
+    goog.asserts.assert(!(dict instanceof Map), 'dict should not be a map');
+    return /** @type {!Object} */ (dict);
+  }
+
+  /**
+   * @param {string} type
+   * @param {Map.<string, Object>=} dict
+   */
+  constructor(type, dict) {
+    if (dict) {
+      if (dict instanceof Map) {
+        // Take properties from dict if present.
+        for (const key of dict.keys()) {
+          Object.defineProperty(this, key, {
+            value: dict.get(key),
+            writable: true,
+            enumerable: true,
+          });
+        }
+      } else {
+        // For backwards compatibility with external apps that may make use of
+        // this public constructor, this should still accept generic objects.
+        const obj = shaka.util.FakeEvent.recastDictAsObject_(dict);
+        for (const key in obj) {
+          Object.defineProperty(this, key, {
+            value: obj[key],
+            writable: true,
+            enumerable: true,
+          });
+        }
+      }
+    }
 
     // The properties below cannot be set by the dict.  They are all provided
     // for compatibility with native events.

package/lib/util/mp4_box_parsers.js

@@ -176,7 +176,7 @@ shaka.util.Mp4BoxParsers = class {
     if (version == 1) {
       reader.skip(8); // Skip "creation_time"
       reader.skip(8); // Skip "modification_time"
-      trackId = reader.readUint64();
+      trackId = reader.readUint32();
     } else {
       reader.skip(4); // Skip "creation_time"
       reader.skip(4); // Skip "modification_time"