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.     /** @private {!google.ima.AdDisplayContainer} */
  67.     this.adDisplayContainer_ = new google.ima.AdDisplayContainer(
  68.         this.adContainer_,
  69.         this.video_);
  71.     // TODO: IMA: Must be done as the result of a user action on mobile
  72.     this.adDisplayContainer_.initialize();
  74.     // IMA: This instance should be re-used for the entire lifecycle of
  75.     // the page.
  76.     this.adsLoader_ = new google.ima.AdsLoader(this.adDisplayContainer_);
  78.     this.adsLoader_.getSettings().setPlayerType('shaka-player');
  79.     this.adsLoader_.getSettings().setPlayerVersion(shaka.Player.version);
  81.     /** @private {google.ima.AdsManager} */
  82.     this.imaAdsManager_ = null;
  84.     /** @private {!google.ima.AdsRenderingSettings} */
  85.     this.adsRenderingSettings_ =
  86.         adsRenderingSettings || new google.ima.AdsRenderingSettings();
  88.     this.eventManager_.listen(this.adsLoader_,
  89.         google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, (e) => {
  90.           this.onAdsManagerLoaded_(
  91.               /** @type {!google.ima.AdsManagerLoadedEvent} */ (e));
  92.         });
  94.     this.eventManager_.listen(this.adsLoader_,
  95.         google.ima.AdErrorEvent.Type.AD_ERROR, (e) => {
  96.           this.onAdError_( /** @type {!google.ima.AdErrorEvent} */ (e));
  97.         });
  99.     // Notify the SDK when the video has ended, so it can play post-roll ads.
  100.     this.eventManager_.listen(this.video_, 'ended', () => {
  101.       this.adsLoader_.contentComplete();
  102.     });
  104.     this.eventManager_.listenOnce(this.video_, 'play', () => {
  105.       this.videoPlayed_ = true;
  106.     });
  107.   }
  109.   /**
  110.    * Called by the AdManager to provide an updated configuration any time it
  111.    * changes.
  112.    *
  113.    * @param {shaka.extern.AdsConfiguration} config
  114.    */
  115.   configure(config) {
  116.     this.config_ = config;
  117.   }
  119.   /**
  120.    * @param {!google.ima.AdsRequest} imaRequest
  121.    */
  122.   requestAds(imaRequest) {
  123.     goog.asserts.assert(
  124.         imaRequest.adTagUrl || imaRequest.adsResponse,
  125.         'The ad tag needs to be set up before requesting ads, ' +
  126.           'or adsResponse must be filled.');
  127.     // Destroy the current AdsManager, in case the tag you requested previously
  128.     // contains post-rolls (don't play those now).
  129.     if (this.imaAdsManager_) {
  130.       this.imaAdsManager_.destroy();
  131.     }
  132.     // Your AdsLoader will be set up on page-load. You should re-use the same
  133.     // AdsLoader for every request.
  134.     if (this.adsLoader_) {
  135.       // Reset the IMA SDK.
  136.       this.adsLoader_.contentComplete();
  137.     }
  138.     this.requestAdsStartTime_ = Date.now() / 1000;
  139.     this.adsLoader_.requestAds(imaRequest);
  140.   }
  142.   /**
  143.    * @param {!google.ima.AdsRenderingSettings} adsRenderingSettings
  144.    */
  145.   updateAdsRenderingSettings(adsRenderingSettings) {
  146.     this.adsRenderingSettings_ = adsRenderingSettings;
  147.     if (this.imaAdsManager_) {
  148.       this.imaAdsManager_.updateAdsRenderingSettings(
  149.           this.adsRenderingSettings_);
  150.     }
  151.   }
  153.   /**
  154.    * Stop all currently playing ads.
  155.    */
  156.   stop() {
  157.     // this.imaAdsManager_ might not be set yet... if, for example, an ad
  158.     // blocker prevented the ads from ever loading.
  159.     if (this.imaAdsManager_) {
  160.       this.imaAdsManager_.stop();
  161.     }
  162.     if (this.adContainer_) {
  163.       shaka.util.Dom.removeAllChildren(this.adContainer_);
  164.     }
  165.   }
  167.   /** @override */
  168.   release() {
  169.     this.stop();
  170.     if (this.resizeObserver_) {
  171.       this.resizeObserver_.disconnect();
  172.     }
  173.     if (this.eventManager_) {
  174.       this.eventManager_.release();
  175.     }
  176.     if (this.imaAdsManager_) {
  177.       this.imaAdsManager_.destroy();
  178.     }
  179.     this.adsLoader_.destroy();
  180.     this.adDisplayContainer_.destroy();
  181.   }
  183.   /**
  184.    * @param {!google.ima.AdErrorEvent} e
  185.    * @private
  186.    */
  187.   onAdError_(e) {
  188.     shaka.log.warning(
  189.         'There was an ad error from the IMA SDK: ' + e.getError());
  190.     shaka.log.warning('Resuming playback.');
  192.     const data = (new Map()).set('originalEvent', e);
  193.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_ERROR, data));
  195.     this.onAdComplete_(/* adEvent= */ null);
  196.     // Remove ad breaks from the timeline
  197.     this.onEvent_(
  198.         new shaka.util.FakeEvent(shaka.ads.AdManager.CUEPOINTS_CHANGED,
  199.             (new Map()).set('cuepoints', [])));
  200.   }
  203.   /**
  204.    * @param {!google.ima.AdsManagerLoadedEvent} e
  205.    * @private
  206.    */
  207.   onAdsManagerLoaded_(e) {
  208.     goog.asserts.assert(this.video_ != null, 'Video should not be null!');
  210.     const now = Date.now() / 1000;
  211.     const loadTime = now - this.requestAdsStartTime_;
  212.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.ADS_LOADED,
  213.         (new Map()).set('loadTime', loadTime)));
  215.     if (!this.config_.customPlayheadTracker) {
  216.       this.imaAdsManager_ = e.getAdsManager(this.video_,
  217.           this.adsRenderingSettings_);
  218.     } else {
  219.       const videoPlayHead = {
  220.         currentTime: this.video_.currentTime,
  221.       };
  223.       this.imaAdsManager_ = e.getAdsManager(videoPlayHead,
  224.           this.adsRenderingSettings_);
  226.       if (this.video_.muted) {
  227.         this.imaAdsManager_.setVolume(0);
  228.       } else {
  229.         this.imaAdsManager_.setVolume(this.video_.volume);
  230.       }
  232.       this.eventManager_.listen(this.video_, 'timeupdate', () => {
  233.         if (!this.video_.duration) {
  234.           return;
  235.         }
  236.         videoPlayHead.currentTime = this.video_.currentTime;
  237.       });
  238.       this.eventManager_.listen(this.video_, 'volumechange', () => {
  239.         if (!this.ad_) {
  240.           return;
  241.         }
  242.         this.ad_.setVolume(this.video_.volume);
  243.         if (this.video_.muted) {
  244.           this.ad_.setMuted(true);
  245.         }
  246.       });
  247.     }
  249.     this.onEvent_(new shaka.util.FakeEvent(
  250.         shaka.ads.AdManager.IMA_AD_MANAGER_LOADED,
  251.         (new Map()).set('imaAdManager', this.imaAdsManager_)));
  253.     const cuePointStarts = this.imaAdsManager_.getCuePoints();
  254.     if (cuePointStarts.length) {
  255.       /** @type {!Array.<!shaka.extern.AdCuePoint>} */
  256.       const cuePoints = [];
  257.       for (const start of cuePointStarts) {
  258.         /** @type {shaka.extern.AdCuePoint} */
  259.         const shakaCuePoint = {
  260.           start: start,
  261.           end: null,
  262.         };
  263.         cuePoints.push(shakaCuePoint);
  264.       }
  266.       this.onEvent_(new shaka.util.FakeEvent(
  267.           shaka.ads.AdManager.CUEPOINTS_CHANGED,
  268.           (new Map()).set('cuepoints', cuePoints)));
  269.     }
  271.     this.addImaEventListeners_();
  273.     try {
  274.       const viewMode = this.isFullScreenEnabled_() ?
  275.           google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  277.       this.imaAdsManager_.init(this.video_.offsetWidth,
  278.           this.video_.offsetHeight, viewMode);
  280.       // Wait on the 'loadeddata' event rather than the 'loadedmetadata' event
  281.       // because 'loadedmetadata' is sometimes called before the video resizes
  282.       // on some platforms (e.g. Safari).
  283.       this.eventManager_.listen(this.video_, 'loadeddata', () => {
  284.         const viewMode = this.isFullScreenEnabled_() ?
  285.             google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  286.         this.imaAdsManager_.resize(this.video_.offsetWidth,
  287.             this.video_.offsetHeight, viewMode);
  288.       });
  290.       if ('ResizeObserver' in window) {
  291.         this.resizeObserver_ = new ResizeObserver(() => {
  292.           const viewMode = this.isFullScreenEnabled_() ?
  293.               google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  294.           this.imaAdsManager_.resize(this.video_.offsetWidth,
  295.               this.video_.offsetHeight, viewMode);
  296.         });
  297.         this.resizeObserver_.observe(this.video_);
  298.       } else {
  299.         this.eventManager_.listen(document, 'fullscreenchange', () => {
  300.           const viewMode = this.isFullScreenEnabled_() ?
  301.               google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  302.           this.imaAdsManager_.resize(this.video_.offsetWidth,
  303.               this.video_.offsetHeight, viewMode);
  304.         });
  305.       }
  307.       // Single video and overlay ads will start at this time
  308.       // TODO (ismena): Need a better inderstanding of what this does.
  309.       // The docs say it's called to 'start playing the ads,' but I haven't
  310.       // seen the ads actually play until requestAds() is called.
  311.       // Note: We listen for a play event to avoid autoplay issues that might
  312.       // crash IMA.
  313.       if (this.videoPlayed_ || this.config_.skipPlayDetection) {
  314.         this.imaAdsManager_.start();
  315.       } else {
  316.         this.eventManager_.listenOnce(this.video_, 'play', () => {
  317.           this.videoPlayed_ = true;
  318.           this.imaAdsManager_.start();
  319.         });
  320.       }
  321.     } catch (adError) {
  322.       // If there was a problem with the VAST response,
  323.       // we we won't be getting an ad. Hide ad UI if we showed it already
  324.       // and get back to the presentation.
  325.       this.onAdComplete_(/* adEvent= */ null);
  326.     }
  327.   }
  330.   /**
  331.    * @return {boolean}
  332.    * @private
  333.    */
  334.   isFullScreenEnabled_() {
  335.     if (document.fullscreenEnabled) {
  336.       return !!document.fullscreenElement;
  337.     } else {
  338.       const video = /** @type {HTMLVideoElement} */(this.video_);
  339.       if (video.webkitSupportsFullscreen) {
  340.         return video.webkitDisplayingFullscreen;
  341.       }
  342.     }
  343.     return false;
  344.   }
  347.   /**
  348.    * @private
  349.    */
  350.   addImaEventListeners_() {
  351.     /**
  352.      * @param {!Event} e
  353.      * @param {string} type
  354.      */
  355.     const convertEventAndSend = (e, type) => {
  356.       const data = (new Map()).set('originalEvent', e);
  357.       this.onEvent_(new shaka.util.FakeEvent(type, data));
  358.     };
  360.     this.eventManager_.listen(this.imaAdsManager_,
  361.         google.ima.AdErrorEvent.Type.AD_ERROR, (error) => {
  362.           this.onAdError_(/** @type {!google.ima.AdErrorEvent} */ (error));
  363.         });
  365.     this.eventManager_.listen(this.imaAdsManager_,
  366.         google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, (e) => {
  367.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  368.         });
  370.     this.eventManager_.listen(this.imaAdsManager_,
  371.         google.ima.AdEvent.Type.STARTED, (e) => {
  372.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  373.         });
  375.     this.eventManager_.listen(this.imaAdsManager_,
  376.         google.ima.AdEvent.Type.FIRST_QUARTILE, (e) => {
  377.           convertEventAndSend(e, shaka.ads.AdManager.AD_FIRST_QUARTILE);
  378.         });
  380.     this.eventManager_.listen(this.imaAdsManager_,
  381.         google.ima.AdEvent.Type.MIDPOINT, (e) => {
  382.           convertEventAndSend(e, shaka.ads.AdManager.AD_MIDPOINT);
  383.         });
  385.     this.eventManager_.listen(this.imaAdsManager_,
  386.         google.ima.AdEvent.Type.THIRD_QUARTILE, (e) => {
  387.           convertEventAndSend(e, shaka.ads.AdManager.AD_THIRD_QUARTILE);
  388.         });
  390.     this.eventManager_.listen(this.imaAdsManager_,
  391.         google.ima.AdEvent.Type.COMPLETE, (e) => {
  392.           convertEventAndSend(e, shaka.ads.AdManager.AD_COMPLETE);
  393.         });
  395.     this.eventManager_.listen(this.imaAdsManager_,
  396.         google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, (e) => {
  397.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  398.         });
  400.     this.eventManager_.listen(this.imaAdsManager_,
  401.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  402.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  403.         });
  405.     this.eventManager_.listen(this.imaAdsManager_,
  406.         google.ima.AdEvent.Type.SKIPPED, (e) => {
  407.           convertEventAndSend(e, shaka.ads.AdManager.AD_SKIPPED);
  408.         });
  410.     this.eventManager_.listen(this.imaAdsManager_,
  411.         google.ima.AdEvent.Type.VOLUME_CHANGED, (e) => {
  412.           convertEventAndSend(e, shaka.ads.AdManager.AD_VOLUME_CHANGED);
  413.         });
  415.     this.eventManager_.listen(this.imaAdsManager_,
  416.         google.ima.AdEvent.Type.VOLUME_MUTED, (e) => {
  417.           convertEventAndSend(e, shaka.ads.AdManager.AD_MUTED);
  418.         });
  420.     this.eventManager_.listen(this.imaAdsManager_,
  421.         google.ima.AdEvent.Type.PAUSED, (e) => {
  422.           if (this.ad_) {
  423.             this.ad_.setPaused(true);
  424.             convertEventAndSend(e, shaka.ads.AdManager.AD_PAUSED);
  425.           }
  426.         });
  428.     this.eventManager_.listen(this.imaAdsManager_,
  429.         google.ima.AdEvent.Type.RESUMED, (e) => {
  430.           if (this.ad_) {
  431.             this.ad_.setPaused(false);
  432.             convertEventAndSend(e, shaka.ads.AdManager.AD_RESUMED);
  433.           }
  434.         });
  436.     this.eventManager_.listen(this.imaAdsManager_,
  437.         google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, (e) => {
  438.           if (this.ad_) {
  439.             convertEventAndSend(e, shaka.ads.AdManager.AD_SKIP_STATE_CHANGED);
  440.           }
  441.         });
  443.     this.eventManager_.listen(this.imaAdsManager_,
  444.         google.ima.AdEvent.Type.CLICK, (e) => {
  445.           convertEventAndSend(e, shaka.ads.AdManager.AD_CLICKED);
  446.         });
  448.     this.eventManager_.listen(this.imaAdsManager_,
  449.         google.ima.AdEvent.Type.AD_PROGRESS, (e) => {
  450.           convertEventAndSend(e, shaka.ads.AdManager.AD_PROGRESS);
  451.         });
  453.     this.eventManager_.listen(this.imaAdsManager_,
  454.         google.ima.AdEvent.Type.AD_BUFFERING, (e) => {
  455.           convertEventAndSend(e, shaka.ads.AdManager.AD_BUFFERING);
  456.         });
  458.     this.eventManager_.listen(this.imaAdsManager_,
  459.         google.ima.AdEvent.Type.IMPRESSION, (e) => {
  460.           convertEventAndSend(e, shaka.ads.AdManager.AD_IMPRESSION);
  461.         });
  463.     this.eventManager_.listen(this.imaAdsManager_,
  464.         google.ima.AdEvent.Type.DURATION_CHANGE, (e) => {
  465.           convertEventAndSend(e, shaka.ads.AdManager.AD_DURATION_CHANGED);
  466.         });
  468.     this.eventManager_.listen(this.imaAdsManager_,
  469.         google.ima.AdEvent.Type.USER_CLOSE, (e) => {
  470.           convertEventAndSend(e, shaka.ads.AdManager.AD_CLOSED);
  471.         });
  473.     this.eventManager_.listen(this.imaAdsManager_,
  474.         google.ima.AdEvent.Type.LOADED, (e) => {
  475.           convertEventAndSend(e, shaka.ads.AdManager.AD_LOADED);
  476.         });
  478.     this.eventManager_.listen(this.imaAdsManager_,
  479.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  480.           convertEventAndSend(e, shaka.ads.AdManager.ALL_ADS_COMPLETED);
  481.         });
  483.     this.eventManager_.listen(this.imaAdsManager_,
  484.         google.ima.AdEvent.Type.LINEAR_CHANGED, (e) => {
  485.           convertEventAndSend(e, shaka.ads.AdManager.AD_LINEAR_CHANGED);
  486.         });
  488.     this.eventManager_.listen(this.imaAdsManager_,
  489.         google.ima.AdEvent.Type.AD_METADATA, (e) => {
  490.           convertEventAndSend(e, shaka.ads.AdManager.AD_METADATA);
  491.         });
  493.     this.eventManager_.listen(this.imaAdsManager_,
  494.         google.ima.AdEvent.Type.LOG, (e) => {
  495.           convertEventAndSend(e, shaka.ads.AdManager.AD_RECOVERABLE_ERROR);
  496.         });
  498.     this.eventManager_.listen(this.imaAdsManager_,
  499.         google.ima.AdEvent.Type.AD_BREAK_READY, (e) => {
  500.           convertEventAndSend(e, shaka.ads.AdManager.AD_BREAK_READY);
  501.         });
  503.     this.eventManager_.listen(this.imaAdsManager_,
  504.         google.ima.AdEvent.Type.INTERACTION, (e) => {
  505.           convertEventAndSend(e, shaka.ads.AdManager.AD_INTERACTION);
  506.         });
  507.   }
  509.   /**
  510.    * @param {!google.ima.AdEvent} e
  511.    * @private
  512.    */
  513.   onAdStart_(e) {
  514.     goog.asserts.assert(this.imaAdsManager_,
  515.         'Should have an ads manager at this point!');
  517.     const imaAd = e.getAd();
  518.     if (!imaAd) {
  519.       // Sometimes the IMA SDK will fire a CONTENT_PAUSE_REQUESTED or STARTED
  520.       // event with no associated ad object.
  521.       // We can't really play an ad in that situation, so just ignore the event.
  522.       shaka.log.alwaysWarn(
  523.           'The IMA SDK fired a ' + e.type + ' event with no associated ad. ' +
  524.           'Unable to play ad!');
  525.       return;
  526.     }
  528.     this.ad_ = new shaka.ads.ClientSideAd(imaAd,
  529.         this.imaAdsManager_, this.video_);
  530.     const data = new Map()
  531.         .set('ad', this.ad_)
  532.         .set('sdkAdObject', imaAd)
  533.         .set('originalEvent', e);
  534.     this.onEvent_(new shaka.util.FakeEvent(
  535.         shaka.ads.AdManager.AD_STARTED, data));
  536.     if (this.ad_.isLinear()) {
  537.       this.adContainer_.setAttribute('ad-active', 'true');
  538.       if (!this.config_.customPlayheadTracker) {
  539.         this.video_.pause();
  540.       }
  541.       if (this.video_.muted) {
  542.         this.ad_.setInitialMuted(this.video_.volume);
  543.       } else {
  544.         this.ad_.setVolume(this.video_.volume);
  545.       }
  546.     }
  547.   }
  549.   /**
  550.    * @param {?google.ima.AdEvent} e
  551.    * @private
  552.    */
  553.   onAdComplete_(e) {
  554.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED,
  555.         (new Map()).set('originalEvent', e)));
  556.     if (this.ad_ && this.ad_.isLinear()) {
  557.       this.adContainer_.removeAttribute('ad-active');
  558.       if (!this.config_.customPlayheadTracker && !this.video_.ended) {
  559.         this.video_.play();
  560.       }
  561.     }
  562.   }
  563. };