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');
  18. /**
  19.  * A class responsible for client-side ad interactions.
  20.  */
  21. shaka.ads.ClientSideAdManager = class {
  22.   /**
  23.    * @param {HTMLElement} adContainer
  24.    * @param {HTMLMediaElement} video
  25.    * @param {string} locale
  26.    * @param {function(!shaka.util.FakeEvent)} onEvent
  27.    */
  28.   constructor(adContainer, video, locale, onEvent) {
  29.     /** @private {HTMLElement} */
  30.     this.adContainer_ = adContainer;
  32.     /** @private {HTMLMediaElement} */
  33.     this.video_ = video;
  35.     /** @private {number} */
  36.     this.requestAdsStartTime_ = NaN;
  38.     /** @private {function(!shaka.util.FakeEvent)} */
  39.     this.onEvent_ = onEvent;
  41.     /** @private {shaka.ads.ClientSideAd} */
  42.     this.ad_ = null;
  44.     /** @private {shaka.util.EventManager} */
  45.     this.eventManager_ = new shaka.util.EventManager();
  47.     google.ima.settings.setLocale(locale);
  49.     const adDisplayContainer = new google.ima.AdDisplayContainer(
  50.         this.adContainer_,
  51.         this.video_);
  53.     // TODO: IMA: Must be done as the result of a user action on mobile
  54.     adDisplayContainer.initialize();
  56.     // IMA: This instance should be re-used for the entire lifecycle of
  57.     // the page.
  58.     this.adsLoader_ = new google.ima.AdsLoader(adDisplayContainer);
  60.     this.adsLoader_.getSettings().setPlayerType('shaka-player');
  61.     this.adsLoader_.getSettings().setPlayerVersion(shaka.Player.version);
  63.     /** @private {google.ima.AdsManager} */
  64.     this.imaAdsManager_ = null;
  66.     this.eventManager_.listenOnce(this.adsLoader_,
  67.         google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, (e) => {
  68.           this.onAdsManagerLoaded_(
  69.               /** @type {!google.ima.AdsManagerLoadedEvent} */ (e));
  70.         });
  72.     this.eventManager_.listen(this.adsLoader_,
  73.         google.ima.AdErrorEvent.Type.AD_ERROR, (e) => {
  74.           this.onAdError_( /** @type {!google.ima.AdErrorEvent} */ (e));
  75.         });
  77.     // Notify the SDK when the video has ended, so it can play post-roll ads.
  78.     this.video_.onended = () => {
  79.       this.adsLoader_.contentComplete();
  80.     };
  81.   }
  83.   /**
  84.    * @param {!google.ima.AdsRequest} imaRequest
  85.    */
  86.   requestAds(imaRequest) {
  87.     goog.asserts.assert(
  88.         imaRequest.adTagUrl || imaRequest.adsResponse,
  89.         'The ad tag needs to be set up before requesting ads, ' +
  90.           'or adsResponse must be filled.');
  91.     this.requestAdsStartTime_ = Date.now() / 1000;
  92.     this.adsLoader_.requestAds(imaRequest);
  93.   }
  95.   /**
  96.    * Stop all currently playing ads.
  97.    */
  98.   stop() {
  99.     // this.imaAdsManager_ might not be set yet... if, for example, an ad
  100.     // blocker prevented the ads from ever loading.
  101.     if (this.imaAdsManager_) {
  102.       this.imaAdsManager_.stop();
  103.     }
  104.     if (this.adContainer_) {
  105.       shaka.util.Dom.removeAllChildren(this.adContainer_);
  106.     }
  107.   }
  109.   /**
  110.    * @param {!google.ima.AdErrorEvent} e
  111.    * @private
  112.    */
  113.   onAdError_(e) {
  114.     shaka.log.warning(
  115.         'There was an ad error from the IMA SDK: ' + e.getError());
  116.     shaka.log.warning('Resuming playback.');
  117.     this.onAdComplete_(/* adEvent= */ null);
  118.     // Remove ad breaks from the timeline
  119.     this.onEvent_(
  120.         new shaka.util.FakeEvent(shaka.ads.AdManager.CUEPOINTS_CHANGED,
  121.             {'cuepoints': []}));
  122.   }
  125.   /**
  126.    * @param {!google.ima.AdsManagerLoadedEvent} e
  127.    * @private
  128.    */
  129.   onAdsManagerLoaded_(e) {
  130.     goog.asserts.assert(this.video_ != null, 'Video should not be null!');
  132.     const now = Date.now() / 1000;
  133.     const loadTime = now - this.requestAdsStartTime_;
  134.     this.onEvent_(
  135.         new shaka.util.FakeEvent(shaka.ads.AdManager.ADS_LOADED,
  136.             {'loadTime': loadTime}));
  138.     this.imaAdsManager_ = e.getAdsManager(this.video_);
  140.     this.onEvent_(new shaka.util.FakeEvent(
  141.         shaka.ads.AdManager.IMA_AD_MANAGER_LOADED,
  142.         {
  143.           'imaAdManager': this.imaAdsManager_,
  144.         }));
  146.     const cuePointStarts = this.imaAdsManager_.getCuePoints();
  147.     if (cuePointStarts.length) {
  148.       /** @type {!Array.<!shaka.ads.CuePoint>} */
  149.       const cuePoints = [];
  150.       for (const start of cuePointStarts) {
  151.         const shakaCuePoint = new shaka.ads.CuePoint(start);
  152.         cuePoints.push(shakaCuePoint);
  153.       }
  155.       this.onEvent_(
  156.           new shaka.util.FakeEvent(shaka.ads.AdManager.CUEPOINTS_CHANGED,
  157.               {'cuepoints': cuePoints}));
  158.     }
  160.     this.addImaEventListeners_();
  162.     try {
  163.       const viewMode = document.fullscreenElement ?
  164.           google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  166.       this.imaAdsManager_.init(this.video_.offsetWidth,
  167.           this.video_.offsetHeight, viewMode);
  169.       // Wait on the 'loadeddata' event rather than the 'loadedmetadata' event
  170.       // because 'loadedmetadata' is sometimes called before the video resizes
  171.       // on some platforms (e.g. Safari).
  172.       this.eventManager_.listen(this.video_, 'loadeddata', () => {
  173.         const viewMode = document.fullscreenElement ?
  174.             google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  175.         this.imaAdsManager_.resize(this.video_.offsetWidth,
  176.             this.video_.offsetHeight, viewMode);
  177.       });
  179.       // Single video and overlay ads will start at this time
  180.       // TODO (ismena): Need a better inderstanding of what this does.
  181.       // The docs say it's called to 'start playing the ads,' but I haven't
  182.       // seen the ads actually play until requestAds() is called.
  183.       this.imaAdsManager_.start();
  184.     } catch (adError) {
  185.       // If there was a problem with the VAST response,
  186.       // we we won't be getting an ad. Hide ad UI if we showed it already
  187.       // and get back to the presentation.
  188.       this.onAdComplete_(/* adEvent= */ null);
  189.     }
  190.   }
  193.   /**
  194.    * @private
  195.    */
  196.   addImaEventListeners_() {
  197.     this.eventManager_.listen(this.imaAdsManager_,
  198.         google.ima.AdErrorEvent.Type.AD_ERROR, (error) => {
  199.           this.onAdError_(/** @type {!google.ima.AdErrorEvent} */ (error));
  200.         });
  202.     this.eventManager_.listen(this.imaAdsManager_,
  203.         google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, (e) => {
  204.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  205.         });
  207.     this.eventManager_.listen(this.imaAdsManager_,
  208.         google.ima.AdEvent.Type.STARTED, (e) => {
  209.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  210.         });
  212.     this.eventManager_.listen(this.imaAdsManager_,
  213.         google.ima.AdEvent.Type.FIRST_QUARTILE, (e) => {
  214.           this.onEvent_(
  215.               new shaka.util.FakeEvent(shaka.ads.AdManager.AD_FIRST_QUARTILE,
  216.                   {'originalEvent': e}));
  217.         });
  219.     this.eventManager_.listen(this.imaAdsManager_,
  220.         google.ima.AdEvent.Type.MIDPOINT, (e) => {
  221.           this.onEvent_(
  222.               new shaka.util.FakeEvent(shaka.ads.AdManager.AD_MIDPOINT,
  223.                   {'originalEvent': e}));
  224.         });
  226.     this.eventManager_.listen(this.imaAdsManager_,
  227.         google.ima.AdEvent.Type.THIRD_QUARTILE, (e) => {
  228.           this.onEvent_(
  229.               new shaka.util.FakeEvent(shaka.ads.AdManager.AD_THIRD_QUARTILE,
  230.                   {'originalEvent': e}));
  231.         });
  233.     this.eventManager_.listen(this.imaAdsManager_,
  234.         google.ima.AdEvent.Type.COMPLETE, (e) => {
  235.           this.onEvent_(
  236.               new shaka.util.FakeEvent(shaka.ads.AdManager.AD_COMPLETE,
  237.                   {'originalEvent': e}));
  238.         });
  240.     this.eventManager_.listen(this.imaAdsManager_,
  241.         google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, (e) => {
  242.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  243.         });
  245.     this.eventManager_.listen(this.imaAdsManager_,
  246.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  247.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  248.         });
  250.     this.eventManager_.listen(this.imaAdsManager_,
  251.         google.ima.AdEvent.Type.SKIPPED, (e) => {
  252.           this.onEvent_(
  253.               new shaka.util.FakeEvent(shaka.ads.AdManager.AD_SKIPPED,
  254.                   {'originalEvent': e}));
  255.         });
  257.     this.eventManager_.listen(this.imaAdsManager_,
  258.         google.ima.AdEvent.Type.VOLUME_CHANGED, (e) => {
  259.           this.onEvent_(
  260.               new shaka.util.FakeEvent(shaka.ads.AdManager.AD_VOLUME_CHANGED,
  261.                   {'originalEvent': e}));
  262.         });
  264.     this.eventManager_.listen(this.imaAdsManager_,
  265.         google.ima.AdEvent.Type.VOLUME_MUTED, (e) => {
  266.           this.onEvent_(
  267.               new shaka.util.FakeEvent(shaka.ads.AdManager.AD_MUTED,
  268.                   {'originalEvent': e}));
  269.         });
  271.     this.eventManager_.listen(this.imaAdsManager_,
  272.         google.ima.AdEvent.Type.PAUSED, (e) => {
  273.           goog.asserts.assert(this.ad_ != null, 'Ad should not be null!');
  274.           this.ad_.setPaused(true);
  275.           this.onEvent_(
  276.               new shaka.util.FakeEvent(shaka.ads.AdManager.AD_PAUSED,
  277.                   {'originalEvent': e}));
  278.         });
  280.     this.eventManager_.listen(this.imaAdsManager_,
  281.         google.ima.AdEvent.Type.RESUMED, (e) => {
  282.           goog.asserts.assert(this.ad_ != null, 'Ad should not be null!');
  283.           this.ad_.setPaused(false);
  284.           this.onEvent_(
  285.               new shaka.util.FakeEvent(shaka.ads.AdManager.AD_RESUMED,
  286.                   {'originalEvent': e}));
  287.         });
  289.     this.eventManager_.listen(this.imaAdsManager_,
  290.         google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, (e) => {
  291.           goog.asserts.assert(this.ad_ != null, 'Ad should not be null!');
  292.           this.onEvent_(new shaka.util.FakeEvent(
  293.               shaka.ads.AdManager.AD_SKIP_STATE_CHANGED,
  294.               {'originalEvent': e}));
  295.         });
  297.     this.eventManager_.listen(this.imaAdsManager_,
  298.         google.ima.AdEvent.Type.CLICK, (e) => {
  299.           this.onEvent_(new shaka.util.FakeEvent(
  300.               shaka.ads.AdManager.AD_CLICKED,
  301.               {'originalEvent': e}));
  302.         });
  304.     this.eventManager_.listen(this.imaAdsManager_,
  305.         google.ima.AdEvent.Type.AD_PROGRESS, (e) => {
  306.           this.onEvent_(new shaka.util.FakeEvent(
  307.               shaka.ads.AdManager.AD_PROGRESS,
  308.               {'originalEvent': e}));
  309.         });
  311.     this.eventManager_.listen(this.imaAdsManager_,
  312.         google.ima.AdEvent.Type.AD_BUFFERING, (e) => {
  313.           this.onEvent_(new shaka.util.FakeEvent(
  314.               shaka.ads.AdManager.AD_BUFFERING,
  315.               {'originalEvent': e}));
  316.         });
  318.     this.eventManager_.listen(this.imaAdsManager_,
  319.         google.ima.AdEvent.Type.IMPRESSION, (e) => {
  320.           this.onEvent_(new shaka.util.FakeEvent(
  321.               shaka.ads.AdManager.AD_IMPRESSION,
  322.               {'originalEvent': e}));
  323.         });
  325.     this.eventManager_.listen(this.imaAdsManager_,
  326.         google.ima.AdEvent.Type.DURATION_CHANGE, (e) => {
  327.           this.onEvent_(new shaka.util.FakeEvent(
  328.               shaka.ads.AdManager.AD_DURATION_CHANGED,
  329.               {'originalEvent': e}));
  330.         });
  332.     this.eventManager_.listen(this.imaAdsManager_,
  333.         google.ima.AdEvent.Type.USER_CLOSE, (e) => {
  334.           this.onEvent_(new shaka.util.FakeEvent(
  335.               shaka.ads.AdManager.AD_CLOSED,
  336.               {'originalEvent': e}));
  337.         });
  339.     this.eventManager_.listen(this.imaAdsManager_,
  340.         google.ima.AdEvent.Type.LOADED, (e) => {
  341.           this.onEvent_(new shaka.util.FakeEvent(
  342.               shaka.ads.AdManager.AD_LOADED,
  343.               {'originalEvent': e}));
  344.         });
  346.     this.eventManager_.listen(this.imaAdsManager_,
  347.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  348.           this.onEvent_(new shaka.util.FakeEvent(
  349.               shaka.ads.AdManager.ALL_ADS_COMPLETED,
  350.               {'originalEvent': e}));
  351.         });
  353.     this.eventManager_.listen(this.imaAdsManager_,
  354.         google.ima.AdEvent.Type.LINEAR_CHANGED, (e) => {
  355.           this.onEvent_(new shaka.util.FakeEvent(
  356.               shaka.ads.AdManager.AD_LINEAR_CHANGED,
  357.               {'originalEvent': e}));
  358.         });
  360.     this.eventManager_.listen(this.imaAdsManager_,
  361.         google.ima.AdEvent.Type.AD_METADATA, (e) => {
  362.           this.onEvent_(new shaka.util.FakeEvent(
  363.               shaka.ads.AdManager.AD_METADATA,
  364.               {'originalEvent': e}));
  365.         });
  367.     this.eventManager_.listen(this.imaAdsManager_,
  368.         google.ima.AdEvent.Type.LOG, (e) => {
  369.           this.onEvent_(new shaka.util.FakeEvent(
  370.               shaka.ads.AdManager.AD_RECOVERABLE_ERROR,
  371.               {'originalEvent': e}));
  372.         });
  374.     this.eventManager_.listen(this.imaAdsManager_,
  375.         google.ima.AdEvent.Type.AD_BREAK_READY, (e) => {
  376.           this.onEvent_(new shaka.util.FakeEvent(
  377.               shaka.ads.AdManager.AD_BREAK_READY,
  378.               {'originalEvent': e}));
  379.         });
  381.     this.eventManager_.listen(this.imaAdsManager_,
  382.         google.ima.AdEvent.Type.INTERACTION, (e) => {
  383.           this.onEvent_(new shaka.util.FakeEvent(
  384.               shaka.ads.AdManager.AD_INTERACTION,
  385.               {'originalEvent': e}));
  386.         });
  387.   }
  389.   /**
  390.    * @param {!google.ima.AdEvent} e
  391.    * @private
  392.    */
  393.   onAdStart_(e) {
  394.     goog.asserts.assert(this.imaAdsManager_,
  395.         'Should have an ads manager at this point!');
  397.     const imaAd = e.getAd();
  398.     this.ad_ = new shaka.ads.ClientSideAd(imaAd, this.imaAdsManager_);
  399.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STARTED,
  400.         {
  401.           'ad': this.ad_,
  402.           'sdkAdObject': imaAd,
  403.           'originalEvent': e,
  404.         }));
  405.     this.adContainer_.setAttribute('ad-active', 'true');
  406.     this.video_.pause();
  407.   }
  409.   /**
  410.    * @param {?google.ima.AdEvent} e
  411.    * @private
  412.    */
  413.   onAdComplete_(e) {
  414.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED,
  415.         {'originalEvent': e}));
  416.     this.adContainer_.removeAttribute('ad-active');
  417.     this.video_.play();
  418.   }
  419. };