feat(Ads): Add CUEPOINTS_CHANGED event to interstitials

lib/ads/ad_manager.js

@@ -171,13 +171,13 @@ goog.require('shaka.util.IReleasable');
 
 
 /**
- * @event shaka.ads.AdManager.AdResumedEvent
+ * @event shaka.ads.AdManager.AdCuePointsChangedEvent
  * @description Fired when the ad cue points change, signalling ad breaks
  *  change.
  * @property {string} type
  *   'ad-cue-points-changed'
- * @property {Object} originalEvent
- *    The native SDK event, if available.
+ * @property {!Array.<!shaka.extern.AdCuePoint>} cuepoints
+ *    The ad cue points, if available.
  * @exportDoc
  */
 

lib/ads/interstitial_ad_manager.js

@@ -103,6 +103,7 @@ shaka.ads.InterstitialAdManager = class {
     this.pollTimer_ = new shaka.util.Timer(async () => {
       if (this.interstitials_.size && !this.playingAd_ &&
           this.lastTime_ != null) {
+        let cuepointsChanged = false;
         const interstitials = Array.from(this.interstitials_);
         const seekRange = this.basePlayer_.seekRange();
         for (const interstitial of interstitials) {
@@ -121,6 +122,7 @@ shaka.ads.InterstitialAdManager = class {
               this.interstitialIds_.delete(interstitialId);
             }
             this.interstitials_.delete(interstitial);
+            cuepointsChanged = true;
           } else {
             const difference = interstitial.startTime - this.lastTime_;
             if (difference > 0 && difference <= 10) {
@@ -131,6 +133,9 @@ shaka.ads.InterstitialAdManager = class {
             }
           }
         }
+        if (cuepointsChanged) {
+          this.cuepointsChanged_();
+        }
       }
     }).tickEvery(/* seconds= */ 1);
   }
@@ -208,13 +213,15 @@ shaka.ads.InterstitialAdManager = class {
       return;
     }
     this.updatePlayerConfig_();
+    let cuepointsChanged = false;
     const interstitialsAd = await this.getInterstitialsInfo_(interstitial);
     if (interstitialsAd.length) {
       for (const interstitialAd of interstitialsAd) {
         const interstitialId = JSON.stringify(interstitialAd);
         if (this.interstitialIds_.has(interstitialId)) {
           continue;
         }
+        cuepointsChanged = true;
         this.interstitialIds_.add(interstitialId);
         this.interstitials_.add(interstitialAd);
         if (this.lastTime_ != null) {
@@ -230,6 +237,9 @@ shaka.ads.InterstitialAdManager = class {
     } else {
       shaka.log.alwaysWarn('Unsupported interstitial', interstitial);
     }
+    if (cuepointsChanged) {
+      this.cuepointsChanged_();
+    }
   }
 
   /**
@@ -307,6 +317,7 @@ shaka.ads.InterstitialAdManager = class {
     if (interstitial.once) {
       oncePlayed++;
       this.interstitials_.delete(interstitial);
+      this.cuepointsChanged_();
     }
     this.playingAd_ = true;
 
@@ -598,6 +609,32 @@ shaka.ads.InterstitialAdManager = class {
   }
 
 
+  /**
+   * @private
+   */
+  cuepointsChanged_() {
+    /** @type {!Array.<!shaka.extern.AdCuePoint>} */
+    const cuePoints = [];
+    for (const interstitial of this.interstitials_) {
+      /** @type {shaka.extern.AdCuePoint} */
+      const shakaCuePoint = {
+        start: interstitial.startTime,
+        end: null,
+      };
+      const isValid = !cuePoints.find((c) => {
+        return shakaCuePoint.start == c.start && shakaCuePoint.end == c.end;
+      });
+      if (isValid) {
+        cuePoints.push(shakaCuePoint);
+      }
+    }
+
+    this.onEvent_(new shaka.util.FakeEvent(
+        shaka.ads.AdManager.CUEPOINTS_CHANGED,
+        (new Map()).set('cuepoints', cuePoints)));
+  }
+
+
   /**
    * @private
    */

lib/cast/cast_utils.js

@@ -326,6 +326,7 @@ shaka.cast.CastUtils.PlayerGetterMethods = {
   'seekRange': 1,
   'getLoadMode': 10,
   'getManifestType': 10,
+  'isFullyLoaded': 1,
 };
 
 

lib/player.js

@@ -4133,6 +4133,16 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     }
   }
 
+  /**
+   * Indicates if the player has fully loaded the stream.
+   *
+   * @return {boolean}
+   * @export
+   */
+  isFullyLoaded() {
+    return this.fullyLoaded_;
+  }
+
   /**
    * Get the key system currently used by EME. If EME is not being used, this
    * will return an empty string. If the player has not loaded content, this

ui/seek_bar.js

@@ -375,13 +375,14 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
   markAdBreaks_() {
     if (!this.adCuePoints_.length) {
       this.adMarkerContainer_.style.background = 'transparent';
+      this.adBreaksTimer_.stop();
       return;
     }
 
     const seekRange = this.player.seekRange();
     const seekRangeSize = seekRange.end - seekRange.start;
     const gradient = ['to right'];
-    const pointsAsFractions = [];
+    let pointsAsFractions = [];
     const adBreakColor = this.config_.seekBarColors.adBreaks;
     let postRollAd = false;
     for (const point of this.adCuePoints_) {
@@ -413,6 +414,10 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       }
     }
 
+    pointsAsFractions = pointsAsFractions.sort((a, b) => {
+      return a.start - b.start;
+    });
+
     for (const point of pointsAsFractions) {
       gradient.push(this.makeColor_('transparent', point.start));
       gradient.push(this.makeColor_(adBreakColor, point.start));
@@ -445,16 +450,24 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
    */
   onAdCuePointsChanged_() {
     this.markAdBreaks_();
-    const seekRange = this.player.seekRange();
-    const seekRangeSize = seekRange.end - seekRange.start;
-    const minSeekBarWindow = shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR;
-    // Seek range keeps changing for live content and some of the known
-    // ad breaks might not be in the seek range now, but get into
-    // it later.
-    // If we have a LIVE seekable content, keep checking for ad breaks
-    // every second.
-    if (this.player.isLive() && seekRangeSize > minSeekBarWindow) {
-      this.adBreaksTimer_.tickEvery(1);
+    const action = () => {
+      const seekRange = this.player.seekRange();
+      const seekRangeSize = seekRange.end - seekRange.start;
+      const minSeekBarWindow =
+          shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR;
+      // Seek range keeps changing for live content and some of the known
+      // ad breaks might not be in the seek range now, but get into
+      // it later.
+      // If we have a LIVE seekable content, keep checking for ad breaks
+      // every second.
+      if (this.player.isLive() && seekRangeSize > minSeekBarWindow) {
+        this.adBreaksTimer_.tickEvery(/* seconds= */ 0.25);
+      }
+    };
+    if (this.player.isFullyLoaded()) {
+      action();
+    } else {
+      this.eventManager.listenOnce(this.player, 'loaded', action);
     }
   }