shaka-player 4.11.2 → 4.11.4

package/externs/shaka/player.js

@@ -1532,6 +1532,7 @@ shaka.extern.LiveSyncConfiguration;
  *   alwaysStreamText: boolean,
  *   startAtSegmentBoundary: boolean,
  *   gapDetectionThreshold: number,
+ *   gapPadding: number,
  *   gapJumpTimerTime: number,
  *   durationBackoff: number,
  *   safeSeekOffset: number,
@@ -1625,6 +1626,13 @@ shaka.extern.LiveSyncConfiguration;
  *   jump.
  *   <br>
  *   Defaults to <code>0.5</code>.
+ * @property {number} gapPadding
+ *   Padding added only for Xbox, Legacy Edge and Tizen.
+ *   Based on our research (specific to Tizen), the gapPadding value must be
+ *   greater than your GOP length.
+ *   It’s crucial to verify this value according to your actual stream.
+ *   <br>
+ *   Defaults to <code>0.01</code> for Xbox and Legacy Edge, Tizen at 2.
  * @property {number} gapJumpTimerTime
  *   The polling time in seconds to check for gaps in the media.
  *   <br>
@@ -2227,7 +2235,8 @@ shaka.extern.LcevcConfiguration;
  *   <br>
  *   Defaults to <code>true</code>.
  * @property {number} numberOfParallelDownloads
- *   Number of parallel downloads.
+ *   Number of parallel downloads. If the value is 0, downloads will be
+ *   sequential for each stream.
  *   Note: normally browsers limit to 5 request in parallel, so putting a
  *   number higher than this will not help it download faster.
  *   <br>

package/lib/ads/interstitial_ad_manager.js

@@ -89,13 +89,23 @@ shaka.ads.InterstitialAdManager = class {
     /** @private {?number} */
     this.lastTime_ = null;
 
+    /** @private {?shaka.extern.AdInterstitial} */
+    this.lastPlayedAd_ = null;
+
     this.eventManager_.listen(this.baseVideo_, 'timeupdate', () => {
       if (this.playingAd_) {
         return;
       }
       const needPreRoll = this.lastTime_ == null || this.lastTime_ == 0;
       this.lastTime_ = this.baseVideo_.currentTime;
-      const currentInterstitial = this.getCurrentInterstitial_(needPreRoll);
+      // Remove last played add when the new time is before to the ad time.
+      if (this.lastPlayedAd_ &&
+          !this.lastPlayedAd_.pre && !this.lastPlayedAd_.post &&
+          this.lastTime_ < this.lastPlayedAd_.startTime) {
+        this.lastPlayedAd_ = null;
+      }
+      const currentInterstitial = this.getCurrentInterstitial_(
+          needPreRoll, /* numberToSkip= */ 0, this.lastPlayedAd_);
       if (currentInterstitial) {
         this.setupAd_(currentInterstitial, /* sequenceLength= */ 1,
             /* adPosition= */ 1, /* initialTime= */ Date.now());
@@ -187,6 +197,7 @@ shaka.ads.InterstitialAdManager = class {
     this.player_.detach();
     this.playingAd_ = false;
     this.lastTime_ = null;
+    this.lastPlayedAd_ = null;
   }
 
   /** @override */
@@ -374,11 +385,12 @@ shaka.ads.InterstitialAdManager = class {
 
   /**
    * @param {boolean} needPreRoll
-   * @param {number=} numberToSkip
+   * @param {number} numberToSkip
+   * @param {?shaka.extern.AdInterstitial=} lastPlayedAd
    * @return {?shaka.extern.AdInterstitial}
    * @private
    */
-  getCurrentInterstitial_(needPreRoll, numberToSkip = 0) {
+  getCurrentInterstitial_(needPreRoll, numberToSkip, lastPlayedAd) {
     let skipped = 0;
     let currentInterstitial = null;
     if (this.interstitials_.size && this.lastTime_ != null) {
@@ -398,8 +410,16 @@ shaka.ads.InterstitialAdManager = class {
         } else if (!interstitial.pre && !interstitial.post) {
           const difference =
               this.lastTime_ - roundDecimals(interstitial.startTime);
-          isValid = difference > 0 &&
-              (difference <= 1 || !interstitial.canJump);
+          if (difference > 0 &&
+              (difference <= 1 || !interstitial.canJump)) {
+            if (difference > 1 && lastPlayedAd &&
+                !lastPlayedAd.pre && !lastPlayedAd.post &&
+                lastPlayedAd.startTime >= interstitial.startTime) {
+              isValid = false;
+            } else {
+              isValid = true;
+            }
+          }
         }
         if (isValid) {
           if (skipped == numberToSkip) {
@@ -426,6 +446,8 @@ shaka.ads.InterstitialAdManager = class {
       oncePlayed = 0) {
     goog.asserts.assert(this.video_, 'Must have video');
 
+    this.lastPlayedAd_ = interstitial;
+
     const startTime = Date.now();
 
     if (!this.video_.parentElement && this.adContainer_) {

package/lib/dash/dash_parser.js

@@ -192,6 +192,9 @@ shaka.dash.DashParser = class {
 
     /** @private {function():boolean} */
     this.isPreloadFn_ = () => false;
+
+    /** @private {?Array.<string>} */
+    this.lastCalculatedBaseUris_ = [];
   }
 
   /**
@@ -602,7 +605,6 @@ shaka.dash.DashParser = class {
     }
 
     const uriObjs = TXml.findChildren(mpd, 'BaseURL');
-    let calculatedBaseUris;
     let someLocationValid = false;
     if (this.contentSteeringManager_) {
       for (const uriObj of uriObjs) {
@@ -615,9 +617,10 @@ shaka.dash.DashParser = class {
         }
       }
     }
+    this.lastCalculatedBaseUris_ = null;
     if (!someLocationValid || !this.contentSteeringManager_) {
       const uris = uriObjs.map(TXml.getContents);
-      calculatedBaseUris = shaka.util.ManifestParserUtils.resolveUris(
+      this.lastCalculatedBaseUris_ = shaka.util.ManifestParserUtils.resolveUris(
           manifestBaseUris, uris);
     }
 
@@ -625,8 +628,8 @@ shaka.dash.DashParser = class {
       if (this.contentSteeringManager_ && someLocationValid) {
         return this.contentSteeringManager_.getLocations('BaseURL');
       }
-      if (calculatedBaseUris) {
-        return calculatedBaseUris;
+      if (this.lastCalculatedBaseUris_) {
+        return this.lastCalculatedBaseUris_;
       }
       return [];
     };
@@ -1492,14 +1495,14 @@ shaka.dash.DashParser = class {
    */
   cleanStreamMap_() {
     const oldPeriodIds = Object.keys(this.indexStreamMap_);
-    if (oldPeriodIds.length === this.lastManifestUpdatePeriodIds_.length) {
-      return;
-    }
     const diffPeriodsIDs = oldPeriodIds.filter((pId) => {
       return !this.lastManifestUpdatePeriodIds_.includes(pId);
     });
     for (const pId of diffPeriodsIDs) {
       for (const contextId of this.indexStreamMap_[pId]) {
+        if (this.periodCombiner_) {
+          this.periodCombiner_.deleteStream(this.streamMap_[contextId], pId);
+        }
         delete this.streamMap_[contextId];
       }
       delete this.indexStreamMap_[pId];

package/lib/dash/mpd_utils.js

@@ -481,9 +481,6 @@ shaka.dash.MpdUtils = class {
           // Move the children of the loaded xml into the current element.
           while (rootElem.children.length) {
             const child = rootElem.children.shift();
-            if (TXml.isNode(child)) {
-              child.parent = element;
-            }
             element.children.push(child);
           }
 

package/lib/dash/segment_template.js

@@ -86,10 +86,19 @@ shaka.dash.SegmentTemplate = class {
       };
     } else if (info.segmentDuration) {
       if (!isUpdate && context.adaptationSet.contentType !== 'image') {
+        const periodStart = context.periodInfo.start;
+        const periodId = context.period.id;
+        const initialPeriodDuration = context.periodInfo.duration;
+        const periodDuration =
+          (periodId != null && periodDurationMap[periodId]) ||
+          initialPeriodDuration;
+        const periodEnd = periodDuration ?
+          (periodStart + periodDuration) : Infinity;
+
         context.presentationTimeline.notifyMaxSegmentDuration(
             info.segmentDuration);
-        context.presentationTimeline.notifyMinSegmentStartTime(
-            context.periodInfo.start);
+        context.presentationTimeline.notifyPeriodDuration(
+            periodStart, periodEnd);
       }
 
       return {

package/lib/media/gap_jumping_controller.js

@@ -223,8 +223,10 @@ shaka.media.GapJumpingController = class {
     // often rounds value we want to set as currentTime and we are not able
     // to jump over the gap.
     if (shaka.util.Platform.isLegacyEdge() ||
-        shaka.util.Platform.isXboxOne()) {
-      jumpTo = Math.ceil((jumpTo + 0.01) * 100) / 100;
+        shaka.util.Platform.isXboxOne() ||
+        shaka.util.Platform.isTizen()) {
+      const gapPadding = this.config_.gapPadding;
+      jumpTo = Math.ceil((jumpTo + gapPadding) * 100) / 100;
     }
     const seekEnd = this.timeline_.getSeekRangeEnd();
     if (jumpTo >= seekEnd) {

package/lib/media/presentation_timeline.js

@@ -331,6 +331,22 @@ shaka.media.PresentationTimeline = class {
   }
 
 
+  /**
+   * Gives PresentationTimeline an startTime and endTime of the period.
+   * This should be only set for Dash.
+   *
+   * @param {number} startTime
+   * @param {number} endTime
+   * @export
+   */
+  notifyPeriodDuration(startTime, endTime) {
+    this.notifyMinSegmentStartTime(startTime);
+    if (endTime != Infinity && !this.isLive()) {
+      this.maxSegmentEndTime_ = Math.max(this.maxSegmentEndTime_, endTime);
+    }
+  }
+
+
   /**
    * Gets the end time of the last available segment.
    *

package/lib/media/segment_index.js

@@ -834,10 +834,10 @@ shaka.media.MetaSegmentIndex = class extends shaka.media.SegmentIndex {
    * @export
    */
   evict(time) {
-    // evict() is only used internally by the DASH and HLS parser on
-    // SegmentIndexes, but never on MetaSegmentIndex.
-    goog.asserts.assert(
-        false, 'evict() should not be used in MetaSegmentIndex!');
+    for (const index of this.indexes_) {
+      index.evict(time);
+    }
+    this.evictEmpty();
   }
 
   /**

package/lib/media/streaming_engine.js

@@ -1519,9 +1519,11 @@ shaka.media.StreamingEngine = class {
           logPrefix, 'looking up segment from new stream endTime:', time);
 
       const reverse = this.playerInterface_.getPlaybackRate() < 0;
-      mediaState.segmentIterator =
-          mediaState.stream.segmentIndex.getIteratorForTime(
-              time, /* allowNonIndepedent= */ false, reverse);
+      if (mediaState.stream.segmentIndex) {
+        mediaState.segmentIterator =
+            mediaState.stream.segmentIndex.getIteratorForTime(
+                time, /* allowNonIndepedent= */ false, reverse);
+      }
       const ref = mediaState.segmentIterator &&
           mediaState.segmentIterator.next().value;
       if (ref == null) {
@@ -1545,18 +1547,22 @@ shaka.media.StreamingEngine = class {
       const reverse = this.playerInterface_.getPlaybackRate() < 0;
       let ref = null;
       if (inaccurateTolerance) {
-        mediaState.segmentIterator =
-            mediaState.stream.segmentIndex.getIteratorForTime(
-                lookupTime, /* allowNonIndepedent= */ false, reverse);
+        if (mediaState.stream.segmentIndex) {
+          mediaState.segmentIterator =
+              mediaState.stream.segmentIndex.getIteratorForTime(
+                  lookupTime, /* allowNonIndepedent= */ false, reverse);
+        }
         ref = mediaState.segmentIterator &&
             mediaState.segmentIterator.next().value;
       }
       if (!ref) {
         // If we can't find a valid segment with the drifted time, look for a
         // segment with the presentation time.
-        mediaState.segmentIterator =
-            mediaState.stream.segmentIndex.getIteratorForTime(
-                presentationTime, /* allowNonIndepedent= */ false, reverse);
+        if (mediaState.stream.segmentIndex) {
+          mediaState.segmentIterator =
+              mediaState.stream.segmentIndex.getIteratorForTime(
+                  presentationTime, /* allowNonIndepedent= */ false, reverse);
+        }
         ref = mediaState.segmentIterator &&
             mediaState.segmentIterator.next().value;
       }
@@ -2505,7 +2511,8 @@ shaka.media.StreamingEngine = class {
   async evict_(mediaState, presentationTime) {
     const segmentIndex = mediaState.stream.segmentIndex;
     if (segmentIndex instanceof shaka.media.MetaSegmentIndex) {
-      segmentIndex.evictEmpty();
+      segmentIndex.evict(
+          this.manifest_.presentationTimeline.getSeekRangeStart());
     }
 
     const logPrefix = shaka.media.StreamingEngine.logPrefix_(mediaState);

package/lib/net/networking_utils.js

@@ -103,4 +103,9 @@ shaka.net.NetworkingUtils.EXTENSIONS_TO_MIME_TYPES_ = {
   'lrc': 'application/x-subtitle-lrc',
   'ssa': 'text/x-ssa',
   'ass': 'text/x-ssa',
+  'jpg': 'image/jpeg',
+  'png': 'image/png',
+  'svg': 'image/svg+xml',
+  'webp': 'image/webp',
+  'avif': 'image/avif',
 };

package/lib/offline/storage.js

@@ -1346,7 +1346,7 @@ shaka.offline.Storage = class {
         manifest.presentationTimeline.getSegmentAvailabilityStart();
 
     const numberOfParallelDownloads = config.offline.numberOfParallelDownloads;
-    let groupId = 0;
+    let groupId = numberOfParallelDownloads === 0 ? stream.id : 0;
 
     shaka.offline.Storage.forEachSegment_(stream, startTime, (segment) => {
       const pendingSegmentRefId =
@@ -1398,7 +1398,9 @@ shaka.offline.Storage = class {
         codecs: segment.codecs,
       };
       streamDb.segments.push(segmentDB);
-      groupId = (groupId + 1) % numberOfParallelDownloads;
+      if (numberOfParallelDownloads !== 0) {
+        groupId = (groupId + 1) % numberOfParallelDownloads;
+      }
     });
 
     return streamDb;
@@ -1593,14 +1595,6 @@ shaka.offline.Storage = class {
     /** @type {!Set.<shaka.extern.Stream>} */
     const set = new Set();
 
-    for (const text of manifest.textStreams) {
-      set.add(text);
-    }
-
-    for (const image of manifest.imageStreams) {
-      set.add(image);
-    }
-
     for (const variant of manifest.variants) {
       if (variant.audio) {
         set.add(variant.audio);
@@ -1610,6 +1604,14 @@ shaka.offline.Storage = class {
       }
     }
 
+    for (const text of manifest.textStreams) {
+      set.add(text);
+    }
+
+    for (const image of manifest.imageStreams) {
+      set.add(image);
+    }
+
     return set;
   }
 

package/lib/player.js

@@ -5962,6 +5962,13 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       references.push(reference);
     }
 
+    let segmentMimeType = mimeType;
+    if (references.length) {
+      segmentMimeType = await shaka.net.NetworkingUtils.getMimeType(
+          references[0].getUris()[0],
+          this.networkingEngine_, this.config_.manifest.retryParameters);
+    }
+
     /** @type {shaka.extern.Stream} */
     const stream = {
       id: this.nextExternalStreamId_++,
@@ -5969,7 +5976,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       groupId: null,
       createSegmentIndex: () => Promise.resolve(),
       segmentIndex: new shaka.media.SegmentIndex(references),
-      mimeType: mimeType || '',
+      mimeType: segmentMimeType || '',
       codecs: '',
       kind: '',
       encrypted: false,
@@ -5993,7 +6000,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       external: true,
       fastSwitching: false,
       fullMimeTypes: new Set([shaka.util.MimeUtils.getFullType(
-          mimeType || '', '')]),
+          segmentMimeType || '', '')]),
     };
 
     if (this.loadMode_ == shaka.Player.LoadMode.SRC_EQUALS) {
@@ -7231,11 +7238,13 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       this.playhead_.notifyOfBufferingChange();
       // Skip the initial buffer gap
       const startTime = this.mediaSourceEngine_.bufferStart(contentType);
+      const ContentType = shaka.util.ManifestParserUtils.ContentType;
       if (
         !this.isLive() &&
         // If not paused then GapJumpingController will handle this gap.
         this.video_.paused &&
         startTime != null &&
+        contentType != ContentType.TEXT &&
         startTime > 0 &&
         this.playhead_.getTime() < startTime
       ) {
@@ -8062,8 +8071,8 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @define {string} A version number taken from git at compile time.
  * @export
  */
-// eslint-disable-next-line no-useless-concat
-shaka.Player.version = 'v4.11.2' + '-uncompiled';  // x-release-please-version
+// eslint-disable-next-line no-useless-concat, max-len
+shaka.Player.version = 'v4.11.4' + '-uncompiled';  // x-release-please-version
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/text/ttml_text_parser.js

@@ -65,7 +65,7 @@ shaka.text.TtmlTextParser = class {
       return cues;
     }
 
-    const tt = TXml.parseXmlString(str, 'tt');
+    const tt = TXml.parseXmlString(str, 'tt', /* includeParent= */ true);
     if (!tt) {
       throw new shaka.util.Error(
           shaka.util.Error.Severity.CRITICAL,

package/lib/util/periods.js

@@ -107,6 +107,56 @@ shaka.util.PeriodCombiner = class {
     return this.imageStreams_;
   }
 
+  /**
+   * Deletes a stream from matchedStreams because it is no longer needed
+   *
+   * @param {?shaka.extern.Stream} stream
+   * @param {string} periodId
+   *
+   * @export
+   */
+  deleteStream(stream, periodId) {
+    if (!stream) {
+      return;
+    }
+    const ContentType = shaka.util.ManifestParserUtils.ContentType;
+    if (stream.type == ContentType.AUDIO) {
+      for (const audioStream of this.audioStreams_) {
+        audioStream.matchedStreams = audioStream.matchedStreams.filter((s) => {
+          return s !== stream;
+        });
+      }
+    } else if (stream.type == ContentType.VIDEO) {
+      for (const videoStream of this.videoStreams_) {
+        videoStream.matchedStreams = videoStream.matchedStreams.filter((s) => {
+          return s !== stream;
+        });
+        if (videoStream.trickModeVideo) {
+          videoStream.trickModeVideo.matchedStreams =
+            videoStream.trickModeVideo.matchedStreams.filter((s) => {
+              return s !== stream;
+            });
+        }
+      }
+    } else if (stream.type == ContentType.TEXT) {
+      for (const textStream of this.textStreams_) {
+        textStream.matchedStreams = textStream.matchedStreams.filter((s) => {
+          return s !== stream;
+        });
+      }
+    } else if (stream.type == ContentType.IMAGE) {
+      for (const imageStream of this.imageStreams_) {
+        imageStream.matchedStreams = imageStream.matchedStreams.filter((s) => {
+          return s !== stream;
+        });
+      }
+    }
+    if (stream.segmentIndex) {
+      stream.closeSegmentIndex();
+    }
+    this.usedPeriodIds_.delete(periodId);
+  }
+
   /**
    * Returns an object that contains arrays of streams by type
    * @param {!Array<shaka.extern.Period>} periods
@@ -600,7 +650,8 @@ shaka.util.PeriodCombiner = class {
     const streams = outputStream.matchedStreams;
     goog.asserts.assert(streams, 'matched streams should be valid');
 
-    for (const stream of streams) {
+    for (let i = firstNewPeriodIndex; i < streams.length; i++) {
+      const stream = streams[i];
       operations.push(stream.createSegmentIndex());
       if (stream.trickModeVideo && !stream.trickModeVideo.segmentIndex) {
         operations.push(stream.trickModeVideo.createSegmentIndex());
@@ -783,7 +834,8 @@ shaka.util.PeriodCombiner = class {
     clone.segmentIndex = null;
     clone.emsgSchemeIdUris = [];
     clone.keyIds = new Set();
-    clone.closedCaptions = null;
+    clone.closedCaptions = stream.closedCaptions ?
+      new Map(stream.closedCaptions) : null;
     clone.trickModeVideo = null;
 
     return clone;
@@ -808,7 +860,8 @@ shaka.util.PeriodCombiner = class {
     clone.keyIds = new Set();
     clone.segments = [];
     clone.variantIds = [];
-    clone.closedCaptions = null;
+    clone.closedCaptions = streamDb.closedCaptions ?
+      new Map(streamDb.closedCaptions) : null;
 
     return clone;
   }

package/lib/util/player_configuration.js

@@ -206,6 +206,7 @@ shaka.util.PlayerConfiguration = class {
       alwaysStreamText: false,
       startAtSegmentBoundary: false,
       gapDetectionThreshold: 0.5,
+      gapPadding: 0.01,
       gapJumpTimerTime: 0.25 /* seconds */,
       durationBackoff: 1,
       // Offset by 5 seconds since Chromecast takes a few seconds to start
@@ -283,6 +284,10 @@ shaka.util.PlayerConfiguration = class {
       streaming.stallSkip = 0;
     }
 
+    if (shaka.util.Platform.isTizen()) {
+      streaming.gapPadding = 2;
+    }
+
     const offline = {
       // We need to set this to a throw-away implementation for now as our
       // default implementation will need to reference other fields in the

package/lib/util/tXml.js

@@ -44,11 +44,13 @@ shaka.util.TXml = class {
    * Parse some data
    * @param {BufferSource} data
    * @param {string=} expectedRootElemName
+   * @param {boolean=} includeParent
    * @return {shaka.extern.xml.Node | null}
    */
-  static parseXml(data, expectedRootElemName) {
+  static parseXml(data, expectedRootElemName, includeParent = false) {
     const xmlString = shaka.util.StringUtils.fromBytesAutoDetect(data);
-    return shaka.util.TXml.parseXmlString(xmlString, expectedRootElemName);
+    return shaka.util.TXml.parseXmlString(
+        xmlString, expectedRootElemName, includeParent);
   }
 
   /**
@@ -57,8 +59,9 @@ shaka.util.TXml = class {
    * @param {string=} expectedRootElemName
    * @return {shaka.extern.xml.Node | null}
    */
-  static parseXmlString(xmlString, expectedRootElemName) {
-    const result = shaka.util.TXml.parse(xmlString);
+  static parseXmlString(xmlString, expectedRootElemName,
+      includeParent = false) {
+    const result = shaka.util.TXml.parse(xmlString, includeParent);
     if (!expectedRootElemName && result.length) {
       return result[0];
     }
@@ -110,9 +113,10 @@ shaka.util.TXml = class {
    * parseXML / html into a DOM Object,
    * with no validation and some failure tolerance
    * @param {string} S your XML to parse
+   * @param {boolean} includeParent
    * @return {Array.<shaka.extern.xml.Node>}
    */
-  static parse(S) {
+  static parse(S, includeParent) {
     let pos = 0;
 
     const openBracket = '<';
@@ -287,9 +291,11 @@ shaka.util.TXml = class {
                 children,
                 parent: null,
               };
-              for (let i = 0; i < children.length; i++) {
-                if (typeof children[i] !== 'string') {
-                  children[i].parent = node;
+              if (includeParent) {
+                for (let i = 0; i < children.length; i++) {
+                  if (typeof children[i] !== 'string') {
+                    children[i].parent = node;
+                  }
                 }
               }
               return node;
@@ -331,7 +337,9 @@ shaka.util.TXml = class {
       for (let i = 0; i < childrenLength; i++) {
         const childrenValue = children[i];
         if (typeof childrenValue !== 'string') {
-          childrenValue.parent = node;
+          if (includeParent) {
+            childrenValue.parent = node;
+          }
         } else if (i == childrenLength - 1 && childrenValue == '\n') {
           children.pop();
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shaka-player",
   "description": "DASH/EME video player library",
-  "version": "4.11.2",
+  "version": "4.11.4",
   "homepage": "https://github.com/shaka-project/shaka-player",
   "author": "Google",
   "maintainers": [

package/ui/controls.js

@@ -263,6 +263,16 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.castProxy_ = null;
     }
 
+    if (this.spinnerContainer_) {
+      this.videoContainer_.removeChild(this.spinnerContainer_);
+      this.spinnerContainer_ = null;
+    }
+
+    if (this.clientAdContainer_) {
+      this.videoContainer_.removeChild(this.clientAdContainer_);
+      this.clientAdContainer_ = null;
+    }
+
     if (this.localPlayer_) {
       await this.localPlayer_.destroy();
       this.localPlayer_ = null;
@@ -524,6 +534,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    * @export
    */
   getClientSideAdContainer() {
+    goog.asserts.assert(
+        this.clientAdContainer_, 'No client ad container after destruction!');
     return this.clientAdContainer_;
   }
 
@@ -982,7 +994,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
   /** @private */
   addBufferingSpinner_() {
-    /** @private {!HTMLElement} */
+    /** @private {HTMLElement} */
     this.spinnerContainer_ = shaka.util.Dom.createHTMLElement('div');
     this.spinnerContainer_.classList.add('shaka-spinner-container');
     this.videoContainer_.appendChild(this.spinnerContainer_);
@@ -1139,7 +1151,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    * @private
    */
   addClientAdContainer_() {
-    /** @private {!HTMLElement} */
+    /** @private {HTMLElement} */
     this.clientAdContainer_ = shaka.util.Dom.createHTMLElement('div');
     this.clientAdContainer_.classList.add('shaka-client-side-ad-container');
     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);