Source: lib/ads/client_side_ad_manager.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ads.ClientSideAdManager');
  10. goog.require('goog.asserts');
  11. goog.require('shaka.Player');
  12. goog.require('shaka.ads.ClientSideAd');
  13. goog.require('shaka.ads.Utils');
  14. goog.require('shaka.log');
  15. goog.require('shaka.util.Dom');
  16. goog.require('shaka.util.EventManager');
  17. goog.require('shaka.util.FakeEvent');
  18. goog.require('shaka.util.IReleasable');
  20. /**
  21.  * A class responsible for client-side ad interactions.
  22.  * @implements {shaka.util.IReleasable}
  23.  */
  24. shaka.ads.ClientSideAdManager = class {
  25.   /**
  26.    * @param {HTMLElement} adContainer
  27.    * @param {HTMLMediaElement} video
  28.    * @param {string} locale
  29.    * @param {?google.ima.AdsRenderingSettings} adsRenderingSettings
  30.    * @param {function(!shaka.util.FakeEvent)} onEvent
  31.    */
  32.   constructor(adContainer, video, locale, adsRenderingSettings, onEvent) {
  33.     /** @private {HTMLElement} */
  34.     this.adContainer_ = adContainer;
  36.     /** @private {HTMLMediaElement} */
  37.     this.video_ = video;
  39.     /** @private {boolean} */
  40.     this.videoPlayed_ = false;
  42.     /** @private {?shaka.extern.AdsConfiguration} */
  43.     this.config_ = null;
  45.     /** @private {ResizeObserver} */
  46.     this.resizeObserver_ = null;
  48.     /** @private {number} */
  49.     this.requestAdsStartTime_ = NaN;
  51.     /** @private {function(!shaka.util.FakeEvent)} */
  52.     this.onEvent_ = onEvent;
  54.     /** @private {shaka.ads.ClientSideAd} */
  55.     this.ad_ = null;
  57.     /** @private {shaka.util.EventManager} */
  58.     this.eventManager_ = new shaka.util.EventManager();
  60.     google.ima.settings.setLocale(locale);
  62.     google.ima.settings.setDisableCustomPlaybackForIOS10Plus(true);
  64.     /** @private {!google.ima.AdDisplayContainer} */
  65.     this.adDisplayContainer_ = new google.ima.AdDisplayContainer(
  66.         this.adContainer_,
  67.         this.video_);
  69.     // TODO: IMA: Must be done as the result of a user action on mobile
  70.     this.adDisplayContainer_.initialize();
  72.     // IMA: This instance should be re-used for the entire lifecycle of
  73.     // the page.
  74.     this.adsLoader_ = new google.ima.AdsLoader(this.adDisplayContainer_);
  76.     this.adsLoader_.getSettings().setPlayerType('shaka-player');
  77.     this.adsLoader_.getSettings().setPlayerVersion(shaka.Player.version);
  79.     /** @private {google.ima.AdsManager} */
  80.     this.imaAdsManager_ = null;
  82.     /** @private {!google.ima.AdsRenderingSettings} */
  83.     this.adsRenderingSettings_ =
  84.         adsRenderingSettings || new google.ima.AdsRenderingSettings();
  86.     this.eventManager_.listen(this.adsLoader_,
  87.         google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, (e) => {
  88.           this.onAdsManagerLoaded_(
  89.               /** @type {!google.ima.AdsManagerLoadedEvent} */ (e));
  90.         });
  92.     this.eventManager_.listen(this.adsLoader_,
  93.         google.ima.AdErrorEvent.Type.AD_ERROR, (e) => {
  94.           this.onAdError_( /** @type {!google.ima.AdErrorEvent} */ (e));
  95.         });
  97.     // Notify the SDK when the video has ended, so it can play post-roll ads.
  98.     this.eventManager_.listen(this.video_, 'ended', () => {
  99.       this.adsLoader_.contentComplete();
  100.     });
  102.     this.eventManager_.listenOnce(this.video_, 'play', () => {
  103.       this.videoPlayed_ = true;
  104.     });
  105.   }
  107.   /**
  108.    * Called by the AdManager to provide an updated configuration any time it
  109.    * changes.
  110.    *
  111.    * @param {shaka.extern.AdsConfiguration} config
  112.    */
  113.   configure(config) {
  114.     this.config_ = config;
  115.   }
  117.   /**
  118.    * @param {!google.ima.AdsRequest} imaRequest
  119.    */
  120.   requestAds(imaRequest) {
  121.     goog.asserts.assert(
  122.         imaRequest.adTagUrl || imaRequest.adsResponse,
  123.         'The ad tag needs to be set up before requesting ads, ' +
  124.           'or adsResponse must be filled.');
  125.     // Destroy the current AdsManager, in case the tag you requested previously
  126.     // contains post-rolls (don't play those now).
  127.     if (this.imaAdsManager_) {
  128.       this.imaAdsManager_.destroy();
  129.     }
  130.     // Your AdsLoader will be set up on page-load. You should re-use the same
  131.     // AdsLoader for every request.
  132.     if (this.adsLoader_) {
  133.       // Reset the IMA SDK.
  134.       this.adsLoader_.contentComplete();
  135.     }
  136.     this.requestAdsStartTime_ = Date.now() / 1000;
  137.     this.adsLoader_.requestAds(imaRequest);
  138.   }
  140.   /**
  141.    * @param {!google.ima.AdsRenderingSettings} adsRenderingSettings
  142.    */
  143.   updateAdsRenderingSettings(adsRenderingSettings) {
  144.     this.adsRenderingSettings_ = adsRenderingSettings;
  145.     if (this.imaAdsManager_) {
  146.       this.imaAdsManager_.updateAdsRenderingSettings(
  147.           this.adsRenderingSettings_);
  148.     }
  149.   }
  151.   /**
  152.    * Stop all currently playing ads.
  153.    */
  154.   stop() {
  155.     // this.imaAdsManager_ might not be set yet... if, for example, an ad
  156.     // blocker prevented the ads from ever loading.
  157.     if (this.imaAdsManager_) {
  158.       this.imaAdsManager_.stop();
  159.     }
  160.     if (this.adContainer_) {
  161.       shaka.util.Dom.removeAllChildren(this.adContainer_);
  162.     }
  163.   }
  165.   /** @override */
  166.   release() {
  167.     this.stop();
  168.     if (this.resizeObserver_) {
  169.       this.resizeObserver_.disconnect();
  170.     }
  171.     if (this.eventManager_) {
  172.       this.eventManager_.release();
  173.     }
  174.     if (this.imaAdsManager_) {
  175.       this.imaAdsManager_.destroy();
  176.     }
  177.     this.adsLoader_.destroy();
  178.     this.adDisplayContainer_.destroy();
  179.   }
  181.   /**
  182.    * @param {!google.ima.AdErrorEvent} e
  183.    * @private
  184.    */
  185.   onAdError_(e) {
  186.     shaka.log.warning(
  187.         'There was an ad error from the IMA SDK: ' + e.getError());
  188.     shaka.log.warning('Resuming playback.');
  190.     const data = (new Map()).set('originalEvent', e);
  191.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.Utils.AD_ERROR, data));
  193.     this.onAdComplete_(/* adEvent= */ null);
  194.     // Remove ad breaks from the timeline
  195.     this.onEvent_(
  196.         new shaka.util.FakeEvent(shaka.ads.Utils.CUEPOINTS_CHANGED,
  197.             (new Map()).set('cuepoints', [])));
  198.   }
  201.   /**
  202.    * @param {!google.ima.AdsManagerLoadedEvent} e
  203.    * @private
  204.    */
  205.   onAdsManagerLoaded_(e) {
  206.     goog.asserts.assert(this.video_ != null, 'Video should not be null!');
  208.     const now = Date.now() / 1000;
  209.     const loadTime = now - this.requestAdsStartTime_;
  210.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.Utils.ADS_LOADED,
  211.         (new Map()).set('loadTime', loadTime)));
  213.     if (!this.config_.customPlayheadTracker) {
  214.       this.imaAdsManager_ = e.getAdsManager(this.video_,
  215.           this.adsRenderingSettings_);
  216.     } else {
  217.       const videoPlayHead = {
  218.         currentTime: this.video_.currentTime,
  219.       };
  221.       this.imaAdsManager_ = e.getAdsManager(videoPlayHead,
  222.           this.adsRenderingSettings_);
  224.       if (this.video_.muted) {
  225.         this.imaAdsManager_.setVolume(0);
  226.       } else {
  227.         this.imaAdsManager_.setVolume(this.video_.volume);
  228.       }
  230.       this.eventManager_.listen(this.video_, 'timeupdate', () => {
  231.         if (!this.video_.duration) {
  232.           return;
  233.         }
  234.         videoPlayHead.currentTime = this.video_.currentTime;
  235.       });
  236.       this.eventManager_.listen(this.video_, 'volumechange', () => {
  237.         if (!this.ad_) {
  238.           return;
  239.         }
  240.         this.ad_.setVolume(this.video_.volume);
  241.         if (this.video_.muted) {
  242.           this.ad_.setMuted(true);
  243.         }
  244.       });
  245.     }
  247.     this.onEvent_(new shaka.util.FakeEvent(
  248.         shaka.ads.Utils.IMA_AD_MANAGER_LOADED,
  249.         (new Map()).set('imaAdManager', this.imaAdsManager_)));
  251.     const cuePointStarts = this.imaAdsManager_.getCuePoints();
  252.     if (cuePointStarts.length) {
  253.       /** @type {!Array<!shaka.extern.AdCuePoint>} */
  254.       const cuePoints = [];
  255.       for (const start of cuePointStarts) {
  256.         /** @type {shaka.extern.AdCuePoint} */
  257.         const shakaCuePoint = {
  258.           start: start,
  259.           end: null,
  260.         };
  261.         cuePoints.push(shakaCuePoint);
  262.       }
  264.       this.onEvent_(new shaka.util.FakeEvent(
  265.           shaka.ads.Utils.CUEPOINTS_CHANGED,
  266.           (new Map()).set('cuepoints', cuePoints)));
  267.     }
  269.     this.addImaEventListeners_();
  271.     try {
  272.       this.imaAdsManager_.init(
  273.           this.video_.offsetWidth, this.video_.offsetHeight);
  275.       // Wait on the 'loadeddata' event rather than the 'loadedmetadata' event
  276.       // because 'loadedmetadata' is sometimes called before the video resizes
  277.       // on some platforms (e.g. Safari).
  278.       this.eventManager_.listen(this.video_, 'loadeddata', () => {
  279.         this.imaAdsManager_.resize(
  280.             this.video_.offsetWidth, this.video_.offsetHeight);
  281.       });
  283.       if ('ResizeObserver' in window) {
  284.         this.resizeObserver_ = new ResizeObserver(() => {
  285.           this.imaAdsManager_.resize(
  286.               this.video_.offsetWidth, this.video_.offsetHeight);
  287.         });
  288.         this.resizeObserver_.observe(this.video_);
  289.       } else {
  290.         this.eventManager_.listen(document, 'fullscreenchange', () => {
  291.           this.imaAdsManager_.resize(
  292.               this.video_.offsetWidth, this.video_.offsetHeight);
  293.         });
  294.       }
  296.       // Single video and overlay ads will start at this time
  297.       // TODO (ismena): Need a better understanding of what this does.
  298.       // The docs say it's called to 'start playing the ads,' but I haven't
  299.       // seen the ads actually play until requestAds() is called.
  300.       // Note: We listen for a play event to avoid autoplay issues that might
  301.       // crash IMA.
  302.       if (this.videoPlayed_ || this.config_.skipPlayDetection) {
  303.         this.imaAdsManager_.start();
  304.       } else {
  305.         this.eventManager_.listenOnce(this.video_, 'play', () => {
  306.           this.videoPlayed_ = true;
  307.           this.imaAdsManager_.start();
  308.         });
  309.       }
  310.     } catch (adError) {
  311.       // If there was a problem with the VAST response,
  312.       // we we won't be getting an ad. Hide ad UI if we showed it already
  313.       // and get back to the presentation.
  314.       this.onAdComplete_(/* adEvent= */ null);
  315.     }
  316.   }
  319.   /**
  320.    * @private
  321.    */
  322.   addImaEventListeners_() {
  323.     /**
  324.      * @param {!Event} e
  325.      * @param {string} type
  326.      */
  327.     const convertEventAndSend = (e, type) => {
  328.       const data = (new Map()).set('originalEvent', e);
  329.       this.onEvent_(new shaka.util.FakeEvent(type, data));
  330.     };
  332.     this.eventManager_.listen(this.imaAdsManager_,
  333.         google.ima.AdErrorEvent.Type.AD_ERROR, (error) => {
  334.           this.onAdError_(/** @type {!google.ima.AdErrorEvent} */ (error));
  335.         });
  337.     this.eventManager_.listen(this.imaAdsManager_,
  338.         google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, (e) => {
  339.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  340.         });
  342.     this.eventManager_.listen(this.imaAdsManager_,
  343.         google.ima.AdEvent.Type.STARTED, (e) => {
  344.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  345.         });
  347.     this.eventManager_.listen(this.imaAdsManager_,
  348.         google.ima.AdEvent.Type.FIRST_QUARTILE, (e) => {
  349.           convertEventAndSend(e, shaka.ads.Utils.AD_FIRST_QUARTILE);
  350.         });
  352.     this.eventManager_.listen(this.imaAdsManager_,
  353.         google.ima.AdEvent.Type.MIDPOINT, (e) => {
  354.           convertEventAndSend(e, shaka.ads.Utils.AD_MIDPOINT);
  355.         });
  357.     this.eventManager_.listen(this.imaAdsManager_,
  358.         google.ima.AdEvent.Type.THIRD_QUARTILE, (e) => {
  359.           convertEventAndSend(e, shaka.ads.Utils.AD_THIRD_QUARTILE);
  360.         });
  362.     this.eventManager_.listen(this.imaAdsManager_,
  363.         google.ima.AdEvent.Type.COMPLETE, (e) => {
  364.           convertEventAndSend(e, shaka.ads.Utils.AD_COMPLETE);
  365.         });
  367.     this.eventManager_.listen(this.imaAdsManager_,
  368.         google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, (e) => {
  369.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  370.         });
  372.     this.eventManager_.listen(this.imaAdsManager_,
  373.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  374.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  375.         });
  377.     this.eventManager_.listen(this.imaAdsManager_,
  378.         google.ima.AdEvent.Type.SKIPPED, (e) => {
  379.           convertEventAndSend(e, shaka.ads.Utils.AD_SKIPPED);
  380.         });
  382.     this.eventManager_.listen(this.imaAdsManager_,
  383.         google.ima.AdEvent.Type.VOLUME_CHANGED, (e) => {
  384.           convertEventAndSend(e, shaka.ads.Utils.AD_VOLUME_CHANGED);
  385.         });
  387.     this.eventManager_.listen(this.imaAdsManager_,
  388.         google.ima.AdEvent.Type.VOLUME_MUTED, (e) => {
  389.           convertEventAndSend(e, shaka.ads.Utils.AD_MUTED);
  390.         });
  392.     this.eventManager_.listen(this.imaAdsManager_,
  393.         google.ima.AdEvent.Type.PAUSED, (e) => {
  394.           if (this.ad_) {
  395.             this.ad_.setPaused(true);
  396.             convertEventAndSend(e, shaka.ads.Utils.AD_PAUSED);
  397.           }
  398.         });
  400.     this.eventManager_.listen(this.imaAdsManager_,
  401.         google.ima.AdEvent.Type.RESUMED, (e) => {
  402.           if (this.ad_) {
  403.             this.ad_.setPaused(false);
  404.             convertEventAndSend(e, shaka.ads.Utils.AD_RESUMED);
  405.           }
  406.         });
  408.     this.eventManager_.listen(this.imaAdsManager_,
  409.         google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, (e) => {
  410.           if (this.ad_) {
  411.             convertEventAndSend(e, shaka.ads.Utils.AD_SKIP_STATE_CHANGED);
  412.           }
  413.         });
  415.     this.eventManager_.listen(this.imaAdsManager_,
  416.         google.ima.AdEvent.Type.CLICK, (e) => {
  417.           convertEventAndSend(e, shaka.ads.Utils.AD_CLICKED);
  418.         });
  420.     this.eventManager_.listen(this.imaAdsManager_,
  421.         google.ima.AdEvent.Type.AD_PROGRESS, (e) => {
  422.           convertEventAndSend(e, shaka.ads.Utils.AD_PROGRESS);
  423.         });
  425.     this.eventManager_.listen(this.imaAdsManager_,
  426.         google.ima.AdEvent.Type.AD_BUFFERING, (e) => {
  427.           convertEventAndSend(e, shaka.ads.Utils.AD_BUFFERING);
  428.         });
  430.     this.eventManager_.listen(this.imaAdsManager_,
  431.         google.ima.AdEvent.Type.IMPRESSION, (e) => {
  432.           convertEventAndSend(e, shaka.ads.Utils.AD_IMPRESSION);
  433.         });
  435.     this.eventManager_.listen(this.imaAdsManager_,
  436.         google.ima.AdEvent.Type.DURATION_CHANGE, (e) => {
  437.           convertEventAndSend(e, shaka.ads.Utils.AD_DURATION_CHANGED);
  438.         });
  440.     this.eventManager_.listen(this.imaAdsManager_,
  441.         google.ima.AdEvent.Type.USER_CLOSE, (e) => {
  442.           convertEventAndSend(e, shaka.ads.Utils.AD_CLOSED);
  443.         });
  445.     this.eventManager_.listen(this.imaAdsManager_,
  446.         google.ima.AdEvent.Type.LOADED, (e) => {
  447.           convertEventAndSend(e, shaka.ads.Utils.AD_LOADED);
  448.         });
  450.     this.eventManager_.listen(this.imaAdsManager_,
  451.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  452.           convertEventAndSend(e, shaka.ads.Utils.ALL_ADS_COMPLETED);
  453.         });
  455.     this.eventManager_.listen(this.imaAdsManager_,
  456.         google.ima.AdEvent.Type.LINEAR_CHANGED, (e) => {
  457.           convertEventAndSend(e, shaka.ads.Utils.AD_LINEAR_CHANGED);
  458.         });
  460.     this.eventManager_.listen(this.imaAdsManager_,
  461.         google.ima.AdEvent.Type.AD_METADATA, (e) => {
  462.           convertEventAndSend(e, shaka.ads.Utils.AD_METADATA);
  463.         });
  465.     this.eventManager_.listen(this.imaAdsManager_,
  466.         google.ima.AdEvent.Type.LOG, (e) => {
  467.           convertEventAndSend(e, shaka.ads.Utils.AD_RECOVERABLE_ERROR);
  468.         });
  470.     this.eventManager_.listen(this.imaAdsManager_,
  471.         google.ima.AdEvent.Type.AD_BREAK_READY, (e) => {
  472.           convertEventAndSend(e, shaka.ads.Utils.AD_BREAK_READY);
  473.         });
  475.     this.eventManager_.listen(this.imaAdsManager_,
  476.         google.ima.AdEvent.Type.INTERACTION, (e) => {
  477.           convertEventAndSend(e, shaka.ads.Utils.AD_INTERACTION);
  478.         });
  479.   }
  481.   /**
  482.    * @param {!google.ima.AdEvent} e
  483.    * @private
  484.    */
  485.   onAdStart_(e) {
  486.     goog.asserts.assert(this.imaAdsManager_,
  487.         'Should have an ads manager at this point!');
  489.     const imaAd = e.getAd();
  490.     if (!imaAd) {
  491.       // Sometimes the IMA SDK will fire a CONTENT_PAUSE_REQUESTED or STARTED
  492.       // event with no associated ad object.
  493.       // We can't really play an ad in that situation, so just ignore the event.
  494.       shaka.log.alwaysWarn(
  495.           'The IMA SDK fired a ' + e.type + ' event with no associated ad. ' +
  496.           'Unable to play ad!');
  497.       return;
  498.     }
  500.     this.ad_ = new shaka.ads.ClientSideAd(imaAd,
  501.         this.imaAdsManager_, this.video_);
  502.     if (e.type == google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED &&
  503.         !this.config_.supportsMultipleMediaElements ) {
  504.       this.onEvent_(new shaka.util.FakeEvent(
  505.           shaka.ads.Utils.AD_CONTENT_PAUSE_REQUESTED));
  506.     }
  507.     const data = new Map()
  508.         .set('ad', this.ad_)
  509.         .set('sdkAdObject', imaAd)
  510.         .set('originalEvent', e);
  511.     this.onEvent_(new shaka.util.FakeEvent(
  512.         shaka.ads.Utils.AD_STARTED, data));
  513.     if (this.ad_.isLinear()) {
  514.       this.adContainer_.setAttribute('ad-active', 'true');
  515.       if (!this.config_.customPlayheadTracker) {
  516.         this.video_.pause();
  517.       }
  518.       if (this.video_.muted) {
  519.         this.ad_.setInitialMuted(this.video_.volume);
  520.       } else {
  521.         this.ad_.setVolume(this.video_.volume);
  522.       }
  523.     }
  524.   }
  526.   /**
  527.    * @param {?google.ima.AdEvent} e
  528.    * @private
  529.    */
  530.   onAdComplete_(e) {
  531.     if (e && e.type == google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED &&
  532.         !this.config_.supportsMultipleMediaElements) {
  533.       this.onEvent_(new shaka.util.FakeEvent(
  534.           shaka.ads.Utils.AD_CONTENT_RESUME_REQUESTED));
  535.     }
  536.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.Utils.AD_STOPPED,
  537.         (new Map()).set('originalEvent', e)));
  538.     if (this.ad_ && this.ad_.isLinear()) {
  539.       this.adContainer_.removeAttribute('ad-active');
  540.       if (!this.config_.customPlayheadTracker && !this.video_.ended) {
  541.         this.video_.play();
  542.       }
  543.     }
  544.   }
  545. };