feat(Ads): Implement skip ad functionality in Media Tailor (#6598)

shaka-project · May 14, 2024 · 1429763 · 1429763
1 parent dc0d827
commit 1429763
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 7 deletions.
diff --git a/lib/ads/media_tailor_ad.js b/lib/ads/media_tailor_ad.js
@@ -33,6 +33,9 @@ shaka.ads.MediaTailorAd = class {
 
     /** @private {boolean} */
     this.isLinear_ = isLinear;
+
+    /** @private {boolean} */
+    this.isSkipped_ = false;
   }
 
 
@@ -105,6 +108,7 @@ shaka.ads.MediaTailorAd = class {
    * @export
    */
   skip() {
+    this.isSkipped_ = true;
     this.video_.currentTime += this.getRemainingTime();
   }
 
@@ -294,4 +298,11 @@ shaka.ads.MediaTailorAd = class {
     this.adPosition_ = null;
     this.totalAds_ = null;
   }
+
+  /**
+   * @return {boolean}
+   */
+  isSkipped() {
+    return this.isSkipped_;
+  }
 };
diff --git a/lib/ads/media_tailor_ad_manager.js b/lib/ads/media_tailor_ad_manager.js
@@ -452,6 +452,10 @@ shaka.ads.MediaTailorAdManager = class {
       this.sendInProgressEvents_(currentTime, this.mediaTailorAd_);
       const remainingTime = this.ad_.getRemainingTime();
       const duration = this.ad_.getDuration();
+      if (this.ad_.canSkipNow() && remainingTime > 0 && duration > 0) {
+        this.sendTrackingEvent_(
+            shaka.ads.MediaTailorAdManager.SKIP_STATE_CHANGED_);
+      }
       if (duration > 0 && (remainingTime <= 0 || remainingTime > duration)) {
         this.onEnded_();
       }
@@ -610,7 +614,7 @@ shaka.ads.MediaTailorAdManager = class {
       if (!this.isLive_) {
         this.playedAds_.push(this.mediaTailorAd_.adId);
       }
-      this.removeCurrentAdListeners_();
+      this.removeCurrentAdListeners_(this.ad_.isSkipped());
       const position = this.ad_.getPositionInSequence();
       const totalAdsInBreak = this.ad_.getSequenceLength();
       if (position === totalAdsInBreak) {
@@ -679,10 +683,15 @@ shaka.ads.MediaTailorAdManager = class {
   }
 
   /**
+   * @param {boolean=} skipped
    * @private
    */
-  removeCurrentAdListeners_() {
-    this.sendTrackingEvent_(shaka.ads.MediaTailorAdManager.COMPLETE_);
+  removeCurrentAdListeners_(skipped = false) {
+    if (skipped) {
+      this.sendTrackingEvent_(shaka.ads.MediaTailorAdManager.SKIPPED_);
+    } else {
+      this.sendTrackingEvent_(shaka.ads.MediaTailorAdManager.COMPLETE_);
+    }
     for (const listener of this.adListeners_) {
       this.eventManager_.unlisten(
           listener.target, listener.type, listener.listener);
@@ -759,12 +768,23 @@ shaka.ads.MediaTailorAdManager = class {
         this.onEvent_(
             new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED));
         break;
+      case shaka.ads.MediaTailorAdManager.SKIPPED_:
+        this.onEvent_(
+            new shaka.util.FakeEvent(shaka.ads.AdManager.AD_SKIPPED));
+        this.onEvent_(
+            new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED));
+        break;
       case shaka.ads.MediaTailorAdManager.BREAKSTART_:
         this.adContainer_.setAttribute('ad-active', 'true');
         break;
       case shaka.ads.MediaTailorAdManager.BREAKEND_:
         this.adContainer_.removeAttribute('ad-active');
         break;
+      case shaka.ads.MediaTailorAdManager.SKIP_STATE_CHANGED_:
+        this.onEvent_(
+            new shaka.util.FakeEvent(
+                shaka.ads.AdManager.AD_SKIP_STATE_CHANGED));
+        break;
     }
   }
 };
@@ -840,6 +860,13 @@ shaka.ads.MediaTailorAdManager.THIRDQUARTILE_ = 'thirdQuartile';
 shaka.ads.MediaTailorAdManager.COMPLETE_ = 'complete';
 
 
+/**
+ * @const {string}
+ * @private
+ */
+shaka.ads.MediaTailorAdManager.SKIPPED_ = 'skip';
+
+
 /**
  * @const {string}
  * @private
@@ -852,3 +879,10 @@ shaka.ads.MediaTailorAdManager.BREAKSTART_ = 'breakStart';
  * @private
  */
 shaka.ads.MediaTailorAdManager.BREAKEND_ = 'breakEnd';
+
+
+/**
+ * @const {string}
+ * @private
+ */
+shaka.ads.MediaTailorAdManager.SKIP_STATE_CHANGED_ = 'skipStateChanged';
diff --git a/test/ui/ad_ui_unit.js b/test/ui/ad_ui_unit.js
@@ -94,9 +94,7 @@ describe('Ad UI', () => {
     UiUtils.confirmElementHidden(adControlsContainer);
   });
 
-  // TODO: Skip button isn't currently used. Re-enable this suit
-  // once we have other, non-IMA ad integrations.
-  xdescribe('skip button', () => {
+  describe('skip button', () => {
     /** @type {!HTMLButtonElement} */
     let skipButton;
 

diff --git a/ui/controls.js b/ui/controls.js
@@ -21,6 +21,7 @@ goog.require('shaka.ui.HiddenRewindButton');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.SeekBar');
+goog.require('shaka.ui.SkipAdButton');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.ui.VRManager');
 goog.require('shaka.util.Dom');
@@ -968,6 +969,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
     const adCounter = new shaka.ui.AdCounter(this.adPanel_, this);
     this.elements_.push(adCounter);
+
+    const skipButton = new shaka.ui.SkipAdButton(this.adPanel_, this);
+    this.elements_.push(skipButton);
   }
 
   /** @private */

diff --git a/ui/less/ad_controls.less b/ui/less/ad_controls.less
@@ -61,7 +61,7 @@
     font-size: initial;
   }
 
-  div:not(.shaka-skip-ad-counter) {
+  div:not(.shaka-skip-ad-counter):not(.shaka-skip-ad-container) {
     .bottom-panels-elements-margin();
   }
 }
@@ -90,6 +90,7 @@
   display: flex;
   flex-direction: row;
   margin: 0;
+  margin-left: auto;
 }
 
 .shaka-skip-ad-button {