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.log');
  17. goog.require('shaka.util.Dom');
  18. goog.require('shaka.util.EventManager');
  19. goog.require('shaka.util.FakeEvent');
  20. goog.require('shaka.util.IReleasable');
  22. /**
  23.  * A class responsible for client-side ad interactions.
  24.  * @implements {shaka.util.IReleasable}
  25.  */
  26. shaka.ads.ClientSideAdManager = class {
  27.   /**
  28.    * @param {HTMLElement} adContainer
  29.    * @param {HTMLMediaElement} video
  30.    * @param {string} locale
  31.    * @param {?google.ima.AdsRenderingSettings} adsRenderingSettings
  32.    * @param {function(!shaka.util.FakeEvent)} onEvent
  33.    */
  34.   constructor(adContainer, video, locale, adsRenderingSettings, onEvent) {
  35.     /** @private {HTMLElement} */
  36.     this.adContainer_ = adContainer;
  38.     /** @private {HTMLMediaElement} */
  39.     this.video_ = video;
  41.     /** @private {boolean} */
  42.     this.videoPlayed_ = false;
  44.     /** @private {?shaka.extern.AdsConfiguration} */
  45.     this.config_ = null;
  47.     /** @private {ResizeObserver} */
  48.     this.resizeObserver_ = null;
  50.     /** @private {number} */
  51.     this.requestAdsStartTime_ = NaN;
  53.     /** @private {function(!shaka.util.FakeEvent)} */
  54.     this.onEvent_ = onEvent;
  56.     /** @private {shaka.ads.ClientSideAd} */
  57.     this.ad_ = null;
  59.     /** @private {shaka.util.EventManager} */
  60.     this.eventManager_ = new shaka.util.EventManager();
  62.     google.ima.settings.setLocale(locale);
  64.     google.ima.settings.setDisableCustomPlaybackForIOS10Plus(true);
  66.     const adDisplayContainer = new google.ima.AdDisplayContainer(
  67.         this.adContainer_,
  68.         this.video_);
  70.     // TODO: IMA: Must be done as the result of a user action on mobile
  71.     adDisplayContainer.initialize();
  73.     // IMA: This instance should be re-used for the entire lifecycle of
  74.     // the page.
  75.     this.adsLoader_ = new google.ima.AdsLoader(adDisplayContainer);
  77.     this.adsLoader_.getSettings().setPlayerType('shaka-player');
  78.     this.adsLoader_.getSettings().setPlayerVersion(shaka.Player.version);
  80.     /** @private {google.ima.AdsManager} */
  81.     this.imaAdsManager_ = null;
  83.     /** @private {!google.ima.AdsRenderingSettings} */
  84.     this.adsRenderingSettings_ =
  85.         adsRenderingSettings || new google.ima.AdsRenderingSettings();
  87.     this.eventManager_.listen(this.adsLoader_,
  88.         google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, (e) => {
  89.           this.onAdsManagerLoaded_(
  90.               /** @type {!google.ima.AdsManagerLoadedEvent} */ (e));
  91.         });
  93.     this.eventManager_.listen(this.adsLoader_,
  94.         google.ima.AdErrorEvent.Type.AD_ERROR, (e) => {
  95.           this.onAdError_( /** @type {!google.ima.AdErrorEvent} */ (e));
  96.         });
  98.     // Notify the SDK when the video has ended, so it can play post-roll ads.
  99.     this.eventManager_.listen(this.video_, 'ended', () => {
  100.       this.adsLoader_.contentComplete();
  101.     });
  103.     this.eventManager_.listenOnce(this.video_, 'play', () => {
  104.       this.videoPlayed_ = true;
  105.     });
  106.   }
  108.   /**
  109.    * Called by the AdManager to provide an updated configuration any time it
  110.    * changes.
  111.    *
  112.    * @param {shaka.extern.AdsConfiguration} config
  113.    */
  114.   configure(config) {
  115.     this.config_ = config;
  116.   }
  118.   /**
  119.    * @param {!google.ima.AdsRequest} imaRequest
  120.    */
  121.   requestAds(imaRequest) {
  122.     goog.asserts.assert(
  123.         imaRequest.adTagUrl || imaRequest.adsResponse,
  124.         'The ad tag needs to be set up before requesting ads, ' +
  125.           'or adsResponse must be filled.');
  126.     // Destroy the current AdsManager, in case the tag you requested previously
  127.     // contains post-rolls (don't play those now).
  128.     if (this.imaAdsManager_) {
  129.       this.imaAdsManager_.destroy();
  130.     }
  131.     // Your AdsLoader will be set up on page-load. You should re-use the same
  132.     // AdsLoader for every request.
  133.     if (this.adsLoader_) {
  134.       // Reset the IMA SDK.
  135.       this.adsLoader_.contentComplete();
  136.     }
  137.     this.requestAdsStartTime_ = Date.now() / 1000;
  138.     this.adsLoader_.requestAds(imaRequest);
  139.   }
  141.   /**
  142.    * @param {!google.ima.AdsRenderingSettings} adsRenderingSettings
  143.    */
  144.   updateAdsRenderingSettings(adsRenderingSettings) {
  145.     this.adsRenderingSettings_ = adsRenderingSettings;
  146.     if (this.imaAdsManager_) {
  147.       this.imaAdsManager_.updateAdsRenderingSettings(
  148.           this.adsRenderingSettings_);
  149.     }
  150.   }
  152.   /**
  153.    * Stop all currently playing ads.
  154.    */
  155.   stop() {
  156.     // this.imaAdsManager_ might not be set yet... if, for example, an ad
  157.     // blocker prevented the ads from ever loading.
  158.     if (this.imaAdsManager_) {
  159.       this.imaAdsManager_.stop();
  160.     }
  161.     if (this.adContainer_) {
  162.       shaka.util.Dom.removeAllChildren(this.adContainer_);
  163.     }
  164.   }
  166.   /** @override */
  167.   release() {
  168.     this.stop();
  169.     if (this.resizeObserver_) {
  170.       this.resizeObserver_.disconnect();
  171.     }
  172.     if (this.eventManager_) {
  173.       this.eventManager_.release();
  174.     }
  175.     if (this.imaAdsManager_) {
  176.       this.imaAdsManager_.destroy();
  177.     }
  178.     this.adsLoader_.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.AdManager.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.AdManager.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.AdManager.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.AdManager.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.AdManager.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_) {
  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.AdManager.AD_FIRST_QUARTILE);
  376.         });
  378.     this.eventManager_.listen(this.imaAdsManager_,
  379.         google.ima.AdEvent.Type.MIDPOINT, (e) => {
  380.           convertEventAndSend(e, shaka.ads.AdManager.AD_MIDPOINT);
  381.         });
  383.     this.eventManager_.listen(this.imaAdsManager_,
  384.         google.ima.AdEvent.Type.THIRD_QUARTILE, (e) => {
  385.           convertEventAndSend(e, shaka.ads.AdManager.AD_THIRD_QUARTILE);
  386.         });
  388.     this.eventManager_.listen(this.imaAdsManager_,
  389.         google.ima.AdEvent.Type.COMPLETE, (e) => {
  390.           convertEventAndSend(e, shaka.ads.AdManager.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.AdManager.AD_SKIPPED);
  406.         });
  408.     this.eventManager_.listen(this.imaAdsManager_,
  409.         google.ima.AdEvent.Type.VOLUME_CHANGED, (e) => {
  410.           convertEventAndSend(e, shaka.ads.AdManager.AD_VOLUME_CHANGED);
  411.         });
  413.     this.eventManager_.listen(this.imaAdsManager_,
  414.         google.ima.AdEvent.Type.VOLUME_MUTED, (e) => {
  415.           convertEventAndSend(e, shaka.ads.AdManager.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.AdManager.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.AdManager.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.AdManager.AD_SKIP_STATE_CHANGED);
  438.           }
  439.         });
  441.     this.eventManager_.listen(this.imaAdsManager_,
  442.         google.ima.AdEvent.Type.CLICK, (e) => {
  443.           convertEventAndSend(e, shaka.ads.AdManager.AD_CLICKED);
  444.         });
  446.     this.eventManager_.listen(this.imaAdsManager_,
  447.         google.ima.AdEvent.Type.AD_PROGRESS, (e) => {
  448.           convertEventAndSend(e, shaka.ads.AdManager.AD_PROGRESS);
  449.         });
  451.     this.eventManager_.listen(this.imaAdsManager_,
  452.         google.ima.AdEvent.Type.AD_BUFFERING, (e) => {
  453.           convertEventAndSend(e, shaka.ads.AdManager.AD_BUFFERING);
  454.         });
  456.     this.eventManager_.listen(this.imaAdsManager_,
  457.         google.ima.AdEvent.Type.IMPRESSION, (e) => {
  458.           convertEventAndSend(e, shaka.ads.AdManager.AD_IMPRESSION);
  459.         });
  461.     this.eventManager_.listen(this.imaAdsManager_,
  462.         google.ima.AdEvent.Type.DURATION_CHANGE, (e) => {
  463.           convertEventAndSend(e, shaka.ads.AdManager.AD_DURATION_CHANGED);
  464.         });
  466.     this.eventManager_.listen(this.imaAdsManager_,
  467.         google.ima.AdEvent.Type.USER_CLOSE, (e) => {
  468.           convertEventAndSend(e, shaka.ads.AdManager.AD_CLOSED);
  469.         });
  471.     this.eventManager_.listen(this.imaAdsManager_,
  472.         google.ima.AdEvent.Type.LOADED, (e) => {
  473.           convertEventAndSend(e, shaka.ads.AdManager.AD_LOADED);
  474.         });
  476.     this.eventManager_.listen(this.imaAdsManager_,
  477.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  478.           convertEventAndSend(e, shaka.ads.AdManager.ALL_ADS_COMPLETED);
  479.         });
  481.     this.eventManager_.listen(this.imaAdsManager_,
  482.         google.ima.AdEvent.Type.LINEAR_CHANGED, (e) => {
  483.           convertEventAndSend(e, shaka.ads.AdManager.AD_LINEAR_CHANGED);
  484.         });
  486.     this.eventManager_.listen(this.imaAdsManager_,
  487.         google.ima.AdEvent.Type.AD_METADATA, (e) => {
  488.           convertEventAndSend(e, shaka.ads.AdManager.AD_METADATA);
  489.         });
  491.     this.eventManager_.listen(this.imaAdsManager_,
  492.         google.ima.AdEvent.Type.LOG, (e) => {
  493.           convertEventAndSend(e, shaka.ads.AdManager.AD_RECOVERABLE_ERROR);
  494.         });
  496.     this.eventManager_.listen(this.imaAdsManager_,
  497.         google.ima.AdEvent.Type.AD_BREAK_READY, (e) => {
  498.           convertEventAndSend(e, shaka.ads.AdManager.AD_BREAK_READY);
  499.         });
  501.     this.eventManager_.listen(this.imaAdsManager_,
  502.         google.ima.AdEvent.Type.INTERACTION, (e) => {
  503.           convertEventAndSend(e, shaka.ads.AdManager.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.     const data = new Map()
  529.         .set('ad', this.ad_)
  530.         .set('sdkAdObject', imaAd)
  531.         .set('originalEvent', e);
  532.     this.onEvent_(new shaka.util.FakeEvent(
  533.         shaka.ads.AdManager.AD_STARTED, data));
  534.     if (this.ad_.isLinear()) {
  535.       this.adContainer_.setAttribute('ad-active', 'true');
  536.       if (!this.config_.customPlayheadTracker) {
  537.         this.video_.pause();
  538.       }
  539.       if (this.video_.muted) {
  540.         this.ad_.setInitialMuted(this.video_.volume);
  541.       } else {
  542.         this.ad_.setVolume(this.video_.volume);
  543.       }
  544.     }
  545.   }
  547.   /**
  548.    * @param {?google.ima.AdEvent} e
  549.    * @private
  550.    */
  551.   onAdComplete_(e) {
  552.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED,
  553.         (new Map()).set('originalEvent', e)));
  554.     if (this.ad_ && this.ad_.isLinear()) {
  555.       this.adContainer_.removeAttribute('ad-active');
  556.       if (!this.config_.customPlayheadTracker && !this.video_.ended) {
  557.         this.video_.play();
  558.       }
  559.     }
  560.   }
  561. };