shaka-player 4.1.1 → 4.1.4

package/docs/tutorials/ui.md

@@ -30,7 +30,7 @@ Set up controls with HTML data attributes:
          The data-shaka-player-cast-receiver-id tag allows you to provide a Cast Application ID that
            the cast button will cast to; the value provided here is the sample cast receiver. -->
     <div data-shaka-player-container style="max-width:40em"
-         data-shaka-player-cast-receiver-id="BBED8D28">
+         data-shaka-player-cast-receiver-id="06EDA6EE">
        <!-- The data-shaka-player tag will make the UI library use this video element.
             If no video is provided, the UI will automatically make one inside the container div. -->
       <video autoplay data-shaka-player id="video" style="width:100%;height:100%"></video>
@@ -111,7 +111,7 @@ set up a listener for the 'caststatuschanged' events.
 <!-- Add a data-shaka-player-cast-receiver-id tag to provide a Cast Application ID that
            the cast button will cast to; the value provided here is the sample cast receiver. -->
     <div data-shaka-player-container style="max-width:40em"
-         data-shaka-player-cast-receiver-id="BBED8D28">
+         data-shaka-player-cast-receiver-id="06EDA6EE">
     </div>
 ```
 
@@ -154,7 +154,7 @@ or a `<source>` tag inside it to enable auto loading of the specified content.
 
 ```html
     <div data-shaka-player-container style="max-width:40em"
-         data-shaka-player-cast-receiver-id="BBED8D28">
+         data-shaka-player-cast-receiver-id="06EDA6EE">
       <!-- The manifest url in the src attribute will be automatically loaded -->
       <video autoplay data-shaka-player id="video" style="width:100%;height:100%"
        src="https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"></video>
@@ -165,7 +165,7 @@ or
 
 ```html
     <div data-shaka-player-container style="max-width:40em"
-         data-shaka-player-cast-receiver-id="BBED8D28">
+         data-shaka-player-cast-receiver-id="06EDA6EE">
       <video autoplay data-shaka-player id="video" style="width:100%;height:100%">
         <!-- The manifest url in the src attribute will be auto loaded -->
        <source src="https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"/>
@@ -178,7 +178,7 @@ call to the first one fails.
 
 ```html
     <div data-shaka-player-container style="max-width:40em"
-         data-shaka-player-cast-receiver-id="BBED8D28">
+         data-shaka-player-cast-receiver-id="06EDA6EE">
       <video autoplay data-shaka-player id="video" style="width:100%;height:100%">
         <!-- Try this first -->
         <source src="https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"/>
@@ -222,7 +222,7 @@ const video = controls.getVideo();
 // Receiver Compatability.
 ui.configure({
   // Set the castReceiverAppId
-  'castReceiverAppId': 'BBED8D28',
+  'castReceiverAppId': '06EDA6EE',
   // Enable casting to native Android Apps (e.g. Android TV Apps)
   'castAndroidReceiverCompatible': true,
 });

package/docs/tutorials/upgrade.md

@@ -25,6 +25,7 @@ application:
     - TextDecoder/TextEncoder platform support or polyfill required (affects
       Xbox One, but not evergreen browsers); we suggest the polyfill
       [https://github.com/anonyco/FastestSmallestTextEncoderDecoder](fastestsmallesttextencoderdecoder/EncoderDecoderTogether.min.js)
+      Fallback included by default in v4.2
 
   - Support removed:
     - IE11 support removed

package/docs/tutorials/welcome.md

@@ -98,11 +98,14 @@ You can find a full list of available browsers with `--browsers help`, and you
 can find a complete list of testing options with `--help`.
 
 
-#### Join the announcement list
+#### Announcements
 
-If you want to receive release or survey announcements, you should join our
+To subscribe to new releases on GitHub, you can follow
+[instructions from this blog](https://www.jessesquires.com/blog/2020/07/30/github-tip-watching-releases/).
+
+To receive infrequent announcements and surveys from us, you can join our
 [mailing list](https://groups.google.com/forum/#!forum/shaka-player-users).
-The list is very low volume.
+The list is very low volume, and can only be written to by us.
 
 
 #### Continue the Tutorials

package/karma.conf.js

@@ -160,10 +160,6 @@ module.exports = (config) => {
       'node_modules/es6-promise-polyfill/promise.js',
       //   Babel polyfill, required for async/await
       'node_modules/@babel/polyfill/dist/polyfill.js',
-      //   TextDecoder polyfill, required for TextDecoder/TextEncoder on IE and
-      //   legacy Edge
-      //   eslint-disable-next-line max-len
-      'node_modules/fastestsmallesttextencoderdecoder/EncoderDecoderTogether.min.js',
 
       // muxjs module next
       'node_modules/mux.js/dist/mux.min.js',
@@ -306,13 +302,6 @@ module.exports = (config) => {
     // Force failure when running empty test-suites.
     failOnEmptyTestSuite: true,
 
-    coverageReporter: {
-      includeAllSources: true,
-      reporters: [
-        {type: 'text'},
-      ],
-    },
-
     specReporter: {
       suppressSkipped: true,
       showBrowser: true,
@@ -405,9 +394,12 @@ module.exports = (config) => {
 
     config.set({
       coverageReporter: {
+        includeAllSources: true,
         reporters: [
           {type: 'html', dir: 'coverage'},
           {type: 'cobertura', dir: 'coverage', file: 'coverage.xml'},
+          {type: 'json-summary', dir: 'coverage', file: 'coverage.json'},
+          {type: 'json', dir: 'coverage', file: 'coverage-details.json'},
         ],
       },
     });

package/lib/ads/client_side_ad_manager.js

@@ -427,7 +427,7 @@ shaka.ads.ClientSideAdManager = class {
   onAdComplete_(e) {
     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED,
         (new Map()).set('originalEvent', e)));
-    if (this.ad_.isLinear()) {
+    if (this.ad_ && this.ad_.isLinear()) {
       this.adContainer_.removeAttribute('ad-active');
       this.video_.play();
     }

package/lib/dash/dash_parser.js

@@ -513,6 +513,11 @@ shaka.dash.DashParser = class {
         }
         presentationTimeline.setClockOffset(offset);
       }
+
+      // This is the first point where we have a meaningful presentation start
+      // time, and we need to tell PresentationTimeline that so that it can
+      // maintain consistency from here on.
+      presentationTimeline.lockStartTime();
     } else {
       // Just update the variants and text streams, which may change as periods
       // are added or removed.

package/lib/hls/hls_parser.js

@@ -740,8 +740,14 @@ shaka.hls.HlsParser = class {
     for (const stream of streamsToNotify) {
       this.segmentsToNotifyByStream_.push(stream.segmentIndex.references);
     }
+
     this.notifySegments_();
 
+    // This is the first point where we have a meaningful presentation start
+    // time, and we need to tell PresentationTimeline that so that it can
+    // maintain consistency from here on.
+    this.presentationTimeline_.lockStartTime();
+
     // This asserts that the live edge is being calculated from segment times.
     // For VOD and event streams, this check should still pass.
     goog.asserts.assert(
@@ -1859,8 +1865,6 @@ shaka.hls.HlsParser = class {
       /* presentationStartTime= */ null, /* delay= */ 0);
       this.presentationTimeline_.setStatic(true);
     }
-
-    this.notifySegments_();
   }
 
   /**

package/lib/media/drm_engine.js

@@ -1548,7 +1548,7 @@ shaka.media.DrmEngine = class {
       if (shaka.media.DrmEngine.isPlayReadyKeySystem(
           this.currentDrmInfo_.keySystem) &&
           keyId.byteLength == 16 &&
-          shaka.util.Platform.isEdge()) {
+          (shaka.util.Platform.isEdge() || shaka.util.Platform.isPS4())) {
         // Read out some fields in little-endian:
         const dataView = shaka.util.BufferUtils.toDataView(keyId);
         const part0 = dataView.getUint32(0, /* LE= */ true);

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/streaming_engine.js

@@ -1555,8 +1555,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;
@@ -1609,8 +1609,7 @@ shaka.media.StreamingEngine = class {
     await this.playerInterface_.mediaSourceEngine.appendBuffer(
         mediaState.type,
         segment,
-        reference.startTime,
-        reference.endTime,
+        reference,
         hasClosedCaptions,
         seeked);
     this.destroyer_.ensureNotDestroyed();
@@ -1791,6 +1790,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

@@ -857,14 +857,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) {
@@ -4457,6 +4452,12 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       this.stats_.setBandwidthEstimate(estimate);
     }
 
+    if (this.loadMode_ == shaka.Player.LoadMode.SRC_EQUALS) {
+      this.stats_.setResolution(
+          /* width= */ element.videoWidth || NaN,
+          /* height= */ element.videoHeight || NaN);
+    }
+
     return this.stats_.getBlob();
   }
 
@@ -5623,6 +5624,12 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       return false;
     }
 
+    if (!navigator.onLine) {
+      // Don't restrict variants if we're completely offline, or else we end up
+      // rapidly restricting all of them.
+      return false;
+    }
+
     let maxDisabledTime = this.config_.streaming.maxDisabledTime;
     if (maxDisabledTime == 0) {
       if (error.code == shaka.util.Error.Code.SEGMENT_MISSING) {
@@ -6556,7 +6563,7 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @define {string} A version number taken from git at compile time.
  * @export
  */
-shaka.Player.version = 'v4.1.1-uncompiled';
+shaka.Player.version = 'v4.1.4-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 = [];