shaka-player 4.3.12 → 4.3.14

package/lib/text/text_engine.js

@@ -160,9 +160,10 @@ shaka.text.TextEngine = class {
    * @param {BufferSource} buffer
    * @param {?number} startTime relative to the start of the presentation
    * @param {?number} endTime relative to the start of the presentation
+   * @param {?string=} uri
    * @return {!Promise}
    */
-  async appendBuffer(buffer, startTime, endTime) {
+  async appendBuffer(buffer, startTime, endTime, uri) {
     goog.asserts.assert(
         this.parser_, 'The parser should already be initialized');
 
@@ -192,7 +193,7 @@ shaka.text.TextEngine = class {
 
     // Parse the buffer and add the new cues.
     const allCues = this.parser_.parseMedia(
-        shaka.util.BufferUtils.toUint8(buffer), time);
+        shaka.util.BufferUtils.toUint8(buffer), time, uri);
     const cuesToAppend = allCues.filter((cue) => {
       return cue.startTime >= this.appendWindowStart_ &&
           cue.startTime < this.appendWindowEnd_;

package/lib/text/ttml_text_parser.js

@@ -7,6 +7,7 @@
 goog.provide('shaka.text.TtmlTextParser');
 
 goog.require('goog.asserts');
+goog.require('goog.Uri');
 goog.require('shaka.log');
 goog.require('shaka.text.Cue');
 goog.require('shaka.text.CueRegion');
@@ -42,7 +43,7 @@ shaka.text.TtmlTextParser = class {
    * @override
    * @export
    */
-  parseMedia(data, time) {
+  parseMedia(data, time, uri) {
     const TtmlTextParser = shaka.text.TtmlTextParser;
     const XmlUtils = shaka.util.XmlUtils;
     const ttpNs = TtmlTextParser.parameterNs_;
@@ -139,7 +140,7 @@ shaka.text.TtmlTextParser = class {
         body, time, rateInfo, metadataElements, styles,
         regionElements, cueRegions, whitespaceTrim,
         cellResolutionInfo, /* parentCueElement= */ null,
-        /* isContent= */ false);
+        /* isContent= */ false, uri);
     if (cue) {
       // According to the TTML spec, backgrounds default to transparent.
       // So default the background of the top-level element to transparent.
@@ -167,12 +168,14 @@ shaka.text.TtmlTextParser = class {
    * @param {?{columns: number, rows: number}} cellResolution
    * @param {?Element} parentCueElement
    * @param {boolean} isContent
+   * @param {?(string|undefined)} uri
    * @return {shaka.text.Cue}
    * @private
    */
   static parseCue_(
       cueNode, timeContext, rateInfo, metadataElements, styles, regionElements,
-      cueRegions, whitespaceTrim, cellResolution, parentCueElement, isContent) {
+      cueRegions, whitespaceTrim, cellResolution, parentCueElement, isContent,
+      uri) {
     /** @type {Element} */
     let cueElement;
     /** @type {Element} */
@@ -214,7 +217,21 @@ shaka.text.TtmlTextParser = class {
       }
     }
 
-    if (cueNode.nodeName == 'p' || imageElement) {
+    let imageUri = null;
+    const backgroundImage = shaka.util.XmlUtils.getAttributeNSList(
+        cueElement,
+        shaka.text.TtmlTextParser.smpteNsList_,
+        'backgroundImage');
+    if (uri && backgroundImage && !backgroundImage.startsWith('#')) {
+      const baseUri = new goog.Uri(uri);
+      const relativeUri = new goog.Uri(backgroundImage);
+      const newUri = baseUri.resolve(relativeUri).toString();
+      if (newUri) {
+        imageUri = newUri;
+      }
+    }
+
+    if (cueNode.nodeName == 'p' || imageElement || imageUri) {
       isContent = true;
     }
 
@@ -247,6 +264,7 @@ shaka.text.TtmlTextParser = class {
             cellResolution,
             cueElement,
             isContent,
+            uri,
         );
 
         // This node may or may not generate a nested cue.
@@ -380,6 +398,7 @@ shaka.text.TtmlTextParser = class {
         cueElement,
         regionElementForStyle,
         imageElement,
+        imageUri,
         styles,
         /** isNested= */ parentIsContent, // "nested in a <div>" doesn't count.
         /** isLeaf= */ (nestedCues.length == 0));
@@ -464,6 +483,11 @@ shaka.text.TtmlTextParser = class {
             region.viewportAnchorX = region.viewportAnchorX * 100 /
               globalWidth;
           }
+        } else if (!extent) {
+          region.width = 100 - region.viewportAnchorX;
+          region.widthUnits = shaka.text.CueRegion.units.PERCENTAGE;
+          region.height = 100 - region.viewportAnchorY;
+          region.heightUnits = shaka.text.CueRegion.units.PERCENTAGE;
         }
 
         region.viewportAnchorUnits = percentage || globalWidth != null ?
@@ -482,13 +506,15 @@ shaka.text.TtmlTextParser = class {
    * @param {!Element} cueElement
    * @param {Element} region
    * @param {Element} imageElement
+   * @param {?string} imageUri
    * @param {!Array.<!Element>} styles
    * @param {boolean} isNested
    * @param {boolean} isLeaf
    * @private
    */
   static addStyle_(
-      cue, cueElement, region, imageElement, styles, isNested, isLeaf) {
+      cue, cueElement, region, imageElement, imageUri, styles,
+      isNested, isLeaf) {
     const TtmlTextParser = shaka.text.TtmlTextParser;
     const Cue = shaka.text.Cue;
 
@@ -656,6 +682,8 @@ shaka.text.TtmlTextParser = class {
           backgroundImageData) {
         cue.backgroundImage = 'data:image/png;base64,' + backgroundImageData;
       }
+    } else if (imageUri) {
+      cue.backgroundImage = imageUri;
     }
 
     const textOutline = TtmlTextParser.getStyleAttribute_(

package/lib/text/ui_text_displayer.js

@@ -44,6 +44,9 @@ shaka.text.UITextDisplayer = class {
     /** @private {HTMLElement} */
     this.videoContainer_ = videoContainer;
 
+    /** @private {?number} */
+    this.aspectRatio_ = null;
+
     /** @type {HTMLElement} */
     this.textContainer_ = shaka.util.Dom.createHTMLElement('div');
     this.textContainer_.classList.add('shaka-text-container');
@@ -90,6 +93,23 @@ shaka.text.UITextDisplayer = class {
       this.updateCaptions_(/* forceUpdate= */ true);
     });
 
+    // From: https://html.spec.whatwg.org/multipage/media.html#dom-video-videowidth
+    // Whenever the natural width or natural height of the video changes
+    // (including, for example, because the selected video track was changed),
+    // if the element's readyState attribute is not HAVE_NOTHING, the user
+    // agent must queue a media element task given the media element to fire an
+    // event named resize at the media element.
+    this.eventManager_.listen(this.video_, 'resize', () => {
+      const element = /** @type {!HTMLVideoElement} */ (this.video_);
+      const width = element.videoWidth;
+      const height = element.videoHeight;
+      if (width && height) {
+        this.aspectRatio_ = width / height;
+      } else {
+        this.aspectRatio_ = null;
+      }
+    });
+
     /** @private {ResizeObserver} */
     this.resizeObserver_ = null;
     if ('ResizeObserver' in window) {
@@ -134,6 +154,11 @@ shaka.text.UITextDisplayer = class {
    * @export
    */
   destroy() {
+    // Return resolved promise if destroy() has been called.
+    if (!this.textContainer_) {
+      return Promise.resolve();
+    }
+
     // Remove the text container element from the UI.
     this.videoContainer_.removeChild(this.textContainer_);
     this.textContainer_ = null;
@@ -156,6 +181,8 @@ shaka.text.UITextDisplayer = class {
       this.resizeObserver_.disconnect();
       this.resizeObserver_ = null;
     }
+
+    return Promise.resolve();
   }
 
 
@@ -400,6 +427,10 @@ shaka.text.UITextDisplayer = class {
    */
   getRegionElement_(cue) {
     const region = cue.region;
+    // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#caption-window-size
+    // if aspect ratio is 4/3, use that value, otherwise, use the 16:9 value
+    const lineWidthMultiple = this.aspectRatio_ === 4/3 ? 2.5 : 1.9;
+    const lineHeightMultiple = 5.33;
 
     const regionId = this.generateRegionId_(region);
     if (this.regionElements_.has(regionId)) {
@@ -417,11 +448,33 @@ shaka.text.UITextDisplayer = class {
     regionElement.id = 'shaka-text-region---' + regionId;
     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;
+
+    const linesUnit = shaka.text.CueRegion.units.LINES;
+    if (region.heightUnits === linesUnit && region.widthUnits === linesUnit) {
+      regionElement.style.height = region.height * lineHeightMultiple + '%';
+      regionElement.style.width = region.width * lineWidthMultiple + '%';
+    } else {
+      regionElement.style.height = region.height + heightUnit;
+      regionElement.style.width = region.width + widthUnit;
+    }
+
+    if (region.viewportAnchorUnits === linesUnit) {
+      // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-708
+      let top = region.viewportAnchorY / 75 * 100;
+      const windowWidth = this.aspectRatio_ === 4/3 ? 160 : 210;
+      let left = region.viewportAnchorX / windowWidth * 100;
+      // adjust top and left values based on the region anchor and window size
+      top -= region.regionAnchorY * region.height * lineHeightMultiple / 100;
+      left -= region.regionAnchorX * region.width * lineWidthMultiple / 100;
+      regionElement.style.top = top + '%';
+      regionElement.style.left = left + '%';
+    } else {
+      regionElement.style.top = region.viewportAnchorY -
+        region.regionAnchorY * region.height / 100 + viewportAnchorUnit;
+      regionElement.style.left = region.viewportAnchorX -
+        region.regionAnchorX * region.width / 100 + viewportAnchorUnit;
+    }
 
     regionElement.style.display = 'flex';
     regionElement.style.flexDirection = 'column';
@@ -600,6 +653,10 @@ shaka.text.UITextDisplayer = class {
           // Only do this for the text itself.
           elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
         }
+        const fontFamily = inherit((c) => c.fontFamily);
+        if (fontFamily) {
+          elem.style.fontFamily = fontFamily;
+        }
       }
       if (text) {
         elem.textContent = text;
@@ -653,37 +710,46 @@ shaka.text.UITextDisplayer = class {
     //   (for vertical growing left) is aligned at the line.
     // TODO: Implement line alignment with line number.
     // TODO: Implement lineAlignment of 'CENTER'.
-    if (cue.line != null) {
+    let line = cue.line;
+    if (line != null) {
       let lineInterpretation = cue.lineInterpretation;
       // HACK: the current implementation of UITextDisplayer only handled
-      // PERCENTAGE, as cue.line=0 is zero, we can interpret it as percentage
-      // safely.
-      if (cue.line == 0 &&
-          lineInterpretation == Cue.lineInterpretation.LINE_NUMBER) {
+      // PERCENTAGE, so we need convert LINE_NUMBER to PERCENTAGE
+      if (lineInterpretation == Cue.lineInterpretation.LINE_NUMBER) {
         lineInterpretation = Cue.lineInterpretation.PERCENTAGE;
+        let maxLines = 16;
+        // The maximum number of lines is different if it is a vertical video.
+        if (this.aspectRatio_ && this.aspectRatio_ < 1) {
+          maxLines = 32;
+        }
+        if (line < 0) {
+          line = 100 + line / maxLines * 100;
+        } else {
+          line = line / maxLines * 100;
+        }
       }
       if (lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
         style.position = 'absolute';
         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
           style.width = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
-            style.top = cue.line + '%';
+            style.top = line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.bottom = (100 - cue.line) + '%';
+            style.bottom = (100 - line) + '%';
           }
         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
           style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
-            style.left = cue.line + '%';
+            style.left = line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.right = (100 - cue.line) + '%';
+            style.right = (100 - line) + '%';
           }
         } else {
           style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
-            style.right = cue.line + '%';
+            style.right = line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.left = (100 - cue.line) + '%';
+            style.left = (100 - line) + '%';
           }
         }
       }

package/lib/text/vtt_text_parser.js

@@ -433,6 +433,11 @@ shaka.text.VttTextParser = class {
    */
   static parseCueStyles(payload, rootCue, styles) {
     const VttTextParser = shaka.text.VttTextParser;
+    // Optimization for unstyled payloads.
+    if (!payload.includes('<')) {
+      rootCue.payload = VttTextParser.htmlUnescape_(payload);
+      return;
+    }
     if (styles.size === 0) {
       VttTextParser.addDefaultTextColor_(styles);
     }
@@ -688,6 +693,14 @@ shaka.text.VttTextParser = class {
   static generateCueFromElement_(element, rootCue, cues, styles) {
     const VttTextParser = shaka.text.VttTextParser;
     const nestedCue = rootCue.clone();
+    // We don't want propagate some properties.
+    nestedCue.nestedCues = [];
+    nestedCue.payload = '';
+    // We don't want propagate some position settings
+    nestedCue.line = null;
+    nestedCue.region = new shaka.text.CueRegion();
+    nestedCue.position = null;
+    nestedCue.size = 0;
     if (element.nodeType === Node.ELEMENT_NODE && element.nodeName) {
       const bold = shaka.text.Cue.fontWeight.BOLD;
       const italic = shaka.text.Cue.fontStyle.ITALIC;

package/lib/util/buffer_utils.js

@@ -110,6 +110,23 @@ shaka.util.BufferUtils = class {
     return shaka.util.BufferUtils.view_(data, offset, length, Uint8Array);
   }
 
+  /**
+   * Creates a new Uint16Array view on the same buffer.  This clamps the values
+   * to be within the same view (i.e. you can't use this to move past the end
+   * of the view, even if the underlying buffer is larger).  However, you can
+   * pass a negative offset to access the data before the view.
+   *
+   * @param {BufferSource} data
+   * @param {number=} offset The offset from the beginning of this data's view
+   *   to start the new view at.
+   * @param {number=} length The byte length of the new view.
+   * @return {!Uint16Array}
+   * @export
+   */
+  static toUint16(data, offset = 0, length = Infinity) {
+    return shaka.util.BufferUtils.view_(data, offset, length, Uint16Array);
+  }
+
   /**
    * Creates a DataView over the given buffer.
    *
@@ -135,15 +152,20 @@ shaka.util.BufferUtils = class {
    */
   static view_(data, offset, length, Type) {
     const buffer = shaka.util.BufferUtils.unsafeGetArrayBuffer_(data);
+    let bytesPerElement = 1;
+    if ('BYTES_PER_ELEMENT' in Type) {
+      bytesPerElement = Type.BYTES_PER_ELEMENT;
+    }
     // Absolute end of the |data| view within |buffer|.
     /** @suppress {strictMissingProperties} */
-    const dataEnd = (data.byteOffset || 0) + data.byteLength;
+    const dataEnd = ((data.byteOffset || 0) + data.byteLength) /
+      bytesPerElement;
     // Absolute start of the result within |buffer|.
     /** @suppress {strictMissingProperties} */
-    const rawStart = (data.byteOffset || 0) + offset;
-    const start = Math.max(0, Math.min(rawStart, dataEnd));
+    const rawStart = ((data.byteOffset || 0) + offset) / bytesPerElement;
+    const start = Math.floor(Math.max(0, Math.min(rawStart, dataEnd)));
     // Absolute end of the result within |buffer|.
-    const end = Math.min(start + Math.max(length, 0), dataEnd);
+    const end = Math.floor(Math.min(start + Math.max(length, 0), dataEnd));
     return new Type(buffer, start, end - start);
   }
 };

package/lib/util/cmcd_manager.js

@@ -331,12 +331,27 @@ shaka.util.CmcdManager = class {
    * @private
    */
   getObjectTypeFromMimeType_(mimeType) {
-    switch (mimeType) {
+    switch (mimeType.toLowerCase()) {
+      case 'audio/mp4':
+      case 'audio/webm':
+      case 'audio/ogg':
+      case 'audio/mpeg':
+      case 'audio/aac':
+      case 'audio/flac':
+      case 'audio/wav':
+        return shaka.util.CmcdManager.ObjectType.AUDIO;
+
       case 'video/webm':
       case 'video/mp4':
+      case 'video/mpeg':
+      case 'video/mp2t':
         return shaka.util.CmcdManager.ObjectType.MUXED;
 
       case 'application/x-mpegurl':
+      case 'application/vnd.apple.mpegurl':
+      case 'application/dash+xml':
+      case 'video/vnd.mpeg.dash.mpd':
+      case 'application/vnd.ms-sstr+xml':
         return shaka.util.CmcdManager.ObjectType.MANIFEST;
 
       default:

package/lib/util/fairplay_utils.js

@@ -192,7 +192,7 @@ shaka.util.FairPlayUtils = class {
     const stringToArray = (string) => {
       // 2 bytes for each char
       const buffer = new ArrayBuffer(string.length * 2);
-      const array = new Uint16Array(buffer);
+      const array = shaka.util.BufferUtils.toUint16(buffer);
       for (let i = 0, strLen = string.length; i < strLen; i++) {
         array[i] = string.charCodeAt(i);
       }

package/lib/util/manifest_parser_utils.js

@@ -8,7 +8,6 @@ goog.provide('shaka.util.ManifestParserUtils');
 
 goog.require('goog.Uri');
 goog.require('shaka.util.Error');
-goog.require('shaka.util.Functional');
 
 
 /**
@@ -24,18 +23,29 @@ shaka.util.ManifestParserUtils = class {
    * @return {!Array.<string>}
    */
   static resolveUris(baseUris, relativeUris) {
-    const Functional = shaka.util.Functional;
     if (relativeUris.length == 0) {
       return baseUris;
     }
 
+    if (baseUris.length == 1 && relativeUris.length == 1) {
+      const baseUri = new goog.Uri(baseUris[0]);
+      const relativeUri = new goog.Uri(relativeUris[0]);
+      return [baseUri.resolve(relativeUri).toString()];
+    }
+
     const relativeAsGoog = relativeUris.map((uri) => new goog.Uri(uri));
-    // Resolve each URI relative to each base URI, creating an Array of Arrays.
-    // Then flatten the Arrays into a single Array.
-    return baseUris.map((uri) => new goog.Uri(uri))
-        .map((base) => relativeAsGoog.map((i) => base.resolve(i)))
-        .reduce(Functional.collapseArrays, [])
-        .map((uri) => uri.toString());
+
+    // For each base URI, this code resolves it with every relative URI.
+    // The result is a single array containing all the resolved URIs.
+    const resolvedUris = [];
+    for (const baseStr of baseUris) {
+      const base = new goog.Uri(baseStr);
+      for (const relative of relativeAsGoog) {
+        resolvedUris.push(base.resolve(relative).toString());
+      }
+    }
+
+    return resolvedUris;
   }
 
 
@@ -166,6 +176,8 @@ shaka.util.ManifestParserUtils.VIDEO_CODEC_REGEXPS_ = [
   /^avc/,
   /^hev/,
   /^hvc/,
+  /^vvc/,
+  /^vvi/,
   /^vp0?[89]/,
   /^av01/,
   /^dvh/,

package/lib/util/object_utils.js

@@ -19,7 +19,7 @@ shaka.util.ObjectUtils = class {
    * @return {T}
    */
   static cloneObject(arg) {
-    const seenObjects = new Set();
+    const seenObjects = new WeakSet();
     // This recursively clones the value |val|, using the captured variable
     // |seenObjects| to track the objects we have already cloned.
     /** @suppress {strictMissingProperties} */

package/lib/util/periods.js

@@ -90,6 +90,37 @@ shaka.util.PeriodCombiner = class {
     return this.imageStreams_;
   }
 
+  /**
+    * Returns an object that contains arrays of streams by type
+    * @param {!Array.<shaka.util.PeriodCombiner.Period>} periods
+    * @return {{
+    *  audioStreamsPerPeriod: !Array.<!Array.<shaka.extern.Stream>>,
+    *  videoStreamsPerPeriod: !Array.<!Array.<shaka.extern.Stream>>,
+    *  textStreamsPerPeriod: !Array.<!Array.<shaka.extern.Stream>>,
+    *  imageStreamsPerPeriod: !Array.<!Array.<shaka.extern.Stream>>
+    * }}
+   * @private
+  */
+  getStreamsPerPeriod_(periods) {
+    const audioStreamsPerPeriod = [];
+    const videoStreamsPerPeriod = [];
+    const textStreamsPerPeriod = [];
+    const imageStreamsPerPeriod = [];
+
+    for (const period of periods) {
+      audioStreamsPerPeriod.push(period.audioStreams);
+      videoStreamsPerPeriod.push(period.videoStreams);
+      textStreamsPerPeriod.push(period.textStreams);
+      imageStreamsPerPeriod.push(period.imageStreams);
+    }
+    return {
+      audioStreamsPerPeriod,
+      videoStreamsPerPeriod,
+      textStreamsPerPeriod,
+      imageStreamsPerPeriod,
+    };
+  }
+
   /**
    * @param {!Array.<shaka.util.PeriodCombiner.Period>} periods
    * @param {boolean} isDynamic
@@ -136,14 +167,12 @@ shaka.util.PeriodCombiner = class {
         return;
       }
 
-      const audioStreamsPerPeriod = periods.map(
-          (period) => period.audioStreams);
-      const videoStreamsPerPeriod = periods.map(
-          (period) => period.videoStreams);
-      const textStreamsPerPeriod = periods.map(
-          (period) => period.textStreams);
-      const imageStreamsPerPeriod = periods.map(
-          (period) => period.imageStreams);
+      const {
+        audioStreamsPerPeriod,
+        videoStreamsPerPeriod,
+        textStreamsPerPeriod,
+        imageStreamsPerPeriod,
+      } = this.getStreamsPerPeriod_(periods);
 
       // It's okay to have a period with no text or images, but our algorithm
       // fails on any period without matching streams.  So we add dummy streams
@@ -159,33 +188,32 @@ shaka.util.PeriodCombiner = class {
             ContentType.IMAGE));
       }
 
-      await shaka.util.PeriodCombiner.combine_(
-          this.audioStreams_,
-          audioStreamsPerPeriod,
-          firstNewPeriodIndex,
-          shaka.util.PeriodCombiner.cloneStream_,
-          shaka.util.PeriodCombiner.concatenateStreams_);
-
-      await shaka.util.PeriodCombiner.combine_(
-          this.videoStreams_,
-          videoStreamsPerPeriod,
-          firstNewPeriodIndex,
-          shaka.util.PeriodCombiner.cloneStream_,
-          shaka.util.PeriodCombiner.concatenateStreams_);
-
-      await shaka.util.PeriodCombiner.combine_(
-          this.textStreams_,
-          textStreamsPerPeriod,
-          firstNewPeriodIndex,
-          shaka.util.PeriodCombiner.cloneStream_,
-          shaka.util.PeriodCombiner.concatenateStreams_);
-
-      await shaka.util.PeriodCombiner.combine_(
-          this.imageStreams_,
-          imageStreamsPerPeriod,
-          firstNewPeriodIndex,
-          shaka.util.PeriodCombiner.cloneStream_,
-          shaka.util.PeriodCombiner.concatenateStreams_);
+      await Promise.all([
+        shaka.util.PeriodCombiner.combine_(
+            this.audioStreams_,
+            audioStreamsPerPeriod,
+            firstNewPeriodIndex,
+            shaka.util.PeriodCombiner.cloneStream_,
+            shaka.util.PeriodCombiner.concatenateStreams_),
+        shaka.util.PeriodCombiner.combine_(
+            this.videoStreams_,
+            videoStreamsPerPeriod,
+            firstNewPeriodIndex,
+            shaka.util.PeriodCombiner.cloneStream_,
+            shaka.util.PeriodCombiner.concatenateStreams_),
+        shaka.util.PeriodCombiner.combine_(
+            this.textStreams_,
+            textStreamsPerPeriod,
+            firstNewPeriodIndex,
+            shaka.util.PeriodCombiner.cloneStream_,
+            shaka.util.PeriodCombiner.concatenateStreams_),
+        shaka.util.PeriodCombiner.combine_(
+            this.imageStreams_,
+            imageStreamsPerPeriod,
+            firstNewPeriodIndex,
+            shaka.util.PeriodCombiner.cloneStream_,
+            shaka.util.PeriodCombiner.concatenateStreams_),
+      ]);
     }
 
     // Create variants for all audio/video combinations.
@@ -1102,6 +1130,11 @@ shaka.util.PeriodCombiner = class {
       return true;
     }
 
+    // Forced subtitles should be treated as unique streams
+    if (outputStream.forced !== candidate.forced) {
+      return false;
+    }
+
     const languageRelatedness = LanguageUtils.relatedness(
         outputStream.language, candidate.language);
 
@@ -1180,7 +1213,18 @@ shaka.util.PeriodCombiner = class {
       return false;
     }
 
-    // If language-based differences haven't decided this, look at roles.  If
+    // If language-based differences haven't decided this, look at labels.
+    // If available options differ, look does any matches with output stream.
+    if (best.label !== candidate.label) {
+      if (outputStream.label === best.label) {
+        return false;
+      }
+      if (outputStream.label === candidate.label) {
+        return true;
+      }
+    }
+
+    // If label-based differences haven't decided this, look at roles.  If
     // the candidate has more roles in common with the output, upgrade to the
     // candidate.
     if (outputStream.roles.length) {
@@ -1383,6 +1427,17 @@ shaka.util.PeriodCombiner = class {
       return false;
     }
 
+    // If language-based differences haven't decided this, look at labels.
+    // If available options differ, look does any matches with output stream.
+    if (best.label !== candidate.label) {
+      if (outputStream.label === best.label) {
+        return false;
+      }
+      if (outputStream.label === candidate.label) {
+        return true;
+      }
+    }
+
     // If the candidate has more roles in common with the output, upgrade to the
     // candidate.
     if (outputStream.roles.length) {