shaka-player 4.0.2 → 4.0.5

package/lib/media/media_source_engine.js

@@ -10,6 +10,7 @@ goog.require('goog.asserts');
 goog.require('shaka.log');
 goog.require('shaka.media.ContentWorkarounds');
 goog.require('shaka.media.IClosedCaptionParser');
+goog.require('shaka.media.SegmentReference');
 goog.require('shaka.media.TimeRangesUtils');
 goog.require('shaka.media.Transmuxer');
 goog.require('shaka.text.TextEngine');
@@ -466,13 +467,13 @@ shaka.media.MediaSourceEngine = class {
    */
   getBufferedInfo() {
     const ContentType = shaka.util.ManifestParserUtils.ContentType;
-    const TimeRangeUtils = shaka.media.TimeRangesUtils;
+    const TimeRangesUtils = shaka.media.TimeRangesUtils;
 
     const info = {
-      total: TimeRangeUtils.getBufferedInfo(this.video_.buffered),
-      audio: TimeRangeUtils.getBufferedInfo(
+      total: TimeRangesUtils.getBufferedInfo(this.video_.buffered),
+      audio: TimeRangesUtils.getBufferedInfo(
           this.getBuffered_(ContentType.AUDIO)),
-      video: TimeRangeUtils.getBufferedInfo(
+      video: TimeRangesUtils.getBufferedInfo(
           this.getBuffered_(ContentType.VIDEO)),
       text: [],
     };
@@ -516,15 +517,14 @@ shaka.media.MediaSourceEngine = class {
    *
    * @param {shaka.util.ManifestParserUtils.ContentType} contentType
    * @param {!BufferSource} data
-   * @param {?number} startTime relative to the start of the presentation
-   * @param {?number} endTime relative to the start of the presentation
+   * @param {?shaka.media.SegmentReference} reference The segment reference
+   *   we are appending, or null for init segments
    * @param {?boolean} hasClosedCaptions True if the buffer contains CEA closed
-   * captions
+   *   captions
    * @param {boolean=} seeked True if we just seeked
    * @return {!Promise}
    */
-  async appendBuffer(
-      contentType, data, startTime, endTime, hasClosedCaptions, seeked) {
+  async appendBuffer(contentType, data, reference, hasClosedCaptions, seeked) {
     const ContentType = shaka.util.ManifestParserUtils.ContentType;
 
     if (contentType == ContentType.TEXT) {
@@ -533,7 +533,10 @@ shaka.media.MediaSourceEngine = class {
         const offset = await this.textSequenceModeOffset_;
         this.textEngine_.setTimestampOffset(offset);
       }
-      await this.textEngine_.appendBuffer(data, startTime, endTime);
+      await this.textEngine_.appendBuffer(
+          data,
+          reference ? reference.startTime : null,
+          reference ? reference.endTime : null);
       return;
     }
 
@@ -549,7 +552,10 @@ shaka.media.MediaSourceEngine = class {
       if (transmuxedData.metadata) {
         const timestampOffset =
             this.sourceBuffers_[contentType].timestampOffset;
-        this.onMetadata_(transmuxedData.metadata, timestampOffset, endTime);
+        this.onMetadata_(
+            transmuxedData.metadata,
+            timestampOffset,
+            reference ? reference.endTime : null);
       }
       // This doesn't work for native TS support (ex. Edge/Chromecast),
       // since no transmuxing is needed for native TS.
@@ -559,7 +565,10 @@ shaka.media.MediaSourceEngine = class {
         const closedCaptions = this.textEngine_
             .convertMuxjsCaptionsToShakaCaptions(transmuxedData.captions);
         this.textEngine_.storeAndAppendClosedCaptions(
-            closedCaptions, startTime, endTime, videoOffset);
+            closedCaptions,
+            reference ? reference.startTime : null,
+            reference ? reference.endTime : null,
+            videoOffset);
       }
 
       data = transmuxedData.data;
@@ -569,7 +578,7 @@ shaka.media.MediaSourceEngine = class {
       }
       // If it is the init segment for closed captions, initialize the closed
       // caption parser.
-      if (startTime == null && endTime == null) {
+      if (!reference) {
         this.captionParser_.init(data);
       } else {
         const closedCaptions = this.captionParser_.parseFrom(data);
@@ -577,18 +586,21 @@ shaka.media.MediaSourceEngine = class {
           const videoOffset =
             this.sourceBuffers_[ContentType.VIDEO].timestampOffset;
           this.textEngine_.storeAndAppendClosedCaptions(
-              closedCaptions, startTime, endTime, videoOffset);
+              closedCaptions,
+              reference.startTime,
+              reference.endTime,
+              videoOffset);
         }
       }
     }
 
-    data = this.workAroundBrokenPlatforms_(data, startTime, contentType);
+    data = this.workAroundBrokenPlatforms_(
+        data, reference ? reference.startTime : null, contentType);
 
     const sourceBuffer = this.sourceBuffers_[contentType];
     const SEQUENCE = shaka.media.MediaSourceEngine.SourceBufferMode_.SEQUENCE;
 
-    if (this.sequenceMode_ && sourceBuffer.mode != SEQUENCE &&
-        startTime != null) {
+    if (this.sequenceMode_ && sourceBuffer.mode != SEQUENCE && reference) {
       // This is the first media segment to be appended to a SourceBuffer in
       // sequence mode.  We set the mode late so that we can trick MediaSource
       // into extracting a timestamp for us to align text segments in sequence
@@ -623,7 +635,7 @@ shaka.media.MediaSourceEngine = class {
         // segments.
         const mediaStartTime = shaka.media.TimeRangesUtils.bufferStart(
             this.getBuffered_(contentType));
-        const textOffset = (startTime || 0) - (mediaStartTime || 0);
+        const textOffset = (reference.startTime || 0) - (mediaStartTime || 0);
         this.textSequenceModeOffset_.resolve(textOffset);
 
         // Finally, clear the buffer.
@@ -636,22 +648,43 @@ shaka.media.MediaSourceEngine = class {
       sourceBuffer.mode = SEQUENCE;
     }
 
-    if (startTime != null && this.sequenceMode_ &&
-        contentType != ContentType.TEXT) {
+    if (reference && this.sequenceMode_ && contentType != ContentType.TEXT) {
       // In sequence mode, for non-text streams, if we just cleared the buffer
       // and are performing an unbuffered seek, we need to set a new
       // timestampOffset on the sourceBuffer.
       if (seeked) {
-        const timestampOffset = /** @type {number} */ (startTime);
+        const timestampOffset = reference.startTime;
         this.enqueueOperation_(
             contentType,
             () => this.setTimestampOffset_(contentType, timestampOffset));
       }
     }
 
-    await this.enqueueOperation_(
-        contentType,
-        () => this.append_(contentType, data));
+    let bufferedBefore = null;
+
+    await this.enqueueOperation_(contentType, () => {
+      if (goog.DEBUG && reference) {
+        bufferedBefore = this.getBuffered_(contentType);
+      }
+      this.append_(contentType, data);
+    });
+
+    if (goog.DEBUG && reference) {
+      const bufferedAfter = this.getBuffered_(contentType);
+      const newBuffered = shaka.media.TimeRangesUtils.computeAddedRange(
+          bufferedBefore, bufferedAfter);
+      if (newBuffered) {
+        const segmentDuration = reference.endTime - reference.startTime;
+        if (Math.abs(newBuffered.start - reference.startTime) >
+            segmentDuration / 2) {
+          shaka.log.error('Possible encoding problem detected!',
+              'Unexpected buffered range for reference', reference,
+              'from URIs', reference.getUris(),
+              'should be', {start: reference.startTime, end: reference.endTime},
+              'but got', newBuffered);
+        }
+      }
+    }
   }
 
   /**

package/lib/media/presentation_timeline.js

@@ -93,6 +93,9 @@ shaka.media.PresentationTimeline = class {
      * @private {number}
      */
     this.availabilityTimeOffset_ = 0;
+
+    /** @private {boolean} */
+    this.startTimeLocked_ = false;
   }
 
 
@@ -229,7 +232,8 @@ shaka.media.PresentationTimeline = class {
     this.maxSegmentEndTime_ =
         Math.max(this.maxSegmentEndTime_, lastReferenceEndTime);
 
-    if (this.presentationStartTime_ != null && this.autoCorrectDrift_) {
+    if (this.presentationStartTime_ != null && this.autoCorrectDrift_ &&
+        !this.startTimeLocked_) {
       // Since we have explicit segment end times, calculate a presentation
       // start based on them.  This start time accounts for drift.
       // Date.now() is in milliseconds, from which we compute "now" in seconds.
@@ -243,6 +247,25 @@ shaka.media.PresentationTimeline = class {
   }
 
 
+  /**
+   * Lock the presentation timeline's start time.  After this is called, no
+   * further adjustments to presentationStartTime_ will be permitted.
+   *
+   * This should be called after all Periods have been parsed, and all calls to
+   * notifySegments() from the initial manifest parse have been made.
+   *
+   * Without this, we can get assertion failures in SegmentIndex for certain
+   * DAI content.  If DAI adds ad segments to the manifest faster than
+   * real-time, adjustments to presentationStartTime_ can cause availability
+   * windows to jump around on updates.
+   *
+   * @export
+   */
+  lockStartTime() {
+    this.startTimeLocked_ = true;
+  }
+
+
   /**
    * Gives PresentationTimeline a Stream's minimum segment start time.
    *

package/lib/media/segment_index.js

@@ -94,6 +94,25 @@ shaka.media.SegmentIndex = class {
   }
 
 
+  /**
+   * Return the earliest reference, or null if empty.
+   * @return {shaka.media.SegmentReference}
+   */
+  earliestReference() {
+    return this.references[0] || null;
+  }
+
+
+  /**
+   * Drop the first N references.
+   * Used in early HLS synchronization, and does not count as eviction.
+   * @param {number} n
+   */
+  dropFirstReferences(n) {
+    this.references.splice(0, n);
+  }
+
+
   /**
    * Finds the position of the segment for the given time, in seconds, relative
    * to the start of the presentation.  Returns the position of the segment
@@ -166,7 +185,13 @@ shaka.media.SegmentIndex = class {
       for (const ref of this.references) {
         ref.startTime += offset;
         ref.endTime += offset;
-        ref.timestampOffset += offset;
+        ref.trueEndTime += offset;
+
+        for (const partial of ref.partialReferences) {
+          partial.startTime += offset;
+          partial.endTime += offset;
+          partial.trueEndTime += offset;
+        }
       }
     }
   }

package/lib/media/segment_reference.js

@@ -160,8 +160,9 @@ shaka.media.SegmentReference = class {
    *  If not provided, the duration should be automatically calculated based on
    *  the duration of the reference.
    * @param {?number=} syncTime
-   *  A time value, expressed in the same scale as the start and end time, which
-   *  is used to synchronize between streams.
+   *  A time value, expressed in seconds since 1970, which is used to
+   *  synchronize between streams.  Both produced and consumed by the HLS
+   *  parser.  Other components should not need this value.
    * @param {shaka.media.SegmentReference.Status=} status
    *  The segment status is used to indicate that a segment does not exist or is
    *  not available.
@@ -221,7 +222,13 @@ shaka.media.SegmentReference = class {
     /** @type {?number} */
     this.tileDuration = tileDuration;
 
-    /** @type {?number} */
+    /**
+     * A time value, expressed in seconds since 1970, which is used to
+     * synchronize between streams.  Both produced and consumed by the HLS
+     * parser.  Other components should not need this value.
+     *
+     * @type {?number}
+     */
     this.syncTime = syncTime;
 
     /** @type {shaka.media.SegmentReference.Status} */

package/lib/media/streaming_engine.js

@@ -1548,8 +1548,8 @@ shaka.media.StreamingEngine = class {
             const hasClosedCaptions = mediaState.stream.closedCaptions &&
                 mediaState.stream.closedCaptions.size > 0;
             await this.playerInterface_.mediaSourceEngine.appendBuffer(
-                mediaState.type, initSegment, /* startTime= */ null,
-                /* endTime= */ null, hasClosedCaptions);
+                mediaState.type, initSegment, /* reference= */ null,
+                hasClosedCaptions);
           } catch (error) {
             mediaState.lastInitSegmentReference = null;
             throw error;
@@ -1602,8 +1602,7 @@ shaka.media.StreamingEngine = class {
     await this.playerInterface_.mediaSourceEngine.appendBuffer(
         mediaState.type,
         segment,
-        reference.syncTime == null ? reference.startTime : reference.syncTime,
-        reference.endTime,
+        reference,
         hasClosedCaptions,
         seeked);
     this.destroyer_.ensureNotDestroyed();
@@ -1784,6 +1783,7 @@ shaka.media.StreamingEngine = class {
    *
    * @return {!Promise.<BufferSource>}
    * @private
+   * @suppress {strictMissingProperties}
    */
   async fetch_(mediaState, reference, streamDataCallback) {
     const requestType = shaka.net.NetworkingEngine.RequestType.SEGMENT;

package/lib/media/time_ranges_utils.js

@@ -155,4 +155,50 @@ shaka.media.TimeRangesUtils = class {
     }
     return ret;
   }
+
+  /**
+   * This operation can be potentially EXPENSIVE and should only be done in
+   * debug builds for debugging purposes.
+   *
+   * @param {TimeRanges} oldRanges
+   * @param {TimeRanges} newRanges
+   * @return {?shaka.extern.BufferedRange} The last added range,
+   *   chronologically by presentation time.
+   */
+  static computeAddedRange(oldRanges, newRanges) {
+    const TimeRangesUtils = shaka.media.TimeRangesUtils;
+
+    if (!oldRanges || !oldRanges.length) {
+      return null;
+    }
+    if (!newRanges || !newRanges.length) {
+      return TimeRangesUtils.getBufferedInfo(newRanges).pop();
+    }
+
+    const newRangesReversed =
+        TimeRangesUtils.getBufferedInfo(newRanges).reverse();
+    const oldRangesReversed =
+        TimeRangesUtils.getBufferedInfo(oldRanges).reverse();
+    for (const newRange of newRangesReversed) {
+      let foundOverlap = false;
+
+      for (const oldRange of oldRangesReversed) {
+        if (oldRange.end >= newRange.start && oldRange.end <= newRange.end) {
+          foundOverlap = true;
+
+          // If the new range goes beyond the corresponding old one, the
+          // difference is newly-added.
+          if (newRange.end > oldRange.end) {
+            return {start: oldRange.end, end: newRange.end};
+          }
+        }
+      }
+
+      if (!foundOverlap) {
+        return newRange;
+      }
+    }
+
+    return null;
+  }
 };

package/lib/player.js

@@ -833,14 +833,9 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     if (!window.Promise) {
       shaka.log.alwaysWarn('A Promise implementation or polyfill is required');
     }
-    if (!window.TextDecoder || !window.TextEncoder) {
-      shaka.log.alwaysWarn(
-          'A TextDecoder/TextEncoder implementation or polyfill is required');
-    }
 
     // Basic features needed for the library to be usable.
     const basicSupport = !!window.Promise && !!window.Uint8Array &&
-                         !!window.TextDecoder && !!window.TextEncoder &&
                          // eslint-disable-next-line no-restricted-syntax
                          !!Array.prototype.forEach;
     if (!basicSupport) {
@@ -6450,7 +6445,7 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @define {string} A version number taken from git at compile time.
  * @export
  */
-shaka.Player.version = 'v4.0.2-uncompiled';
+shaka.Player.version = 'v4.0.5-uncompiled';
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/polyfill/media_capabilities.js

@@ -37,9 +37,18 @@ shaka.polyfill.MediaCapabilities = class {
     // See: https://github.com/shaka-project/shaka-player/issues/3582
     // TODO: re-evaluate MediaCapabilities in the future versions of PS5
     // Browsers.
+    // Since MediaCapabilities implementation does not exist in PS4 browsers, we
+    // should always install polyfill.
+    // Since MediaCapabilities implementation is buggy in Tizen browsers, we
+    // should always install polyfill for Tizen browsers.
+    // Since MediaCapabilities implementation is buggy in WebOS browsers, we
+    // should always install polyfill for WebOS browsers.
     let canUseNativeMCap = true;
     if (shaka.util.Platform.isApple() ||
         shaka.util.Platform.isPS5() ||
+        shaka.util.Platform.isPS4() ||
+        shaka.util.Platform.isWebOS() ||
+        shaka.util.Platform.isTizen() ||
         shaka.util.Platform.isChromecast()) {
       canUseNativeMCap = false;
     }

package/lib/polyfill/videoplaybackquality.js

@@ -7,6 +7,7 @@
 goog.provide('shaka.polyfill.VideoPlaybackQuality');
 
 goog.require('shaka.polyfill');
+goog.require('shaka.util.Platform');
 
 
 /**
@@ -33,7 +34,8 @@ shaka.polyfill.VideoPlaybackQuality = class {
       return;
     }
 
-    if ('webkitDroppedFrameCount' in proto) {
+    if ('webkitDroppedFrameCount' in proto ||
+        shaka.util.Platform.isWebOS3()) {
       proto.getVideoPlaybackQuality =
           shaka.polyfill.VideoPlaybackQuality.webkit_;
     }

package/lib/text/cue.js

@@ -41,14 +41,9 @@ shaka.text.Cue = class {
      */
     this.endTime = endTime;
 
-    // The explicit type here is to work around an apparent compiler bug where
-    // the compiler seems to get confused about the type.  Since we are
-    // overriding the interface type, it shouldn't be necessary to do this.
-    // Compiler version 20200517.
     /**
      * @override
      * @exportInterface
-     * @type {string}
      */
     this.payload = payload;
 

package/lib/text/simple_text_displayer.js

@@ -121,16 +121,28 @@ shaka.text.SimpleTextDisplayer = class {
     // We don't want to modify the array or objects passed in, since we don't
     // technically own them.  So we build a new array and replace certain items
     // in it if they need to be flattened.
-    const flattenedCues = cues.map((cue) => {
-      if (cue.nestedCues.length) {
-        const flatCue = cue.clone();
-        flatCue.nestedCues = [];
-        flatCue.payload = flattenPayload(cue);
-        return flatCue;
-      } else {
-        return cue;
+    // We also don't want to flatten the text payloads starting at a container
+    // element; otherwise, for containers encapsulating multiple caption lines,
+    // the lines would merge into a single cue. This is undesirable when a
+    // subset of the captions are outside of the append time window. To fix
+    // this, we only call flattenPayload() starting at elements marked as
+    // isContainer = false.
+    const getCuesToFlatten = (cues, result) => {
+      for (const cue of cues) {
+        if (cue.isContainer) {
+          // Recurse to find the actual text payload cues.
+          getCuesToFlatten(cue.nestedCues, result);
+        } else {
+          // Flatten the payload.
+          const flatCue = cue.clone();
+          flatCue.nestedCues = [];
+          flatCue.payload = flattenPayload(cue);
+          result.push(flatCue);
+        }
       }
-    });
+      return result;
+    };
+    const flattenedCues = getCuesToFlatten(cues, []);
 
     // Convert cues.
     const textTrackCues = [];

package/lib/text/ui_text_displayer.js

@@ -77,6 +77,7 @@ shaka.text.UITextDisplayer = class {
      * the cue (e.g. the HTML element to put nested cues inside).
      * @private {Map.<!shaka.extern.Cue, !{
      *   cueElement: !HTMLElement,
+     *   regionElement: HTMLElement,
      *   wrapper: !HTMLElement
      * }>}
      */
@@ -97,6 +98,9 @@ shaka.text.UITextDisplayer = class {
       });
       this.resizeObserver_.observe(this.textContainer_);
     }
+
+    /** @private {Map.<string, !HTMLElement>} */
+    this.regionElements_ = new Map();
   }
 
 
@@ -234,6 +238,11 @@ shaka.text.UITextDisplayer = class {
         // even ones which are going to be planted again.
         toUproot.push(cueRegistry.cueElement);
 
+        // Also uproot all displayed region elements.
+        if (cueRegistry.regionElement) {
+          toUproot.push(cueRegistry.regionElement);
+        }
+
         // 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.
@@ -268,8 +277,12 @@ shaka.text.UITextDisplayer = class {
       goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
     }
     if (updateDOM) {
-      for (const cueElement of toUproot) {
-        container.removeChild(cueElement);
+      for (const element of toUproot) {
+        // NOTE: Because we uproot shared region elements, too, we might hit an
+        // element here that has no parent because we've already processed it.
+        if (element.parentElement) {
+          element.parentElement.removeChild(element);
+        }
       }
       toPlant.sort((a, b) => {
         if (a.startTime != b.startTime) {
@@ -281,7 +294,12 @@ shaka.text.UITextDisplayer = class {
       for (const cue of toPlant) {
         const cueRegistry = this.currentCuesMap_.get(cue);
         goog.asserts.assert(cueRegistry, 'cueRegistry should exist.');
-        container.appendChild(cueRegistry.cueElement);
+        if (cueRegistry.regionElement) {
+          container.appendChild(cueRegistry.regionElement);
+          cueRegistry.regionElement.appendChild(cueRegistry.cueElement);
+        } else {
+          container.appendChild(cueRegistry.cueElement);
+        }
       }
     }
   }
@@ -298,11 +316,15 @@ shaka.text.UITextDisplayer = class {
 
     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();
+      // Remove child elements from all regions.
+      for (const regionElement of this.regionElements_.values()) {
+        shaka.util.Dom.removeAllChildren(regionElement);
       }
+      // Remove all top-level elements in the text container.
+      shaka.util.Dom.removeAllChildren(this.textContainer_);
+      // Clear the element maps.
+      this.currentCuesMap_.clear();
+      this.regionElements_.clear();
     }
     if (this.isTextVisible_) {
       // Log currently attached cue elements for verification, later.
@@ -332,6 +354,54 @@ shaka.text.UITextDisplayer = class {
     }
   }
 
+  /**
+   * Get or create a region element corresponding to the cue region.  These are
+   * cached by ID.
+   *
+   * @param {!shaka.extern.Cue} cue
+   * @return {!HTMLElement}
+   * @private
+   */
+  getRegionElement_(cue) {
+    const region = cue.region;
+
+    if (this.regionElements_.has(region.id)) {
+      return this.regionElements_.get(region.id);
+    }
+
+    const regionElement = shaka.util.Dom.createHTMLElement('span');
+
+    const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
+    const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
+    const widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
+    const viewportAnchorUnit =
+        region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
+
+    regionElement.id = 'shaka-text-region---' + region.id;
+    regionElement.classList.add('shaka-text-region');
+
+    regionElement.style.height = region.height + heightUnit;
+    regionElement.style.width = region.width + widthUnit;
+    regionElement.style.position = 'absolute';
+    regionElement.style.top = region.viewportAnchorY + viewportAnchorUnit;
+    regionElement.style.left = region.viewportAnchorX + viewportAnchorUnit;
+
+    regionElement.style.display = 'flex';
+    regionElement.style.flexDirection = 'column';
+    regionElement.style.alignItems = 'center';
+
+    if (cue.displayAlign == shaka.text.Cue.displayAlign.BEFORE) {
+      regionElement.style.justifyContent = 'flex-start';
+    } else if (cue.displayAlign == shaka.text.Cue.displayAlign.CENTER) {
+      regionElement.style.justifyContent = 'center';
+    } else {
+      regionElement.style.justifyContent = 'flex-end';
+    }
+
+    this.regionElements_.set(region.id, regionElement);
+    return regionElement;
+  }
+
   /**
    * Creates the object for a cue.
    *
@@ -354,6 +424,11 @@ shaka.text.UITextDisplayer = class {
       this.setCaptionStyles_(cueElement, cue, parents, needWrapper);
     }
 
+    let regionElement = null;
+    if (cue.region && cue.region.id) {
+      regionElement = this.getRegionElement_(cue);
+    }
+
     let wrapper = cueElement;
     if (needWrapper) {
       // Create a wrapper element which will serve to contain all children into
@@ -365,7 +440,7 @@ shaka.text.UITextDisplayer = class {
       cueElement.appendChild(wrapper);
     }
 
-    this.currentCuesMap_.set(cue, {cueElement, wrapper});
+    this.currentCuesMap_.set(cue, {cueElement, wrapper, regionElement});
   }
 
   /**
@@ -525,17 +600,6 @@ shaka.text.UITextDisplayer = class {
           }
         }
       }
-    } 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';
-      const viewportAnchorUnit =
-          cue.region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
-      style.height = cue.region.height + heightUnit;
-      style.width = cue.region.width + widthUnit;
-      style.position = 'absolute';
-      style.top = cue.region.viewportAnchorY + viewportAnchorUnit;
-      style.left = cue.region.viewportAnchorX + viewportAnchorUnit;
     }
 
     style.lineHeight = cue.lineHeight;

package/lib/util/buffer_utils.js

@@ -20,6 +20,7 @@ shaka.util.BufferUtils = class {
    * @param {?BufferSource} arr2
    * @return {boolean}
    * @export
+   * @suppress {strictMissingProperties}
    */
   static equal(arr1, arr2) {
     const BufferUtils = shaka.util.BufferUtils;
@@ -135,8 +136,10 @@ shaka.util.BufferUtils = class {
   static view_(data, offset, length, Type) {
     const buffer = shaka.util.BufferUtils.unsafeGetArrayBuffer_(data);
     // Absolute end of the |data| view within |buffer|.
+    /** @suppress {strictMissingProperties} */
     const dataEnd = (data.byteOffset || 0) + data.byteLength;
     // Absolute start of the result within |buffer|.
+    /** @suppress {strictMissingProperties} */
     const rawStart = (data.byteOffset || 0) + offset;
     const start = Math.max(0, Math.min(rawStart, dataEnd));
     // Absolute end of the result within |buffer|.