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.       const viewMode = this.isFullScreenEnabled_() ?
  273.           google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  275.       this.imaAdsManager_.init(this.video_.offsetWidth,
  276.           this.video_.offsetHeight, viewMode);
  278.       // Wait on the 'loadeddata' event rather than the 'loadedmetadata' event
  279.       // because 'loadedmetadata' is sometimes called before the video resizes
  280.       // on some platforms (e.g. Safari).
  281.       this.eventManager_.listen(this.video_, 'loadeddata', () => {
  282.         const viewMode = this.isFullScreenEnabled_() ?
  283.             google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  284.         this.imaAdsManager_.resize(this.video_.offsetWidth,
  285.             this.video_.offsetHeight, viewMode);
  286.       });
  288.       if ('ResizeObserver' in window) {
  289.         this.resizeObserver_ = new ResizeObserver(() => {
  290.           const viewMode = this.isFullScreenEnabled_() ?
  291.               google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  292.           this.imaAdsManager_.resize(this.video_.offsetWidth,
  293.               this.video_.offsetHeight, viewMode);
  294.         });
  295.         this.resizeObserver_.observe(this.video_);
  296.       } else {
  297.         this.eventManager_.listen(document, 'fullscreenchange', () => {
  298.           const viewMode = this.isFullScreenEnabled_() ?
  299.               google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  300.           this.imaAdsManager_.resize(this.video_.offsetWidth,
  301.               this.video_.offsetHeight, viewMode);
  302.         });
  303.       }
  305.       // Single video and overlay ads will start at this time
  306.       // TODO (ismena): Need a better inderstanding of what this does.
  307.       // The docs say it's called to 'start playing the ads,' but I haven't
  308.       // seen the ads actually play until requestAds() is called.
  309.       // Note: We listen for a play event to avoid autoplay issues that might
  310.       // crash IMA.
  311.       if (this.videoPlayed_ || this.config_.skipPlayDetection) {
  312.         this.imaAdsManager_.start();
  313.       } else {
  314.         this.eventManager_.listenOnce(this.video_, 'play', () => {
  315.           this.videoPlayed_ = true;
  316.           this.imaAdsManager_.start();
  317.         });
  318.       }
  319.     } catch (adError) {
  320.       // If there was a problem with the VAST response,
  321.       // we we won't be getting an ad. Hide ad UI if we showed it already
  322.       // and get back to the presentation.
  323.       this.onAdComplete_(/* adEvent= */ null);
  324.     }
  325.   }
  328.   /**
  329.    * @return {boolean}
  330.    * @private
  331.    */
  332.   isFullScreenEnabled_() {
  333.     if (document.fullscreenEnabled) {
  334.       return !!document.fullscreenElement;
  335.     } else {
  336.       const video = /** @type {HTMLVideoElement} */(this.video_);
  337.       if (video.webkitSupportsFullscreen) {
  338.         return video.webkitDisplayingFullscreen;
  339.       }
  340.     }
  341.     return false;
  342.   }
  345.   /**
  346.    * @private
  347.    */
  348.   addImaEventListeners_() {
  349.     /**
  350.      * @param {!Event} e
  351.      * @param {string} type
  352.      */
  353.     const convertEventAndSend = (e, type) => {
  354.       const data = (new Map()).set('originalEvent', e);
  355.       this.onEvent_(new shaka.util.FakeEvent(type, data));
  356.     };
  358.     this.eventManager_.listen(this.imaAdsManager_,
  359.         google.ima.AdErrorEvent.Type.AD_ERROR, (error) => {
  360.           this.onAdError_(/** @type {!google.ima.AdErrorEvent} */ (error));
  361.         });
  363.     this.eventManager_.listen(this.imaAdsManager_,
  364.         google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, (e) => {
  365.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  366.         });
  368.     this.eventManager_.listen(this.imaAdsManager_,
  369.         google.ima.AdEvent.Type.STARTED, (e) => {
  370.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  371.         });
  373.     this.eventManager_.listen(this.imaAdsManager_,
  374.         google.ima.AdEvent.Type.FIRST_QUARTILE, (e) => {
  375.           convertEventAndSend(e, shaka.ads.Utils.AD_FIRST_QUARTILE);
  376.         });
  378.     this.eventManager_.listen(this.imaAdsManager_,
  379.         google.ima.AdEvent.Type.MIDPOINT, (e) => {
  380.           convertEventAndSend(e, shaka.ads.Utils.AD_MIDPOINT);
  381.         });
  383.     this.eventManager_.listen(this.imaAdsManager_,
  384.         google.ima.AdEvent.Type.THIRD_QUARTILE, (e) => {
  385.           convertEventAndSend(e, shaka.ads.Utils.AD_THIRD_QUARTILE);
  386.         });
  388.     this.eventManager_.listen(this.imaAdsManager_,
  389.         google.ima.AdEvent.Type.COMPLETE, (e) => {
  390.           convertEventAndSend(e, shaka.ads.Utils.AD_COMPLETE);
  391.         });
  393.     this.eventManager_.listen(this.imaAdsManager_,
  394.         google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, (e) => {
  395.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  396.         });
  398.     this.eventManager_.listen(this.imaAdsManager_,
  399.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  400.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  401.         });
  403.     this.eventManager_.listen(this.imaAdsManager_,
  404.         google.ima.AdEvent.Type.SKIPPED, (e) => {
  405.           convertEventAndSend(e, shaka.ads.Utils.AD_SKIPPED);
  406.         });
  408.     this.eventManager_.listen(this.imaAdsManager_,
  409.         google.ima.AdEvent.Type.VOLUME_CHANGED, (e) => {
  410.           convertEventAndSend(e, shaka.ads.Utils.AD_VOLUME_CHANGED);
  411.         });
  413.     this.eventManager_.listen(this.imaAdsManager_,
  414.         google.ima.AdEvent.Type.VOLUME_MUTED, (e) => {
  415.           convertEventAndSend(e, shaka.ads.Utils.AD_MUTED);
  416.         });
  418.     this.eventManager_.listen(this.imaAdsManager_,
  419.         google.ima.AdEvent.Type.PAUSED, (e) => {
  420.           if (this.ad_) {
  421.             this.ad_.setPaused(true);
  422.             convertEventAndSend(e, shaka.ads.Utils.AD_PAUSED);
  423.           }
  424.         });
  426.     this.eventManager_.listen(this.imaAdsManager_,
  427.         google.ima.AdEvent.Type.RESUMED, (e) => {
  428.           if (this.ad_) {
  429.             this.ad_.setPaused(false);
  430.             convertEventAndSend(e, shaka.ads.Utils.AD_RESUMED);
  431.           }
  432.         });
  434.     this.eventManager_.listen(this.imaAdsManager_,
  435.         google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, (e) => {
  436.           if (this.ad_) {
  437.             convertEventAndSend(e, shaka.ads.Utils.AD_SKIP_STATE_CHANGED);
  438.           }
  439.         });
  441.     this.eventManager_.listen(this.imaAdsManager_,
  442.         google.ima.AdEvent.Type.CLICK, (e) => {
  443.           convertEventAndSend(e, shaka.ads.Utils.AD_CLICKED);
  444.         });
  446.     this.eventManager_.listen(this.imaAdsManager_,
  447.         google.ima.AdEvent.Type.AD_PROGRESS, (e) => {
  448.           convertEventAndSend(e, shaka.ads.Utils.AD_PROGRESS);
  449.         });
  451.     this.eventManager_.listen(this.imaAdsManager_,
  452.         google.ima.AdEvent.Type.AD_BUFFERING, (e) => {
  453.           convertEventAndSend(e, shaka.ads.Utils.AD_BUFFERING);
  454.         });
  456.     this.eventManager_.listen(this.imaAdsManager_,
  457.         google.ima.AdEvent.Type.IMPRESSION, (e) => {
  458.           convertEventAndSend(e, shaka.ads.Utils.AD_IMPRESSION);
  459.         });
  461.     this.eventManager_.listen(this.imaAdsManager_,
  462.         google.ima.AdEvent.Type.DURATION_CHANGE, (e) => {
  463.           convertEventAndSend(e, shaka.ads.Utils.AD_DURATION_CHANGED);
  464.         });
  466.     this.eventManager_.listen(this.imaAdsManager_,
  467.         google.ima.AdEvent.Type.USER_CLOSE, (e) => {
  468.           convertEventAndSend(e, shaka.ads.Utils.AD_CLOSED);
  469.         });
  471.     this.eventManager_.listen(this.imaAdsManager_,
  472.         google.ima.AdEvent.Type.LOADED, (e) => {
  473.           convertEventAndSend(e, shaka.ads.Utils.AD_LOADED);
  474.         });
  476.     this.eventManager_.listen(this.imaAdsManager_,
  477.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  478.           convertEventAndSend(e, shaka.ads.Utils.ALL_ADS_COMPLETED);
  479.         });
  481.     this.eventManager_.listen(this.imaAdsManager_,
  482.         google.ima.AdEvent.Type.LINEAR_CHANGED, (e) => {
  483.           convertEventAndSend(e, shaka.ads.Utils.AD_LINEAR_CHANGED);
  484.         });
  486.     this.eventManager_.listen(this.imaAdsManager_,
  487.         google.ima.AdEvent.Type.AD_METADATA, (e) => {
  488.           convertEventAndSend(e, shaka.ads.Utils.AD_METADATA);
  489.         });
  491.     this.eventManager_.listen(this.imaAdsManager_,
  492.         google.ima.AdEvent.Type.LOG, (e) => {
  493.           convertEventAndSend(e, shaka.ads.Utils.AD_RECOVERABLE_ERROR);
  494.         });
  496.     this.eventManager_.listen(this.imaAdsManager_,
  497.         google.ima.AdEvent.Type.AD_BREAK_READY, (e) => {
  498.           convertEventAndSend(e, shaka.ads.Utils.AD_BREAK_READY);
  499.         });
  501.     this.eventManager_.listen(this.imaAdsManager_,
  502.         google.ima.AdEvent.Type.INTERACTION, (e) => {
  503.           convertEventAndSend(e, shaka.ads.Utils.AD_INTERACTION);
  504.         });
  505.   }
  507.   /**
  508.    * @param {!google.ima.AdEvent} e
  509.    * @private
  510.    */
  511.   onAdStart_(e) {
  512.     goog.asserts.assert(this.imaAdsManager_,
  513.         'Should have an ads manager at this point!');
  515.     const imaAd = e.getAd();
  516.     if (!imaAd) {
  517.       // Sometimes the IMA SDK will fire a CONTENT_PAUSE_REQUESTED or STARTED
  518.       // event with no associated ad object.
  519.       // We can't really play an ad in that situation, so just ignore the event.
  520.       shaka.log.alwaysWarn(
  521.           'The IMA SDK fired a ' + e.type + ' event with no associated ad. ' +
  522.           'Unable to play ad!');
  523.       return;
  524.     }
  526.     this.ad_ = new shaka.ads.ClientSideAd(imaAd,
  527.         this.imaAdsManager_, this.video_);
  528.     if (e.type == google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED &&
  529.         !this.config_.supportsMultipleMediaElements ) {
  530.       this.onEvent_(new shaka.util.FakeEvent(
  531.           shaka.ads.Utils.AD_CONTENT_PAUSE_REQUESTED));
  532.     }
  533.     const data = new Map()
  534.         .set('ad', this.ad_)
  535.         .set('sdkAdObject', imaAd)
  536.         .set('originalEvent', e);
  537.     this.onEvent_(new shaka.util.FakeEvent(
  538.         shaka.ads.Utils.AD_STARTED, data));
  539.     if (this.ad_.isLinear()) {
  540.       this.adContainer_.setAttribute('ad-active', 'true');
  541.       if (!this.config_.customPlayheadTracker) {
  542.         this.video_.pause();
  543.       }
  544.       if (this.video_.muted) {
  545.         this.ad_.setInitialMuted(this.video_.volume);
  546.       } else {
  547.         this.ad_.setVolume(this.video_.volume);
  548.       }
  549.     }
  550.   }
  552.   /**
  553.    * @param {?google.ima.AdEvent} e
  554.    * @private
  555.    */
  556.   onAdComplete_(e) {
  557.     if (e && e.type == google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED &&
  558.         !this.config_.supportsMultipleMediaElements) {
  559.       this.onEvent_(new shaka.util.FakeEvent(
  560.           shaka.ads.Utils.AD_CONTENT_RESUME_REQUESTED));
  561.     }
  562.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.Utils.AD_STOPPED,
  563.         (new Map()).set('originalEvent', e)));
  564.     if (this.ad_ && this.ad_.isLinear()) {
  565.       this.adContainer_.removeAttribute('ad-active');
  566.       if (!this.config_.customPlayheadTracker && !this.video_.ended) {
  567.         this.video_.play();
  568.       }
  569.     }
  570.   }
  571. };