shaka-player 4.12.8 → 4.13.0

package/lib/ads/interstitial_ad_manager.js

@@ -10,10 +10,12 @@ goog.provide('shaka.ads.InterstitialAdManager');
 goog.require('goog.asserts');
 goog.require('shaka.Player');
 goog.require('shaka.ads.InterstitialAd');
+goog.require('shaka.ads.InterstitialStaticAd');
 goog.require('shaka.ads.Utils');
 goog.require('shaka.log');
 goog.require('shaka.media.PreloadManager');
 goog.require('shaka.net.NetworkingEngine');
+goog.require('shaka.net.NetworkingUtils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.Error');
 goog.require('shaka.util.EventManager');
@@ -63,14 +65,14 @@ shaka.ads.InterstitialAdManager = class {
     /** @private {function(!shaka.util.FakeEvent)} */
     this.onEvent_ = onEvent;
 
-    /** @private {!Set.<string>} */
+    /** @private {!Set<string>} */
     this.interstitialIds_ = new Set();
 
-    /** @private {!Set.<shaka.extern.AdInterstitial>} */
+    /** @private {!Set<shaka.extern.AdInterstitial>} */
     this.interstitials_ = new Set();
 
     /**
-     * @private {!Map.<shaka.extern.AdInterstitial,
+     * @private {!Map<shaka.extern.AdInterstitial,
      *                 Promise<?shaka.media.PreloadManager>>}
      */
     this.preloadManagerInterstitials_ = new Map();
@@ -95,6 +97,12 @@ shaka.ads.InterstitialAdManager = class {
     /** @private {?shaka.extern.AdInterstitial} */
     this.lastPlayedAd_ = null;
 
+    /** @private {?shaka.util.Timer} */
+    this.playoutLimitTimer_ = null;
+
+    /** @private {?function()} */
+    this.lastOnSkip_ = null;
+
     this.eventManager_.listen(this.baseVideo_, 'timeupdate', () => {
       if (this.playingAd_ || this.lastTime_ ||
           this.basePlayer_.isRemotePlayback()) {
@@ -178,11 +186,14 @@ shaka.ads.InterstitialAdManager = class {
               this.interstitialIds_.delete(interstitialId);
             }
             this.interstitials_.delete(interstitial);
-            cuepointsChanged = true;
+            if (!interstitial.overlay) {
+              cuepointsChanged = true;
+            }
           } else {
             const difference = interstitial.startTime - this.lastTime_;
             if (difference > 0 && difference <= 10) {
-              if (!this.preloadManagerInterstitials_.has(interstitial)) {
+              if (!this.preloadManagerInterstitials_.has(interstitial) &&
+                  this.isPreloadAllowed_(interstitial)) {
                 this.preloadManagerInterstitials_.set(
                     interstitial, this.player_.preload(
                         interstitial.uri,
@@ -259,6 +270,16 @@ shaka.ads.InterstitialAdManager = class {
     this.playingAd_ = false;
     this.lastTime_ = null;
     this.lastPlayedAd_ = null;
+    this.usingBaseVideo_ = true;
+    this.video_ = this.baseVideo_;
+    this.adVideo_ = null;
+    if (this.adContainer_) {
+      shaka.util.Dom.removeAllChildren(this.adContainer_);
+    }
+    if (this.playoutLimitTimer_) {
+      this.playoutLimitTimer_.stop();
+      this.playoutLimitTimer_ = null;
+    }
   }
 
   /** @override */
@@ -270,9 +291,6 @@ shaka.ads.InterstitialAdManager = class {
     if (this.adEventManager_) {
       this.adEventManager_.release();
     }
-    if (this.adContainer_) {
-      shaka.util.Dom.removeAllChildren(this.adContainer_);
-    }
     if (this.timeUpdateTimer_) {
       this.timeUpdateTimer_.stop();
       this.timeUpdateTimer_ = null;
@@ -284,6 +302,12 @@ shaka.ads.InterstitialAdManager = class {
     this.player_.destroy();
   }
 
+  /**
+   * @return {shaka.Player}
+   */
+  getPlayer() {
+    return this.player_;
+  }
 
   /**
    * @param {shaka.extern.HLSInterstitial} hlsInterstitial
@@ -303,14 +327,11 @@ shaka.ads.InterstitialAdManager = class {
    */
   addRegion(region) {
     let alternativeMPDUri;
-    let alternativeMPDmode;
     for (const node of region.eventNode.children) {
       if (node.tagName == 'AlternativeMPD') {
         const uri = node.attributes['uri'];
-        const mode = node.attributes['mode'];
         if (uri) {
           alternativeMPDUri = uri;
-          alternativeMPDmode = mode;
           break;
         }
       }
@@ -319,8 +340,10 @@ shaka.ads.InterstitialAdManager = class {
       shaka.log.alwaysWarn('Unsupported MPD alternate', region);
       return;
     }
-    const isReplace = alternativeMPDmode == 'replace';
-    const isInsert = alternativeMPDmode == 'insert';
+    const isReplace =
+        region.schemeIdUri == 'urn:mpeg:dash:event:alternativeMPD:replace:2025';
+    const isInsert =
+        region.schemeIdUri == 'urn:mpeg:dash:event:alternativeMPD:insert:2025';
     if (!isReplace && !isInsert) {
       shaka.log.warning('Unsupported MPD alternate', region);
       return;
@@ -329,6 +352,7 @@ shaka.ads.InterstitialAdManager = class {
     /** @type {!shaka.extern.AdInterstitial} */
     const interstitial = {
       id: region.id,
+      groupId: null,
       startTime: region.startTime,
       endTime: region.endTime,
       uri: alternativeMPDUri,
@@ -343,6 +367,114 @@ shaka.ads.InterstitialAdManager = class {
       pre: false,
       post: false,
       timelineRange: isReplace && !isInsert,
+      loop: false,
+      overlay: null,
+    };
+    this.addInterstitials([interstitial]);
+  }
+
+  /**
+   * @param {shaka.extern.TimelineRegionInfo} region
+   */
+  addOverlayRegion(region) {
+    const TXml = shaka.util.TXml;
+
+    goog.asserts.assert(region.eventNode, 'Need a region eventNode');
+    const overlayEvent = TXml.findChild(region.eventNode, 'OverlayEvent');
+    const uri = overlayEvent.attributes['uri'];
+    const mimeType = overlayEvent.attributes['mimeType'];
+    const loop = overlayEvent.attributes['loop'] == 'true';
+    if (!uri || !mimeType) {
+      shaka.log.warning('Unsupported OverlayEvent', region);
+      return;
+    }
+
+    /** @type {!shaka.extern.AdInterstitialOverlay} */
+    let overlay = {
+      viewport: {
+        x: 1920,
+        y: 1080,
+      },
+      topLeft: {
+        x: 0,
+        y: 0,
+      },
+      size: {
+        x: 1920,
+        y: 1080,
+      },
+    };
+
+    const viewport = TXml.findChild(overlayEvent, 'Viewport');
+    const topLeft = TXml.findChild(overlayEvent, 'TopLeft');
+    const size = TXml.findChild(overlayEvent, 'Size');
+    if (viewport && topLeft && size) {
+      const viewportX = TXml.parseAttr(viewport, 'x', TXml.parseInt);
+      if (viewportX == null) {
+        shaka.log.warning('Unsupported OverlayEvent', region);
+        return;
+      }
+      const viewportY = TXml.parseAttr(viewport, 'y', TXml.parseInt);
+      if (viewportY == null) {
+        shaka.log.warning('Unsupported OverlayEvent', region);
+        return;
+      }
+      const topLeftX = TXml.parseAttr(topLeft, 'x', TXml.parseInt);
+      if (topLeftX == null) {
+        shaka.log.warning('Unsupported OverlayEvent', region);
+        return;
+      }
+      const topLeftY = TXml.parseAttr(topLeft, 'y', TXml.parseInt);
+      if (topLeftY == null) {
+        shaka.log.warning('Unsupported OverlayEvent', region);
+        return;
+      }
+      const sizeX = TXml.parseAttr(size, 'x', TXml.parseInt);
+      if (sizeX == null) {
+        shaka.log.warning('Unsupported OverlayEvent', region);
+        return;
+      }
+      const sizeY = TXml.parseAttr(size, 'y', TXml.parseInt);
+      if (sizeY == null) {
+        shaka.log.warning('Unsupported OverlayEvent', region);
+        return;
+      }
+      overlay = {
+        viewport: {
+          x: viewportX,
+          y: viewportY,
+        },
+        topLeft: {
+          x: topLeftX,
+          y: topLeftY,
+        },
+        size: {
+          x: sizeX,
+          y: sizeY,
+        },
+      };
+    }
+
+    /** @type {!shaka.extern.AdInterstitial} */
+    const interstitial = {
+      id: region.id,
+      groupId: null,
+      startTime: region.startTime,
+      endTime: region.endTime,
+      uri,
+      mimeType,
+      isSkippable: false,
+      skipOffset: null,
+      skipFor: null,
+      canJump: true,
+      resumeOffset: null,
+      playoutLimit: null,
+      once: false,
+      pre: false,
+      post: false,
+      timelineRange: true,
+      loop,
+      overlay,
     };
     this.addInterstitials([interstitial]);
   }
@@ -388,16 +520,36 @@ shaka.ads.InterstitialAdManager = class {
 
 
   /**
-   * @param {!Array.<shaka.extern.AdInterstitial>} interstitials
+   * @param {!Array<shaka.extern.AdInterstitial>} interstitials
    */
-  addInterstitials(interstitials) {
+  async addInterstitials(interstitials) {
     let cuepointsChanged = false;
     for (const interstitial of interstitials) {
+      if (!interstitial.uri) {
+        shaka.log.alwaysWarn('Missing URL in interstitial', interstitial);
+        continue;
+      }
+      if (!interstitial.mimeType) {
+        try {
+          const netEngine = this.player_.getNetworkingEngine();
+          goog.asserts.assert(netEngine, 'Need networking engine');
+          // eslint-disable-next-line no-await-in-loop
+          interstitial.mimeType = await shaka.net.NetworkingUtils.getMimeType(
+              interstitial.uri, netEngine,
+              this.basePlayer_.getConfiguration().streaming.retryParameters);
+        } catch (error) {}
+      }
       const interstitialId = interstitial.id || JSON.stringify(interstitial);
       if (this.interstitialIds_.has(interstitialId)) {
         continue;
       }
-      cuepointsChanged = true;
+      if (interstitial.loop && !interstitial.overlay) {
+        shaka.log.alwaysWarn('Loop is only supported in overlay interstitials',
+            interstitial);
+      }
+      if (!interstitial.overlay) {
+        cuepointsChanged = true;
+      }
       this.interstitialIds_.add(interstitialId);
       this.interstitials_.add(interstitial);
       let shouldPreload = false;
@@ -412,7 +564,8 @@ shaka.ads.InterstitialAdManager = class {
         }
       }
       if (shouldPreload) {
-        if (!this.preloadManagerInterstitials_.has(interstitial)) {
+        if (!this.preloadManagerInterstitials_.has(interstitial) &&
+            this.isPreloadAllowed_(interstitial)) {
           this.preloadManagerInterstitials_.set(
               interstitial, this.player_.preload(
                   interstitial.uri,
@@ -440,6 +593,7 @@ shaka.ads.InterstitialAdManager = class {
     video.style.width = '100%';
     video.style.height = '100%';
     video.style.backgroundColor = 'rgb(0, 0, 0)';
+    video.style.display = 'none';
     video.setAttribute('playsinline', '');
     return video;
   }
@@ -520,17 +674,15 @@ shaka.ads.InterstitialAdManager = class {
    * @param {number=} oncePlayed
    * @private
    */
-  async setupAd_(interstitial, sequenceLength, adPosition, initialTime,
+  setupAd_(interstitial, sequenceLength, adPosition, initialTime,
       oncePlayed = 0) {
-    this.determineIfUsingBaseVideo_();
-    goog.asserts.assert(this.video_, 'Must have video');
-
-    this.lastPlayedAd_ = interstitial;
-
     shaka.log.info('Starting interstitial',
         interstitial.startTime, 'at', this.lastTime_);
 
-    const startTime = Date.now();
+    this.lastPlayedAd_ = interstitial;
+
+    this.determineIfUsingBaseVideo_();
+    goog.asserts.assert(this.video_, 'Must have video');
 
     if (!this.video_.parentElement && this.adContainer_) {
       this.adContainer_.appendChild(this.video_);
@@ -550,8 +702,152 @@ shaka.ads.InterstitialAdManager = class {
     if (interstitial.once) {
       oncePlayed++;
       this.interstitials_.delete(interstitial);
-      this.cuepointsChanged_();
+      if (!interstitial.overlay) {
+        this.cuepointsChanged_();
+      }
+    }
+
+    if (interstitial.mimeType) {
+      if (interstitial.mimeType.startsWith('image/') ||
+          interstitial.mimeType === 'text/html') {
+        if (!interstitial.overlay) {
+          shaka.log.alwaysWarn('Unsupported interstitial', interstitial);
+          return;
+        }
+        this.setupStaticAd_(interstitial, sequenceLength, adPosition,
+            oncePlayed);
+        return;
+      }
+    }
+    if (this.usingBaseVideo_ && interstitial.overlay) {
+      shaka.log.alwaysWarn('Unsupported interstitial', interstitial);
+      return;
+    }
+    this.setupVideoAd_(interstitial, sequenceLength, adPosition, initialTime,
+        oncePlayed);
+  }
+
+
+  /**
+   * @param {shaka.extern.AdInterstitial} interstitial
+   * @param {number} sequenceLength
+   * @param {number} adPosition
+   * @param {number} oncePlayed
+   * @private
+   */
+  setupStaticAd_(interstitial, sequenceLength, adPosition, oncePlayed) {
+    const overlay = interstitial.overlay;
+    goog.asserts.assert(overlay, 'Must have overlay');
+
+    const tagName = interstitial.mimeType == 'text/html' ? 'iframe' : 'img';
+
+    const htmlElement = /** @type {!(HTMLImageElement|HTMLIFrameElement)} */ (
+      document.createElement(tagName));
+    htmlElement.style.objectFit = 'contain';
+    htmlElement.style.position = 'absolute';
+    htmlElement.style.border = 'none';
+
+    const basicTask = () => {
+      if (this.playoutLimitTimer_) {
+        this.playoutLimitTimer_.stop();
+        this.playoutLimitTimer_ = null;
+      }
+      this.adContainer_.removeChild(htmlElement);
+      this.onEvent_(
+          new shaka.util.FakeEvent(shaka.ads.Utils.AD_STOPPED));
+      const nextCurrentInterstitial = this.getCurrentInterstitial_(
+          interstitial.pre, adPosition - oncePlayed);
+      if (nextCurrentInterstitial) {
+        this.adEventManager_.removeAll();
+        this.setupAd_(nextCurrentInterstitial, sequenceLength,
+            ++adPosition, /* initialTime= */ Date.now(), oncePlayed);
+      } else {
+        this.playingAd_ = false;
+      }
+    };
+
+    const ad = new shaka.ads.InterstitialStaticAd(
+        interstitial, sequenceLength, adPosition);
+
+    this.onEvent_(
+        new shaka.util.FakeEvent(shaka.ads.Utils.AD_STARTED,
+            (new Map()).set('ad', ad)));
+
+    if (tagName == 'iframe') {
+      htmlElement.src = interstitial.uri;
+    } else {
+      htmlElement.src = interstitial.uri;
+      htmlElement.onerror = (e) => {
+        this.onEvent_(new shaka.util.FakeEvent(shaka.ads.Utils.AD_ERROR,
+            (new Map()).set('originalEvent', e)));
+        basicTask();
+      };
     }
+
+    const viewport = overlay.viewport;
+    const topLeft = overlay.topLeft;
+    const size = overlay.size;
+    // Special case for VAST non-linear ads
+    if (viewport.x == 0 && viewport.y == 0) {
+      htmlElement.width = interstitial.overlay.size.x;
+      htmlElement.height = interstitial.overlay.size.y;
+      htmlElement.style.bottom = '10%';
+      htmlElement.style.left = '0';
+      htmlElement.style.right = '0';
+      htmlElement.style.width = '100%';
+      if (!interstitial.overlay.size.y && tagName == 'iframe') {
+        htmlElement.style.height = 'auto';
+      }
+    } else {
+      htmlElement.style.height = (size.y / viewport.y * 100) + '%';
+      htmlElement.style.left = (topLeft.x / viewport.x * 100) + '%';
+      htmlElement.style.top = (topLeft.y / viewport.y * 100) + '%';
+      htmlElement.style.width = (size.x / viewport.x * 100) + '%';
+    }
+    this.adContainer_.appendChild(htmlElement);
+
+    const startTime = Date.now();
+    if (this.playoutLimitTimer_) {
+      this.playoutLimitTimer_.stop();
+    }
+    this.playoutLimitTimer_ = new shaka.util.Timer(() => {
+      if (interstitial.playoutLimit &&
+          (Date.now() - startTime) / 1000 > interstitial.playoutLimit) {
+        this.onEvent_(
+            new shaka.util.FakeEvent(shaka.ads.Utils.AD_COMPLETE));
+        basicTask();
+      } else if (interstitial.endTime &&
+          this.baseVideo_.currentTime > interstitial.endTime) {
+        this.onEvent_(
+            new shaka.util.FakeEvent(shaka.ads.Utils.AD_COMPLETE));
+        basicTask();
+      } else if (this.baseVideo_.currentTime < interstitial.startTime) {
+        this.onEvent_(
+            new shaka.util.FakeEvent(shaka.ads.Utils.AD_SKIPPED));
+        basicTask();
+      }
+    });
+    if (interstitial.playoutLimit && !interstitial.endTime) {
+      this.playoutLimitTimer_.tickAfter(interstitial.playoutLimit);
+    } else if (interstitial.endTime) {
+      this.playoutLimitTimer_.tickEvery(/* seconds= */ 0.025);
+    }
+  }
+
+
+  /**
+   * @param {shaka.extern.AdInterstitial} interstitial
+   * @param {number} sequenceLength
+   * @param {number} adPosition
+   * @param {number} initialTime the clock time the ad started at
+   * @param {number} oncePlayed
+   * @private
+   */
+  async setupVideoAd_(interstitial, sequenceLength, adPosition, initialTime,
+      oncePlayed) {
+    goog.asserts.assert(this.video_, 'Must have video');
+    const startTime = Date.now();
+
     this.playingAd_ = true;
 
     if (this.usingBaseVideo_ && adPosition == 1) {
@@ -575,19 +871,34 @@ shaka.ads.InterstitialAdManager = class {
       await detachBasePlayerPromise;
     }
     if (!this.usingBaseVideo_) {
-      this.baseVideo_.pause();
-      if (interstitial.resumeOffset != null &&
-          interstitial.resumeOffset != 0) {
-        this.baseVideo_.currentTime += interstitial.resumeOffset;
+      this.video_.style.display = '';
+      if (interstitial.overlay) {
+        this.video_.loop = interstitial.loop;
+        const viewport = interstitial.overlay.viewport;
+        const topLeft = interstitial.overlay.topLeft;
+        const size = interstitial.overlay.size;
+        this.video_.style.height = (size.y / viewport.y * 100) + '%';
+        this.video_.style.left = (topLeft.x / viewport.x * 100) + '%';
+        this.video_.style.top = (topLeft.y / viewport.y * 100) + '%';
+        this.video_.style.width = (size.x / viewport.x * 100) + '%';
+      } else {
+        this.baseVideo_.pause();
+        if (interstitial.resumeOffset != null &&
+            interstitial.resumeOffset != 0) {
+          this.baseVideo_.currentTime += interstitial.resumeOffset;
+        }
+        this.video_.loop = false;
+        this.video_.style.height = '100%';
+        this.video_.style.left = '0';
+        this.video_.style.top = '0';
+        this.video_.style.width = '100%';
       }
     }
 
     let unloadingInterstitial = false;
-    /** @type {?shaka.util.Timer} */
-    let playoutLimitTimer = null;
 
     const updateBaseVideoTime = () => {
-      if (!this.usingBaseVideo_) {
+      if (!this.usingBaseVideo_ && !interstitial.overlay) {
         if (interstitial.resumeOffset == null) {
           if (interstitial.timelineRange && interstitial.endTime &&
               interstitial.endTime != Infinity) {
@@ -603,24 +914,27 @@ shaka.ads.InterstitialAdManager = class {
       }
     };
 
-    const basicTask = async () => {
+    const basicTask = async (isSkip) => {
       updateBaseVideoTime();
-      if (playoutLimitTimer) {
-        playoutLimitTimer.stop();
-      }
-      goog.asserts.assert(typeof(oncePlayed) == 'number',
-          'Should be an number!');
       // Optimization to avoid returning to main content when there is another
       // interstitial below.
-      const nextCurrentInterstitial = this.getCurrentInterstitial_(
+      let nextCurrentInterstitial = this.getCurrentInterstitial_(
           interstitial.pre, adPosition - oncePlayed);
-      if (nextCurrentInterstitial) {
-        this.onEvent_(
-            new shaka.util.FakeEvent(shaka.ads.Utils.AD_STOPPED));
-        this.adEventManager_.removeAll();
-        this.setupAd_(nextCurrentInterstitial, sequenceLength,
-            ++adPosition, initialTime, oncePlayed);
-      } else {
+      if (isSkip && interstitial.groupId) {
+        while (nextCurrentInterstitial &&
+            nextCurrentInterstitial.groupId == interstitial.groupId) {
+          adPosition++;
+          nextCurrentInterstitial = this.getCurrentInterstitial_(
+              interstitial.pre, adPosition - oncePlayed);
+        }
+      }
+      if (this.playoutLimitTimer_ && (!interstitial.groupId ||
+          (nextCurrentInterstitial &&
+            nextCurrentInterstitial.groupId != interstitial.groupId))) {
+        this.playoutLimitTimer_.stop();
+        this.playoutLimitTimer_ = null;
+      }
+      if (!nextCurrentInterstitial || nextCurrentInterstitial.overlay) {
         if (interstitial.post) {
           this.lastTime_ = null;
           this.lastPlayedAd_ = null;
@@ -649,6 +963,7 @@ shaka.ads.InterstitialAdManager = class {
         this.adEventManager_.removeAll();
         this.playingAd_ = false;
         if (!this.usingBaseVideo_) {
+          this.video_.style.display = 'none';
           updateBaseVideoTime();
           if (!this.baseVideo_.ended) {
             this.baseVideo_.play();
@@ -656,7 +971,14 @@ shaka.ads.InterstitialAdManager = class {
         } else {
           this.cuepointsChanged_();
         }
-        this.determineIfUsingBaseVideo_();
+      }
+      this.determineIfUsingBaseVideo_();
+      if (nextCurrentInterstitial) {
+        this.onEvent_(
+            new shaka.util.FakeEvent(shaka.ads.Utils.AD_STOPPED));
+        this.adEventManager_.removeAll();
+        this.setupAd_(nextCurrentInterstitial, sequenceLength,
+            ++adPosition, initialTime, oncePlayed);
       }
     };
     const error = async (e) => {
@@ -666,29 +988,28 @@ shaka.ads.InterstitialAdManager = class {
       unloadingInterstitial = true;
       this.onEvent_(new shaka.util.FakeEvent(shaka.ads.Utils.AD_ERROR,
           (new Map()).set('originalEvent', e)));
-      await basicTask();
+      await basicTask(/* isSkip= */ false);
     };
     const complete = async () => {
       if (unloadingInterstitial) {
         return;
       }
       unloadingInterstitial = true;
-      await basicTask();
+      await basicTask(/* isSkip= */ false);
       this.onEvent_(
           new shaka.util.FakeEvent(shaka.ads.Utils.AD_COMPLETE));
     };
-    const onSkip = async () => {
+    this.lastOnSkip_ = async () => {
       if (unloadingInterstitial) {
         return;
       }
       unloadingInterstitial = true;
       this.onEvent_(new shaka.util.FakeEvent(shaka.ads.Utils.AD_SKIPPED));
-      await basicTask();
+      await basicTask(/* isSkip= */ true);
     };
 
     const ad = new shaka.ads.InterstitialAd(this.video_,
-        interstitial.isSkippable, interstitial.skipOffset,
-        interstitial.skipFor, onSkip, sequenceLength, adPosition,
+        interstitial, this.lastOnSkip_, sequenceLength, adPosition,
         !this.usingBaseVideo_);
     if (!this.usingBaseVideo_) {
       ad.setMuted(this.baseVideo_.muted);
@@ -768,9 +1089,9 @@ shaka.ads.InterstitialAdManager = class {
           this.player_.configure('playRangeEnd', duration);
         }
       }
-      if (interstitial.playoutLimit) {
-        playoutLimitTimer = new shaka.util.Timer(() => {
-          ad.skip();
+      if (interstitial.playoutLimit && !this.playoutLimitTimer_) {
+        this.playoutLimitTimer_ = new shaka.util.Timer(() => {
+          this.lastOnSkip_();
         }).tickAfter(interstitial.playoutLimit);
         this.player_.configure('playRangeEnd', interstitial.playoutLimit);
       }
@@ -793,14 +1114,6 @@ shaka.ads.InterstitialAdManager = class {
             /* startTime= */ null,
             interstitial.mimeType || undefined);
       }
-      if (interstitial.playoutLimit) {
-        if (playoutLimitTimer) {
-          playoutLimitTimer.stop();
-        }
-        playoutLimitTimer = new shaka.util.Timer(() => {
-          ad.skip();
-        }).tickAfter(interstitial.playoutLimit);
-      }
       const loadTime = (Date.now() - startTime) / 1000;
       this.onEvent_(new shaka.util.FakeEvent(shaka.ads.Utils.ADS_LOADED,
           (new Map()).set('loadTime', loadTime)));
@@ -808,6 +1121,9 @@ shaka.ads.InterstitialAdManager = class {
         this.baseVideo_.play();
       }
     } catch (e) {
+      if (!this.playingAd_) {
+        return;
+      }
       error(e);
     }
   }
@@ -815,7 +1131,7 @@ shaka.ads.InterstitialAdManager = class {
 
   /**
    * @param {shaka.extern.HLSInterstitial} hlsInterstitial
-   * @return {!Promise.<!Array.<shaka.extern.AdInterstitial>>}
+   * @return {!Promise<!Array<shaka.extern.AdInterstitial>>}
    * @private
    */
   async getInterstitialsInfo_(hlsInterstitial) {
@@ -918,6 +1234,7 @@ shaka.ads.InterstitialAdManager = class {
       }
       interstitialsAd.push({
         id,
+        groupId: null,
         startTime,
         endTime,
         uri,
@@ -932,6 +1249,8 @@ shaka.ads.InterstitialAdManager = class {
         pre,
         post,
         timelineRange,
+        loop: false,
+        overlay: null,
       });
     } else if (assetList) {
       const uri = /** @type {string} */(assetList.data);
@@ -969,7 +1288,8 @@ shaka.ads.InterstitialAdManager = class {
           const asset = dataAsJson['ASSETS'][i];
           if (asset['URI']) {
             interstitialsAd.push({
-              id: id + '_asset_' + i,
+              id: id + '_shaka_asset_' + i,
+              groupId: id,
               startTime,
               endTime,
               uri: asset['URI'],
@@ -984,6 +1304,8 @@ shaka.ads.InterstitialAdManager = class {
               pre,
               post,
               timelineRange,
+              loop: false,
+              overlay: null,
             });
           }
         }
@@ -999,9 +1321,12 @@ shaka.ads.InterstitialAdManager = class {
    * @private
    */
   cuepointsChanged_() {
-    /** @type {!Array.<!shaka.extern.AdCuePoint>} */
+    /** @type {!Array<!shaka.extern.AdCuePoint>} */
     const cuePoints = [];
     for (const interstitial of this.interstitials_) {
+      if (interstitial.overlay) {
+        continue;
+      }
       /** @type {shaka.extern.AdCuePoint} */
       const shakaCuePoint = {
         start: interstitial.startTime,
@@ -1041,15 +1366,13 @@ shaka.ads.InterstitialAdManager = class {
     this.player_.configure('ads.disableDASHInterstitial', true);
     const netEngine = this.player_.getNetworkingEngine();
     goog.asserts.assert(netEngine, 'Need networking engine');
-    netEngine.clearAllRequestFilters();
-    netEngine.clearAllResponseFilters();
     this.basePlayer_.getNetworkingEngine().copyFiltersInto(netEngine);
   }
 
   /**
    * @param {string} url
    * @param {shaka.extern.RequestContext=} context
-   * @return {!Promise.<BufferSource>}
+   * @return {!Promise<BufferSource>}
    * @private
    */
   async makeAdRequest_(url, context) {
@@ -1062,16 +1385,40 @@ shaka.ads.InterstitialAdManager = class {
     const response = await op.promise;
     return response.data;
   }
+
+  /**
+   * @param {!shaka.extern.AdInterstitial} interstitial
+   * @return {boolean}
+   * @private
+   */
+  isPreloadAllowed_(interstitial) {
+    const interstitialMimeType = interstitial.mimeType;
+    if (!interstitialMimeType) {
+      return true;
+    }
+    return !interstitialMimeType.startsWith('image/') &&
+        interstitialMimeType !== 'text/html';
+  }
+
+
+  /**
+   * Only for testing
+   *
+   * @return {!Array<shaka.extern.AdInterstitial>}
+   */
+  getInterstitials() {
+    return Array.from(this.interstitials_);
+  }
 };
 
 
 /**
  * @typedef {{
- *   ASSETS: !Array.<shaka.ads.InterstitialAdManager.Asset>,
+ *   ASSETS: !Array<shaka.ads.InterstitialAdManager.Asset>,
  *   SKIP-CONTROL: ?shaka.ads.InterstitialAdManager.SkipControl
  * }}
  *
- * @property {!Array.<shaka.ads.InterstitialAdManager.Asset>} ASSETS
+ * @property {!Array<shaka.ads.InterstitialAdManager.Asset>} ASSETS
  * @property {shaka.ads.InterstitialAdManager.SkipControl} SKIP-CONTROL
  */
 shaka.ads.InterstitialAdManager.AssetsList;