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.  */
  7. /**
  8.  * @fileoverview
  9.  * @suppress {missingRequire} TODO(b/152540451): this shouldn't be needed
  10.  */
  12. goog.provide('shaka.ads.ClientSideAdManager');
  14. goog.require('goog.asserts');
  15. goog.require('shaka.ads.ClientSideAd');
  16. goog.require('shaka.util.IReleasable');
  18. /**
  19.  * A class responsible for client-side ad interactions.
  20.  * @implements {shaka.util.IReleasable}
  21.  */
  22. shaka.ads.ClientSideAdManager = class {
  23.   /**
  24.    * @param {HTMLElement} adContainer
  25.    * @param {HTMLMediaElement} video
  26.    * @param {string} locale
  27.    * @param {function(!shaka.util.FakeEvent)} onEvent
  28.    */
  29.   constructor(adContainer, video, locale, onEvent) {
  30.     /** @private {HTMLElement} */
  31.     this.adContainer_ = adContainer;
  33.     /** @private {HTMLMediaElement} */
  34.     this.video_ = video;
  36.     /** @private {ResizeObserver} */
  37.     this.resizeObserver_ = null;
  39.     /** @private {number} */
  40.     this.requestAdsStartTime_ = NaN;
  42.     /** @private {function(!shaka.util.FakeEvent)} */
  43.     this.onEvent_ = onEvent;
  45.     /** @private {shaka.ads.ClientSideAd} */
  46.     this.ad_ = null;
  48.     /** @private {shaka.util.EventManager} */
  49.     this.eventManager_ = new shaka.util.EventManager();
  51.     google.ima.settings.setLocale(locale);
  53.     const adDisplayContainer = new google.ima.AdDisplayContainer(
  54.         this.adContainer_,
  55.         this.video_);
  57.     // TODO: IMA: Must be done as the result of a user action on mobile
  58.     adDisplayContainer.initialize();
  60.     // IMA: This instance should be re-used for the entire lifecycle of
  61.     // the page.
  62.     this.adsLoader_ = new google.ima.AdsLoader(adDisplayContainer);
  64.     this.adsLoader_.getSettings().setPlayerType('shaka-player');
  65.     this.adsLoader_.getSettings().setPlayerVersion(shaka.Player.version);
  67.     /** @private {google.ima.AdsManager} */
  68.     this.imaAdsManager_ = null;
  70.     this.eventManager_.listenOnce(this.adsLoader_,
  71.         google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, (e) => {
  72.           this.onAdsManagerLoaded_(
  73.               /** @type {!google.ima.AdsManagerLoadedEvent} */ (e));
  74.         });
  76.     this.eventManager_.listen(this.adsLoader_,
  77.         google.ima.AdErrorEvent.Type.AD_ERROR, (e) => {
  78.           this.onAdError_( /** @type {!google.ima.AdErrorEvent} */ (e));
  79.         });
  81.     // Notify the SDK when the video has ended, so it can play post-roll ads.
  82.     this.eventManager_.listen(this.video_, 'ended', () => {
  83.       this.adsLoader_.contentComplete();
  84.     });
  85.   }
  87.   /**
  88.    * @param {!google.ima.AdsRequest} imaRequest
  89.    */
  90.   requestAds(imaRequest) {
  91.     goog.asserts.assert(
  92.         imaRequest.adTagUrl || imaRequest.adsResponse,
  93.         'The ad tag needs to be set up before requesting ads, ' +
  94.           'or adsResponse must be filled.');
  95.     this.requestAdsStartTime_ = Date.now() / 1000;
  96.     this.adsLoader_.requestAds(imaRequest);
  97.   }
  99.   /**
  100.    * Stop all currently playing ads.
  101.    */
  102.   stop() {
  103.     // this.imaAdsManager_ might not be set yet... if, for example, an ad
  104.     // blocker prevented the ads from ever loading.
  105.     if (this.imaAdsManager_) {
  106.       this.imaAdsManager_.stop();
  107.     }
  108.     if (this.adContainer_) {
  109.       shaka.util.Dom.removeAllChildren(this.adContainer_);
  110.     }
  111.   }
  113.   /** @override */
  114.   release() {
  115.     this.stop();
  116.     if (this.resizeObserver_) {
  117.       this.resizeObserver_.disconnect();
  118.     }
  119.     if (this.eventManager_) {
  120.       this.eventManager_.release();
  121.     }
  122.     if (this.imaAdsManager_) {
  123.       this.imaAdsManager_.destroy();
  124.     }
  125.     this.adsLoader_.destroy();
  126.   }
  128.   /**
  129.    * @param {!google.ima.AdErrorEvent} e
  130.    * @private
  131.    */
  132.   onAdError_(e) {
  133.     shaka.log.warning(
  134.         'There was an ad error from the IMA SDK: ' + e.getError());
  135.     shaka.log.warning('Resuming playback.');
  136.     this.onAdComplete_(/* adEvent= */ null);
  137.     // Remove ad breaks from the timeline
  138.     this.onEvent_(
  139.         new shaka.util.FakeEvent(shaka.ads.AdManager.CUEPOINTS_CHANGED,
  140.             (new Map()).set('cuepoints', [])));
  141.   }
  144.   /**
  145.    * @param {!google.ima.AdsManagerLoadedEvent} e
  146.    * @private
  147.    */
  148.   onAdsManagerLoaded_(e) {
  149.     goog.asserts.assert(this.video_ != null, 'Video should not be null!');
  151.     const now = Date.now() / 1000;
  152.     const loadTime = now - this.requestAdsStartTime_;
  153.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.ADS_LOADED,
  154.         (new Map()).set('loadTime', loadTime)));
  156.     this.imaAdsManager_ = e.getAdsManager(this.video_);
  158.     this.onEvent_(new shaka.util.FakeEvent(
  159.         shaka.ads.AdManager.IMA_AD_MANAGER_LOADED,
  160.         (new Map()).set('imaAdManager', this.imaAdsManager_)));
  162.     const cuePointStarts = this.imaAdsManager_.getCuePoints();
  163.     if (cuePointStarts.length) {
  164.       /** @type {!Array.<!shaka.extern.AdCuePoint>} */
  165.       const cuePoints = [];
  166.       for (const start of cuePointStarts) {
  167.         /** @type {shaka.extern.AdCuePoint} */
  168.         const shakaCuePoint = {
  169.           start: start,
  170.           end: null,
  171.         };
  172.         cuePoints.push(shakaCuePoint);
  173.       }
  175.       this.onEvent_(new shaka.util.FakeEvent(
  176.           shaka.ads.AdManager.CUEPOINTS_CHANGED,
  177.           (new Map()).set('cuepoints', cuePoints)));
  178.     }
  180.     this.addImaEventListeners_();
  182.     try {
  183.       const viewMode = document.fullscreenElement ?
  184.           google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  186.       this.imaAdsManager_.init(this.video_.offsetWidth,
  187.           this.video_.offsetHeight, viewMode);
  189.       // Wait on the 'loadeddata' event rather than the 'loadedmetadata' event
  190.       // because 'loadedmetadata' is sometimes called before the video resizes
  191.       // on some platforms (e.g. Safari).
  192.       this.eventManager_.listen(this.video_, 'loadeddata', () => {
  193.         const viewMode = document.fullscreenElement ?
  194.             google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  195.         this.imaAdsManager_.resize(this.video_.offsetWidth,
  196.             this.video_.offsetHeight, viewMode);
  197.       });
  199.       if ('ResizeObserver' in window) {
  200.         this.resizeObserver_ = new ResizeObserver(() => {
  201.           const viewMode = document.fullscreenElement ?
  202.               google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  203.           this.imaAdsManager_.resize(this.video_.offsetWidth,
  204.               this.video_.offsetHeight, viewMode);
  205.         });
  206.         this.resizeObserver_.observe(this.video_);
  207.       }
  209.       // Single video and overlay ads will start at this time
  210.       // TODO (ismena): Need a better inderstanding of what this does.
  211.       // The docs say it's called to 'start playing the ads,' but I haven't
  212.       // seen the ads actually play until requestAds() is called.
  213.       // Note: We listen for a play event to avoid autoplay issues that might
  214.       // crash IMA.
  215.       this.eventManager_.listenOnce(this.video_, 'play', () => {
  216.         this.imaAdsManager_.start();
  217.       });
  218.     } catch (adError) {
  219.       // If there was a problem with the VAST response,
  220.       // we we won't be getting an ad. Hide ad UI if we showed it already
  221.       // and get back to the presentation.
  222.       this.onAdComplete_(/* adEvent= */ null);
  223.     }
  224.   }
  227.   /**
  228.    * @private
  229.    */
  230.   addImaEventListeners_() {
  231.     /**
  232.      * @param {!Event} e
  233.      * @param {string} type
  234.      */
  235.     const convertEventAndSend = (e, type) => {
  236.       const data = (new Map()).set('originalEvent', e);
  237.       this.onEvent_(new shaka.util.FakeEvent(type, data));
  238.     };
  240.     this.eventManager_.listen(this.imaAdsManager_,
  241.         google.ima.AdErrorEvent.Type.AD_ERROR, (error) => {
  242.           this.onAdError_(/** @type {!google.ima.AdErrorEvent} */ (error));
  243.         });
  245.     this.eventManager_.listen(this.imaAdsManager_,
  246.         google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, (e) => {
  247.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  248.         });
  250.     this.eventManager_.listen(this.imaAdsManager_,
  251.         google.ima.AdEvent.Type.STARTED, (e) => {
  252.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  253.         });
  255.     this.eventManager_.listen(this.imaAdsManager_,
  256.         google.ima.AdEvent.Type.FIRST_QUARTILE, (e) => {
  257.           convertEventAndSend(e, shaka.ads.AdManager.AD_FIRST_QUARTILE);
  258.         });
  260.     this.eventManager_.listen(this.imaAdsManager_,
  261.         google.ima.AdEvent.Type.MIDPOINT, (e) => {
  262.           convertEventAndSend(e, shaka.ads.AdManager.AD_MIDPOINT);
  263.         });
  265.     this.eventManager_.listen(this.imaAdsManager_,
  266.         google.ima.AdEvent.Type.THIRD_QUARTILE, (e) => {
  267.           convertEventAndSend(e, shaka.ads.AdManager.AD_THIRD_QUARTILE);
  268.         });
  270.     this.eventManager_.listen(this.imaAdsManager_,
  271.         google.ima.AdEvent.Type.COMPLETE, (e) => {
  272.           convertEventAndSend(e, shaka.ads.AdManager.AD_COMPLETE);
  273.         });
  275.     this.eventManager_.listen(this.imaAdsManager_,
  276.         google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, (e) => {
  277.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  278.         });
  280.     this.eventManager_.listen(this.imaAdsManager_,
  281.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  282.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  283.         });
  285.     this.eventManager_.listen(this.imaAdsManager_,
  286.         google.ima.AdEvent.Type.SKIPPED, (e) => {
  287.           convertEventAndSend(e, shaka.ads.AdManager.AD_SKIPPED);
  288.         });
  290.     this.eventManager_.listen(this.imaAdsManager_,
  291.         google.ima.AdEvent.Type.VOLUME_CHANGED, (e) => {
  292.           convertEventAndSend(e, shaka.ads.AdManager.AD_VOLUME_CHANGED);
  293.         });
  295.     this.eventManager_.listen(this.imaAdsManager_,
  296.         google.ima.AdEvent.Type.VOLUME_MUTED, (e) => {
  297.           convertEventAndSend(e, shaka.ads.AdManager.AD_MUTED);
  298.         });
  300.     this.eventManager_.listen(this.imaAdsManager_,
  301.         google.ima.AdEvent.Type.PAUSED, (e) => {
  302.           goog.asserts.assert(this.ad_ != null, 'Ad should not be null!');
  303.           this.ad_.setPaused(true);
  304.           convertEventAndSend(e, shaka.ads.AdManager.AD_PAUSED);
  305.         });
  307.     this.eventManager_.listen(this.imaAdsManager_,
  308.         google.ima.AdEvent.Type.RESUMED, (e) => {
  309.           goog.asserts.assert(this.ad_ != null, 'Ad should not be null!');
  310.           this.ad_.setPaused(false);
  311.           convertEventAndSend(e, shaka.ads.AdManager.AD_RESUMED);
  312.         });
  314.     this.eventManager_.listen(this.imaAdsManager_,
  315.         google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, (e) => {
  316.           goog.asserts.assert(this.ad_ != null, 'Ad should not be null!');
  317.           convertEventAndSend(e, shaka.ads.AdManager.AD_SKIP_STATE_CHANGED);
  318.         });
  320.     this.eventManager_.listen(this.imaAdsManager_,
  321.         google.ima.AdEvent.Type.CLICK, (e) => {
  322.           convertEventAndSend(e, shaka.ads.AdManager.AD_CLICKED);
  323.         });
  325.     this.eventManager_.listen(this.imaAdsManager_,
  326.         google.ima.AdEvent.Type.AD_PROGRESS, (e) => {
  327.           convertEventAndSend(e, shaka.ads.AdManager.AD_PROGRESS);
  328.         });
  330.     this.eventManager_.listen(this.imaAdsManager_,
  331.         google.ima.AdEvent.Type.AD_BUFFERING, (e) => {
  332.           convertEventAndSend(e, shaka.ads.AdManager.AD_BUFFERING);
  333.         });
  335.     this.eventManager_.listen(this.imaAdsManager_,
  336.         google.ima.AdEvent.Type.IMPRESSION, (e) => {
  337.           convertEventAndSend(e, shaka.ads.AdManager.AD_IMPRESSION);
  338.         });
  340.     this.eventManager_.listen(this.imaAdsManager_,
  341.         google.ima.AdEvent.Type.DURATION_CHANGE, (e) => {
  342.           convertEventAndSend(e, shaka.ads.AdManager.AD_DURATION_CHANGED);
  343.         });
  345.     this.eventManager_.listen(this.imaAdsManager_,
  346.         google.ima.AdEvent.Type.USER_CLOSE, (e) => {
  347.           convertEventAndSend(e, shaka.ads.AdManager.AD_CLOSED);
  348.         });
  350.     this.eventManager_.listen(this.imaAdsManager_,
  351.         google.ima.AdEvent.Type.LOADED, (e) => {
  352.           convertEventAndSend(e, shaka.ads.AdManager.AD_LOADED);
  353.         });
  355.     this.eventManager_.listen(this.imaAdsManager_,
  356.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  357.           convertEventAndSend(e, shaka.ads.AdManager.ALL_ADS_COMPLETED);
  358.         });
  360.     this.eventManager_.listen(this.imaAdsManager_,
  361.         google.ima.AdEvent.Type.LINEAR_CHANGED, (e) => {
  362.           convertEventAndSend(e, shaka.ads.AdManager.AD_LINEAR_CHANGED);
  363.         });
  365.     this.eventManager_.listen(this.imaAdsManager_,
  366.         google.ima.AdEvent.Type.AD_METADATA, (e) => {
  367.           convertEventAndSend(e, shaka.ads.AdManager.AD_METADATA);
  368.         });
  370.     this.eventManager_.listen(this.imaAdsManager_,
  371.         google.ima.AdEvent.Type.LOG, (e) => {
  372.           convertEventAndSend(e, shaka.ads.AdManager.AD_RECOVERABLE_ERROR);
  373.         });
  375.     this.eventManager_.listen(this.imaAdsManager_,
  376.         google.ima.AdEvent.Type.AD_BREAK_READY, (e) => {
  377.           convertEventAndSend(e, shaka.ads.AdManager.AD_BREAK_READY);
  378.         });
  380.     this.eventManager_.listen(this.imaAdsManager_,
  381.         google.ima.AdEvent.Type.INTERACTION, (e) => {
  382.           convertEventAndSend(e, shaka.ads.AdManager.AD_INTERACTION);
  383.         });
  384.   }
  386.   /**
  387.    * @param {!google.ima.AdEvent} e
  388.    * @private
  389.    */
  390.   onAdStart_(e) {
  391.     goog.asserts.assert(this.imaAdsManager_,
  392.         'Should have an ads manager at this point!');
  394.     const imaAd = e.getAd();
  395.     this.ad_ = new shaka.ads.ClientSideAd(imaAd, this.imaAdsManager_);
  396.     const data = new Map()
  397.         .set('ad', this.ad_)
  398.         .set('sdkAdObject', imaAd)
  399.         .set('originalEvent', e);
  400.     this.onEvent_(new shaka.util.FakeEvent(
  401.         shaka.ads.AdManager.AD_STARTED, data));
  402.     if (this.ad_.isLinear()) {
  403.       this.adContainer_.setAttribute('ad-active', 'true');
  404.       this.video_.pause();
  405.       this.ad_.setVolume(this.video_.volume);
  406.       if (this.video_.muted) {
  407.         this.ad_.setMuted(true);
  408.       }
  409.     }
  410.   }
  412.   /**
  413.    * @param {?google.ima.AdEvent} e
  414.    * @private
  415.    */
  416.   onAdComplete_(e) {
  417.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED,
  418.         (new Map()).set('originalEvent', e)));
  419.     if (this.ad_ && this.ad_.isLinear()) {
  420.       this.adContainer_.removeAttribute('ad-active');
  421.       if (!this.video_.ended) {
  422.         this.video_.play();
  423.       }
  424.     }
  425.   }
  426. };