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 {?google.ima.AdsRenderingSettings} adsRenderingSettings
  28.    * @param {function(!shaka.util.FakeEvent)} onEvent
  29.    */
  30.   constructor(adContainer, video, locale, adsRenderingSettings, onEvent) {
  31.     /** @private {HTMLElement} */
  32.     this.adContainer_ = adContainer;
  34.     /** @private {HTMLMediaElement} */
  35.     this.video_ = video;
  37.     /** @private {boolean} */
  38.     this.videoPlayed_ = false;
  40.     /** @private {?shaka.extern.AdsConfiguration} */
  41.     this.config_ = null;
  43.     /** @private {ResizeObserver} */
  44.     this.resizeObserver_ = null;
  46.     /** @private {number} */
  47.     this.requestAdsStartTime_ = NaN;
  49.     /** @private {function(!shaka.util.FakeEvent)} */
  50.     this.onEvent_ = onEvent;
  52.     /** @private {shaka.ads.ClientSideAd} */
  53.     this.ad_ = null;
  55.     /** @private {shaka.util.EventManager} */
  56.     this.eventManager_ = new shaka.util.EventManager();
  58.     google.ima.settings.setLocale(locale);
  60.     google.ima.settings.setDisableCustomPlaybackForIOS10Plus(true);
  62.     const adDisplayContainer = new google.ima.AdDisplayContainer(
  63.         this.adContainer_,
  64.         this.video_);
  66.     // TODO: IMA: Must be done as the result of a user action on mobile
  67.     adDisplayContainer.initialize();
  69.     // IMA: This instance should be re-used for the entire lifecycle of
  70.     // the page.
  71.     this.adsLoader_ = new google.ima.AdsLoader(adDisplayContainer);
  73.     this.adsLoader_.getSettings().setPlayerType('shaka-player');
  74.     this.adsLoader_.getSettings().setPlayerVersion(shaka.Player.version);
  76.     /** @private {google.ima.AdsManager} */
  77.     this.imaAdsManager_ = null;
  79.     /** @private {!google.ima.AdsRenderingSettings} */
  80.     this.adsRenderingSettings_ =
  81.         adsRenderingSettings || new google.ima.AdsRenderingSettings();
  83.     this.eventManager_.listen(this.adsLoader_,
  84.         google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, (e) => {
  85.           this.onAdsManagerLoaded_(
  86.               /** @type {!google.ima.AdsManagerLoadedEvent} */ (e));
  87.         });
  89.     this.eventManager_.listen(this.adsLoader_,
  90.         google.ima.AdErrorEvent.Type.AD_ERROR, (e) => {
  91.           this.onAdError_( /** @type {!google.ima.AdErrorEvent} */ (e));
  92.         });
  94.     // Notify the SDK when the video has ended, so it can play post-roll ads.
  95.     this.eventManager_.listen(this.video_, 'ended', () => {
  96.       this.adsLoader_.contentComplete();
  97.     });
  99.     this.eventManager_.listenOnce(this.video_, 'play', () => {
  100.       this.videoPlayed_ = true;
  101.     });
  102.   }
  104.   /**
  105.    * Called by the AdManager to provide an updated configuration any time it
  106.    * changes.
  107.    *
  108.    * @param {shaka.extern.AdsConfiguration} config
  109.    */
  110.   configure(config) {
  111.     this.config_ = config;
  112.   }
  114.   /**
  115.    * @param {!google.ima.AdsRequest} imaRequest
  116.    */
  117.   requestAds(imaRequest) {
  118.     goog.asserts.assert(
  119.         imaRequest.adTagUrl || imaRequest.adsResponse,
  120.         'The ad tag needs to be set up before requesting ads, ' +
  121.           'or adsResponse must be filled.');
  122.     // Destroy the current AdsManager, in case the tag you requested previously
  123.     // contains post-rolls (don't play those now).
  124.     if (this.imaAdsManager_) {
  125.       this.imaAdsManager_.destroy();
  126.     }
  127.     // Your AdsLoader will be set up on page-load. You should re-use the same
  128.     // AdsLoader for every request.
  129.     if (this.adsLoader_) {
  130.       // Reset the IMA SDK.
  131.       this.adsLoader_.contentComplete();
  132.     }
  133.     this.requestAdsStartTime_ = Date.now() / 1000;
  134.     this.adsLoader_.requestAds(imaRequest);
  135.   }
  137.   /**
  138.    * @param {!google.ima.AdsRenderingSettings} adsRenderingSettings
  139.    */
  140.   updateAdsRenderingSettings(adsRenderingSettings) {
  141.     this.adsRenderingSettings_ = adsRenderingSettings;
  142.     if (this.imaAdsManager_) {
  143.       this.imaAdsManager_.updateAdsRenderingSettings(
  144.           this.adsRenderingSettings_);
  145.     }
  146.   }
  148.   /**
  149.    * Stop all currently playing ads.
  150.    */
  151.   stop() {
  152.     // this.imaAdsManager_ might not be set yet... if, for example, an ad
  153.     // blocker prevented the ads from ever loading.
  154.     if (this.imaAdsManager_) {
  155.       this.imaAdsManager_.stop();
  156.     }
  157.     if (this.adContainer_) {
  158.       shaka.util.Dom.removeAllChildren(this.adContainer_);
  159.     }
  160.   }
  162.   /** @override */
  163.   release() {
  164.     this.stop();
  165.     if (this.resizeObserver_) {
  166.       this.resizeObserver_.disconnect();
  167.     }
  168.     if (this.eventManager_) {
  169.       this.eventManager_.release();
  170.     }
  171.     if (this.imaAdsManager_) {
  172.       this.imaAdsManager_.destroy();
  173.     }
  174.     this.adsLoader_.destroy();
  175.   }
  177.   /**
  178.    * @param {!google.ima.AdErrorEvent} e
  179.    * @private
  180.    */
  181.   onAdError_(e) {
  182.     shaka.log.warning(
  183.         'There was an ad error from the IMA SDK: ' + e.getError());
  184.     shaka.log.warning('Resuming playback.');
  186.     const data = (new Map()).set('originalEvent', e);
  187.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_ERROR, data));
  189.     this.onAdComplete_(/* adEvent= */ null);
  190.     // Remove ad breaks from the timeline
  191.     this.onEvent_(
  192.         new shaka.util.FakeEvent(shaka.ads.AdManager.CUEPOINTS_CHANGED,
  193.             (new Map()).set('cuepoints', [])));
  194.   }
  197.   /**
  198.    * @param {!google.ima.AdsManagerLoadedEvent} e
  199.    * @private
  200.    */
  201.   onAdsManagerLoaded_(e) {
  202.     goog.asserts.assert(this.video_ != null, 'Video should not be null!');
  204.     const now = Date.now() / 1000;
  205.     const loadTime = now - this.requestAdsStartTime_;
  206.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.ADS_LOADED,
  207.         (new Map()).set('loadTime', loadTime)));
  209.     if (!this.config_.customPlayheadTracker) {
  210.       this.imaAdsManager_ = e.getAdsManager(this.video_,
  211.           this.adsRenderingSettings_);
  212.     } else {
  213.       const videoPlayHead = {
  214.         currentTime: this.video_.currentTime,
  215.       };
  217.       this.imaAdsManager_ = e.getAdsManager(videoPlayHead,
  218.           this.adsRenderingSettings_);
  220.       if (this.video_.muted) {
  221.         this.imaAdsManager_.setVolume(0);
  222.       } else {
  223.         this.imaAdsManager_.setVolume(this.video_.volume);
  224.       }
  226.       this.eventManager_.listen(this.video_, 'timeupdate', () => {
  227.         if (!this.video_.duration) {
  228.           return;
  229.         }
  230.         videoPlayHead.currentTime = this.video_.currentTime;
  231.       });
  232.       this.eventManager_.listen(this.video_, 'volumechange', () => {
  233.         if (this.video_.muted) {
  234.           this.imaAdsManager_.setVolume(0);
  235.         } else {
  236.           this.imaAdsManager_.setVolume(this.video_.volume);
  237.         }
  238.       });
  239.     }
  241.     this.onEvent_(new shaka.util.FakeEvent(
  242.         shaka.ads.AdManager.IMA_AD_MANAGER_LOADED,
  243.         (new Map()).set('imaAdManager', this.imaAdsManager_)));
  245.     const cuePointStarts = this.imaAdsManager_.getCuePoints();
  246.     if (cuePointStarts.length) {
  247.       /** @type {!Array.<!shaka.extern.AdCuePoint>} */
  248.       const cuePoints = [];
  249.       for (const start of cuePointStarts) {
  250.         /** @type {shaka.extern.AdCuePoint} */
  251.         const shakaCuePoint = {
  252.           start: start,
  253.           end: null,
  254.         };
  255.         cuePoints.push(shakaCuePoint);
  256.       }
  258.       this.onEvent_(new shaka.util.FakeEvent(
  259.           shaka.ads.AdManager.CUEPOINTS_CHANGED,
  260.           (new Map()).set('cuepoints', cuePoints)));
  261.     }
  263.     this.addImaEventListeners_();
  265.     try {
  266.       const viewMode = this.isFullScreenEnabled_() ?
  267.           google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  269.       this.imaAdsManager_.init(this.video_.offsetWidth,
  270.           this.video_.offsetHeight, viewMode);
  272.       // Wait on the 'loadeddata' event rather than the 'loadedmetadata' event
  273.       // because 'loadedmetadata' is sometimes called before the video resizes
  274.       // on some platforms (e.g. Safari).
  275.       this.eventManager_.listen(this.video_, 'loadeddata', () => {
  276.         const viewMode = this.isFullScreenEnabled_() ?
  277.             google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  278.         this.imaAdsManager_.resize(this.video_.offsetWidth,
  279.             this.video_.offsetHeight, viewMode);
  280.       });
  282.       if ('ResizeObserver' in window) {
  283.         this.resizeObserver_ = new ResizeObserver(() => {
  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.         });
  289.         this.resizeObserver_.observe(this.video_);
  290.       } else {
  291.         this.eventManager_.listen(document, 'fullscreenchange', () => {
  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.       }
  299.       // Single video and overlay ads will start at this time
  300.       // TODO (ismena): Need a better inderstanding of what this does.
  301.       // The docs say it's called to 'start playing the ads,' but I haven't
  302.       // seen the ads actually play until requestAds() is called.
  303.       // Note: We listen for a play event to avoid autoplay issues that might
  304.       // crash IMA.
  305.       if (this.videoPlayed_) {
  306.         this.imaAdsManager_.start();
  307.       } else {
  308.         this.eventManager_.listenOnce(this.video_, 'play', () => {
  309.           this.videoPlayed_ = true;
  310.           this.imaAdsManager_.start();
  311.         });
  312.       }
  313.     } catch (adError) {
  314.       // If there was a problem with the VAST response,
  315.       // we we won't be getting an ad. Hide ad UI if we showed it already
  316.       // and get back to the presentation.
  317.       this.onAdComplete_(/* adEvent= */ null);
  318.     }
  319.   }
  322.   /**
  323.    * @return {boolean}
  324.    * @private
  325.    */
  326.   isFullScreenEnabled_() {
  327.     if (document.fullscreenEnabled) {
  328.       return !!document.fullscreenElement;
  329.     } else {
  330.       const video = /** @type {HTMLVideoElement} */(this.video_);
  331.       if (video.webkitSupportsFullscreen) {
  332.         return video.webkitDisplayingFullscreen;
  333.       }
  334.     }
  335.     return false;
  336.   }
  339.   /**
  340.    * @private
  341.    */
  342.   addImaEventListeners_() {
  343.     /**
  344.      * @param {!Event} e
  345.      * @param {string} type
  346.      */
  347.     const convertEventAndSend = (e, type) => {
  348.       const data = (new Map()).set('originalEvent', e);
  349.       this.onEvent_(new shaka.util.FakeEvent(type, data));
  350.     };
  352.     this.eventManager_.listen(this.imaAdsManager_,
  353.         google.ima.AdErrorEvent.Type.AD_ERROR, (error) => {
  354.           this.onAdError_(/** @type {!google.ima.AdErrorEvent} */ (error));
  355.         });
  357.     this.eventManager_.listen(this.imaAdsManager_,
  358.         google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, (e) => {
  359.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  360.         });
  362.     this.eventManager_.listen(this.imaAdsManager_,
  363.         google.ima.AdEvent.Type.STARTED, (e) => {
  364.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  365.         });
  367.     this.eventManager_.listen(this.imaAdsManager_,
  368.         google.ima.AdEvent.Type.FIRST_QUARTILE, (e) => {
  369.           convertEventAndSend(e, shaka.ads.AdManager.AD_FIRST_QUARTILE);
  370.         });
  372.     this.eventManager_.listen(this.imaAdsManager_,
  373.         google.ima.AdEvent.Type.MIDPOINT, (e) => {
  374.           convertEventAndSend(e, shaka.ads.AdManager.AD_MIDPOINT);
  375.         });
  377.     this.eventManager_.listen(this.imaAdsManager_,
  378.         google.ima.AdEvent.Type.THIRD_QUARTILE, (e) => {
  379.           convertEventAndSend(e, shaka.ads.AdManager.AD_THIRD_QUARTILE);
  380.         });
  382.     this.eventManager_.listen(this.imaAdsManager_,
  383.         google.ima.AdEvent.Type.COMPLETE, (e) => {
  384.           convertEventAndSend(e, shaka.ads.AdManager.AD_COMPLETE);
  385.         });
  387.     this.eventManager_.listen(this.imaAdsManager_,
  388.         google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, (e) => {
  389.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  390.         });
  392.     this.eventManager_.listen(this.imaAdsManager_,
  393.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  394.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  395.         });
  397.     this.eventManager_.listen(this.imaAdsManager_,
  398.         google.ima.AdEvent.Type.SKIPPED, (e) => {
  399.           convertEventAndSend(e, shaka.ads.AdManager.AD_SKIPPED);
  400.         });
  402.     this.eventManager_.listen(this.imaAdsManager_,
  403.         google.ima.AdEvent.Type.VOLUME_CHANGED, (e) => {
  404.           convertEventAndSend(e, shaka.ads.AdManager.AD_VOLUME_CHANGED);
  405.         });
  407.     this.eventManager_.listen(this.imaAdsManager_,
  408.         google.ima.AdEvent.Type.VOLUME_MUTED, (e) => {
  409.           convertEventAndSend(e, shaka.ads.AdManager.AD_MUTED);
  410.         });
  412.     this.eventManager_.listen(this.imaAdsManager_,
  413.         google.ima.AdEvent.Type.PAUSED, (e) => {
  414.           if (this.ad_) {
  415.             this.ad_.setPaused(true);
  416.             convertEventAndSend(e, shaka.ads.AdManager.AD_PAUSED);
  417.           }
  418.         });
  420.     this.eventManager_.listen(this.imaAdsManager_,
  421.         google.ima.AdEvent.Type.RESUMED, (e) => {
  422.           if (this.ad_) {
  423.             this.ad_.setPaused(false);
  424.             convertEventAndSend(e, shaka.ads.AdManager.AD_RESUMED);
  425.           }
  426.         });
  428.     this.eventManager_.listen(this.imaAdsManager_,
  429.         google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, (e) => {
  430.           if (this.ad_) {
  431.             convertEventAndSend(e, shaka.ads.AdManager.AD_SKIP_STATE_CHANGED);
  432.           }
  433.         });
  435.     this.eventManager_.listen(this.imaAdsManager_,
  436.         google.ima.AdEvent.Type.CLICK, (e) => {
  437.           convertEventAndSend(e, shaka.ads.AdManager.AD_CLICKED);
  438.         });
  440.     this.eventManager_.listen(this.imaAdsManager_,
  441.         google.ima.AdEvent.Type.AD_PROGRESS, (e) => {
  442.           convertEventAndSend(e, shaka.ads.AdManager.AD_PROGRESS);
  443.         });
  445.     this.eventManager_.listen(this.imaAdsManager_,
  446.         google.ima.AdEvent.Type.AD_BUFFERING, (e) => {
  447.           convertEventAndSend(e, shaka.ads.AdManager.AD_BUFFERING);
  448.         });
  450.     this.eventManager_.listen(this.imaAdsManager_,
  451.         google.ima.AdEvent.Type.IMPRESSION, (e) => {
  452.           convertEventAndSend(e, shaka.ads.AdManager.AD_IMPRESSION);
  453.         });
  455.     this.eventManager_.listen(this.imaAdsManager_,
  456.         google.ima.AdEvent.Type.DURATION_CHANGE, (e) => {
  457.           convertEventAndSend(e, shaka.ads.AdManager.AD_DURATION_CHANGED);
  458.         });
  460.     this.eventManager_.listen(this.imaAdsManager_,
  461.         google.ima.AdEvent.Type.USER_CLOSE, (e) => {
  462.           convertEventAndSend(e, shaka.ads.AdManager.AD_CLOSED);
  463.         });
  465.     this.eventManager_.listen(this.imaAdsManager_,
  466.         google.ima.AdEvent.Type.LOADED, (e) => {
  467.           convertEventAndSend(e, shaka.ads.AdManager.AD_LOADED);
  468.         });
  470.     this.eventManager_.listen(this.imaAdsManager_,
  471.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  472.           convertEventAndSend(e, shaka.ads.AdManager.ALL_ADS_COMPLETED);
  473.         });
  475.     this.eventManager_.listen(this.imaAdsManager_,
  476.         google.ima.AdEvent.Type.LINEAR_CHANGED, (e) => {
  477.           convertEventAndSend(e, shaka.ads.AdManager.AD_LINEAR_CHANGED);
  478.         });
  480.     this.eventManager_.listen(this.imaAdsManager_,
  481.         google.ima.AdEvent.Type.AD_METADATA, (e) => {
  482.           convertEventAndSend(e, shaka.ads.AdManager.AD_METADATA);
  483.         });
  485.     this.eventManager_.listen(this.imaAdsManager_,
  486.         google.ima.AdEvent.Type.LOG, (e) => {
  487.           convertEventAndSend(e, shaka.ads.AdManager.AD_RECOVERABLE_ERROR);
  488.         });
  490.     this.eventManager_.listen(this.imaAdsManager_,
  491.         google.ima.AdEvent.Type.AD_BREAK_READY, (e) => {
  492.           convertEventAndSend(e, shaka.ads.AdManager.AD_BREAK_READY);
  493.         });
  495.     this.eventManager_.listen(this.imaAdsManager_,
  496.         google.ima.AdEvent.Type.INTERACTION, (e) => {
  497.           convertEventAndSend(e, shaka.ads.AdManager.AD_INTERACTION);
  498.         });
  499.   }
  501.   /**
  502.    * @param {!google.ima.AdEvent} e
  503.    * @private
  504.    */
  505.   onAdStart_(e) {
  506.     goog.asserts.assert(this.imaAdsManager_,
  507.         'Should have an ads manager at this point!');
  509.     const imaAd = e.getAd();
  510.     if (!imaAd) {
  511.       // Sometimes the IMA SDK will fire a CONTENT_PAUSE_REQUESTED or STARTED
  512.       // event with no associated ad object.
  513.       // We can't really play an ad in that situation, so just ignore the event.
  514.       shaka.log.alwaysWarn(
  515.           'The IMA SDK fired a ' + e.type + ' event with no associated ad. ' +
  516.           'Unable to play ad!');
  517.       return;
  518.     }
  520.     this.ad_ = new shaka.ads.ClientSideAd(imaAd,
  521.         this.imaAdsManager_, this.video_);
  522.     const data = new Map()
  523.         .set('ad', this.ad_)
  524.         .set('sdkAdObject', imaAd)
  525.         .set('originalEvent', e);
  526.     this.onEvent_(new shaka.util.FakeEvent(
  527.         shaka.ads.AdManager.AD_STARTED, data));
  528.     if (this.ad_.isLinear()) {
  529.       this.adContainer_.setAttribute('ad-active', 'true');
  530.       this.video_.pause();
  531.       this.ad_.setVolume(this.video_.volume);
  532.       if (this.video_.muted) {
  533.         this.ad_.setMuted(true);
  534.       }
  535.     }
  536.   }
  538.   /**
  539.    * @param {?google.ima.AdEvent} e
  540.    * @private
  541.    */
  542.   onAdComplete_(e) {
  543.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED,
  544.         (new Map()).set('originalEvent', e)));
  545.     if (this.ad_ && this.ad_.isLinear()) {
  546.       this.adContainer_.removeAttribute('ad-active');
  547.       if (!this.video_.ended) {
  548.         this.video_.play();
  549.       }
  550.     }
  551.   }
  552. };