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