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 {function(!shaka.util.FakeEvent)} onEvent
  32.    */
  33.   constructor(adContainer, video, locale, onEvent) {
  34.     /** @private {HTMLElement} */
  35.     this.adContainer_ = adContainer;
  37.     /** @private {HTMLMediaElement} */
  38.     this.video_ = video;
  40.     /** @private {boolean} */
  41.     this.videoPlayed_ = false;
  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.     const adDisplayContainer = new google.ima.AdDisplayContainer(
  61.         this.adContainer_,
  62.         this.video_);
  64.     // TODO: IMA: Must be done as the result of a user action on mobile
  65.     adDisplayContainer.initialize();
  67.     // IMA: This instance should be re-used for the entire lifecycle of
  68.     // the page.
  69.     this.adsLoader_ = new google.ima.AdsLoader(adDisplayContainer);
  71.     this.adsLoader_.getSettings().setPlayerType('shaka-player');
  72.     this.adsLoader_.getSettings().setPlayerVersion(shaka.Player.version);
  74.     /** @private {google.ima.AdsManager} */
  75.     this.imaAdsManager_ = null;
  77.     this.eventManager_.listenOnce(this.adsLoader_,
  78.         google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, (e) => {
  79.           this.onAdsManagerLoaded_(
  80.               /** @type {!google.ima.AdsManagerLoadedEvent} */ (e));
  81.         });
  83.     this.eventManager_.listen(this.adsLoader_,
  84.         google.ima.AdErrorEvent.Type.AD_ERROR, (e) => {
  85.           this.onAdError_( /** @type {!google.ima.AdErrorEvent} */ (e));
  86.         });
  88.     // Notify the SDK when the video has ended, so it can play post-roll ads.
  89.     this.eventManager_.listen(this.video_, 'ended', () => {
  90.       this.adsLoader_.contentComplete();
  91.     });
  93.     this.eventManager_.listenOnce(this.video_, 'play', () => {
  94.       this.videoPlayed_ = true;
  95.     });
  96.   }
  98.   /**
  99.    * @param {!google.ima.AdsRequest} imaRequest
  100.    */
  101.   requestAds(imaRequest) {
  102.     goog.asserts.assert(
  103.         imaRequest.adTagUrl || imaRequest.adsResponse,
  104.         'The ad tag needs to be set up before requesting ads, ' +
  105.           'or adsResponse must be filled.');
  106.     this.requestAdsStartTime_ = Date.now() / 1000;
  107.     this.adsLoader_.requestAds(imaRequest);
  108.   }
  110.   /**
  111.    * Stop all currently playing ads.
  112.    */
  113.   stop() {
  114.     // this.imaAdsManager_ might not be set yet... if, for example, an ad
  115.     // blocker prevented the ads from ever loading.
  116.     if (this.imaAdsManager_) {
  117.       this.imaAdsManager_.stop();
  118.     }
  119.     if (this.adContainer_) {
  120.       shaka.util.Dom.removeAllChildren(this.adContainer_);
  121.     }
  122.   }
  124.   /** @override */
  125.   release() {
  126.     this.stop();
  127.     if (this.resizeObserver_) {
  128.       this.resizeObserver_.disconnect();
  129.     }
  130.     if (this.eventManager_) {
  131.       this.eventManager_.release();
  132.     }
  133.     if (this.imaAdsManager_) {
  134.       this.imaAdsManager_.destroy();
  135.     }
  136.     this.adsLoader_.destroy();
  137.   }
  139.   /**
  140.    * @param {!google.ima.AdErrorEvent} e
  141.    * @private
  142.    */
  143.   onAdError_(e) {
  144.     shaka.log.warning(
  145.         'There was an ad error from the IMA SDK: ' + e.getError());
  146.     shaka.log.warning('Resuming playback.');
  147.     this.onAdComplete_(/* adEvent= */ null);
  148.     // Remove ad breaks from the timeline
  149.     this.onEvent_(
  150.         new shaka.util.FakeEvent(shaka.ads.AdManager.CUEPOINTS_CHANGED,
  151.             (new Map()).set('cuepoints', [])));
  152.   }
  155.   /**
  156.    * @param {!google.ima.AdsManagerLoadedEvent} e
  157.    * @private
  158.    */
  159.   onAdsManagerLoaded_(e) {
  160.     goog.asserts.assert(this.video_ != null, 'Video should not be null!');
  162.     const now = Date.now() / 1000;
  163.     const loadTime = now - this.requestAdsStartTime_;
  164.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.ADS_LOADED,
  165.         (new Map()).set('loadTime', loadTime)));
  167.     this.imaAdsManager_ = e.getAdsManager(this.video_);
  169.     this.onEvent_(new shaka.util.FakeEvent(
  170.         shaka.ads.AdManager.IMA_AD_MANAGER_LOADED,
  171.         (new Map()).set('imaAdManager', this.imaAdsManager_)));
  173.     const cuePointStarts = this.imaAdsManager_.getCuePoints();
  174.     if (cuePointStarts.length) {
  175.       /** @type {!Array.<!shaka.extern.AdCuePoint>} */
  176.       const cuePoints = [];
  177.       for (const start of cuePointStarts) {
  178.         /** @type {shaka.extern.AdCuePoint} */
  179.         const shakaCuePoint = {
  180.           start: start,
  181.           end: null,
  182.         };
  183.         cuePoints.push(shakaCuePoint);
  184.       }
  186.       this.onEvent_(new shaka.util.FakeEvent(
  187.           shaka.ads.AdManager.CUEPOINTS_CHANGED,
  188.           (new Map()).set('cuepoints', cuePoints)));
  189.     }
  191.     this.addImaEventListeners_();
  193.     try {
  194.       const viewMode = this.isFullScreenEnabled_() ?
  195.           google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  197.       this.imaAdsManager_.init(this.video_.offsetWidth,
  198.           this.video_.offsetHeight, viewMode);
  200.       // Wait on the 'loadeddata' event rather than the 'loadedmetadata' event
  201.       // because 'loadedmetadata' is sometimes called before the video resizes
  202.       // on some platforms (e.g. Safari).
  203.       this.eventManager_.listen(this.video_, 'loadeddata', () => {
  204.         const viewMode = this.isFullScreenEnabled_() ?
  205.             google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  206.         this.imaAdsManager_.resize(this.video_.offsetWidth,
  207.             this.video_.offsetHeight, viewMode);
  208.       });
  210.       if ('ResizeObserver' in window) {
  211.         this.resizeObserver_ = new ResizeObserver(() => {
  212.           const viewMode = this.isFullScreenEnabled_() ?
  213.               google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  214.           this.imaAdsManager_.resize(this.video_.offsetWidth,
  215.               this.video_.offsetHeight, viewMode);
  216.         });
  217.         this.resizeObserver_.observe(this.video_);
  218.       } else {
  219.         this.eventManager_.listen(document, 'fullscreenchange', () => {
  220.           const viewMode = this.isFullScreenEnabled_() ?
  221.               google.ima.ViewMode.FULLSCREEN : google.ima.ViewMode.NORMAL;
  222.           this.imaAdsManager_.resize(this.video_.offsetWidth,
  223.               this.video_.offsetHeight, viewMode);
  224.         });
  225.       }
  227.       // Single video and overlay ads will start at this time
  228.       // TODO (ismena): Need a better inderstanding of what this does.
  229.       // The docs say it's called to 'start playing the ads,' but I haven't
  230.       // seen the ads actually play until requestAds() is called.
  231.       // Note: We listen for a play event to avoid autoplay issues that might
  232.       // crash IMA.
  233.       if (this.videoPlayed_) {
  234.         this.imaAdsManager_.start();
  235.       } else {
  236.         this.eventManager_.listenOnce(this.video_, 'play', () => {
  237.           this.videoPlayed_ = true;
  238.           this.imaAdsManager_.start();
  239.         });
  240.       }
  241.     } catch (adError) {
  242.       // If there was a problem with the VAST response,
  243.       // we we won't be getting an ad. Hide ad UI if we showed it already
  244.       // and get back to the presentation.
  245.       this.onAdComplete_(/* adEvent= */ null);
  246.     }
  247.   }
  250.   /**
  251.    * @return {boolean}
  252.    * @private
  253.    */
  254.   isFullScreenEnabled_() {
  255.     if (document.fullscreenEnabled) {
  256.       return !!document.fullscreenElement;
  257.     } else {
  258.       const video = /** @type {HTMLVideoElement} */(this.video_);
  259.       if (video.webkitSupportsFullscreen) {
  260.         return video.webkitDisplayingFullscreen;
  261.       }
  262.     }
  263.     return false;
  264.   }
  267.   /**
  268.    * @private
  269.    */
  270.   addImaEventListeners_() {
  271.     /**
  272.      * @param {!Event} e
  273.      * @param {string} type
  274.      */
  275.     const convertEventAndSend = (e, type) => {
  276.       const data = (new Map()).set('originalEvent', e);
  277.       this.onEvent_(new shaka.util.FakeEvent(type, data));
  278.     };
  280.     this.eventManager_.listen(this.imaAdsManager_,
  281.         google.ima.AdErrorEvent.Type.AD_ERROR, (error) => {
  282.           this.onAdError_(/** @type {!google.ima.AdErrorEvent} */ (error));
  283.         });
  285.     this.eventManager_.listen(this.imaAdsManager_,
  286.         google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, (e) => {
  287.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  288.         });
  290.     this.eventManager_.listen(this.imaAdsManager_,
  291.         google.ima.AdEvent.Type.STARTED, (e) => {
  292.           this.onAdStart_(/** @type {!google.ima.AdEvent} */ (e));
  293.         });
  295.     this.eventManager_.listen(this.imaAdsManager_,
  296.         google.ima.AdEvent.Type.FIRST_QUARTILE, (e) => {
  297.           convertEventAndSend(e, shaka.ads.AdManager.AD_FIRST_QUARTILE);
  298.         });
  300.     this.eventManager_.listen(this.imaAdsManager_,
  301.         google.ima.AdEvent.Type.MIDPOINT, (e) => {
  302.           convertEventAndSend(e, shaka.ads.AdManager.AD_MIDPOINT);
  303.         });
  305.     this.eventManager_.listen(this.imaAdsManager_,
  306.         google.ima.AdEvent.Type.THIRD_QUARTILE, (e) => {
  307.           convertEventAndSend(e, shaka.ads.AdManager.AD_THIRD_QUARTILE);
  308.         });
  310.     this.eventManager_.listen(this.imaAdsManager_,
  311.         google.ima.AdEvent.Type.COMPLETE, (e) => {
  312.           convertEventAndSend(e, shaka.ads.AdManager.AD_COMPLETE);
  313.         });
  315.     this.eventManager_.listen(this.imaAdsManager_,
  316.         google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, (e) => {
  317.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  318.         });
  320.     this.eventManager_.listen(this.imaAdsManager_,
  321.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  322.           this.onAdComplete_(/** @type {!google.ima.AdEvent} */ (e));
  323.         });
  325.     this.eventManager_.listen(this.imaAdsManager_,
  326.         google.ima.AdEvent.Type.SKIPPED, (e) => {
  327.           convertEventAndSend(e, shaka.ads.AdManager.AD_SKIPPED);
  328.         });
  330.     this.eventManager_.listen(this.imaAdsManager_,
  331.         google.ima.AdEvent.Type.VOLUME_CHANGED, (e) => {
  332.           convertEventAndSend(e, shaka.ads.AdManager.AD_VOLUME_CHANGED);
  333.         });
  335.     this.eventManager_.listen(this.imaAdsManager_,
  336.         google.ima.AdEvent.Type.VOLUME_MUTED, (e) => {
  337.           convertEventAndSend(e, shaka.ads.AdManager.AD_MUTED);
  338.         });
  340.     this.eventManager_.listen(this.imaAdsManager_,
  341.         google.ima.AdEvent.Type.PAUSED, (e) => {
  342.           if (this.ad_) {
  343.             this.ad_.setPaused(true);
  344.             convertEventAndSend(e, shaka.ads.AdManager.AD_PAUSED);
  345.           }
  346.         });
  348.     this.eventManager_.listen(this.imaAdsManager_,
  349.         google.ima.AdEvent.Type.RESUMED, (e) => {
  350.           if (this.ad_) {
  351.             this.ad_.setPaused(false);
  352.             convertEventAndSend(e, shaka.ads.AdManager.AD_RESUMED);
  353.           }
  354.         });
  356.     this.eventManager_.listen(this.imaAdsManager_,
  357.         google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, (e) => {
  358.           if (this.ad_) {
  359.             convertEventAndSend(e, shaka.ads.AdManager.AD_SKIP_STATE_CHANGED);
  360.           }
  361.         });
  363.     this.eventManager_.listen(this.imaAdsManager_,
  364.         google.ima.AdEvent.Type.CLICK, (e) => {
  365.           convertEventAndSend(e, shaka.ads.AdManager.AD_CLICKED);
  366.         });
  368.     this.eventManager_.listen(this.imaAdsManager_,
  369.         google.ima.AdEvent.Type.AD_PROGRESS, (e) => {
  370.           convertEventAndSend(e, shaka.ads.AdManager.AD_PROGRESS);
  371.         });
  373.     this.eventManager_.listen(this.imaAdsManager_,
  374.         google.ima.AdEvent.Type.AD_BUFFERING, (e) => {
  375.           convertEventAndSend(e, shaka.ads.AdManager.AD_BUFFERING);
  376.         });
  378.     this.eventManager_.listen(this.imaAdsManager_,
  379.         google.ima.AdEvent.Type.IMPRESSION, (e) => {
  380.           convertEventAndSend(e, shaka.ads.AdManager.AD_IMPRESSION);
  381.         });
  383.     this.eventManager_.listen(this.imaAdsManager_,
  384.         google.ima.AdEvent.Type.DURATION_CHANGE, (e) => {
  385.           convertEventAndSend(e, shaka.ads.AdManager.AD_DURATION_CHANGED);
  386.         });
  388.     this.eventManager_.listen(this.imaAdsManager_,
  389.         google.ima.AdEvent.Type.USER_CLOSE, (e) => {
  390.           convertEventAndSend(e, shaka.ads.AdManager.AD_CLOSED);
  391.         });
  393.     this.eventManager_.listen(this.imaAdsManager_,
  394.         google.ima.AdEvent.Type.LOADED, (e) => {
  395.           convertEventAndSend(e, shaka.ads.AdManager.AD_LOADED);
  396.         });
  398.     this.eventManager_.listen(this.imaAdsManager_,
  399.         google.ima.AdEvent.Type.ALL_ADS_COMPLETED, (e) => {
  400.           convertEventAndSend(e, shaka.ads.AdManager.ALL_ADS_COMPLETED);
  401.         });
  403.     this.eventManager_.listen(this.imaAdsManager_,
  404.         google.ima.AdEvent.Type.LINEAR_CHANGED, (e) => {
  405.           convertEventAndSend(e, shaka.ads.AdManager.AD_LINEAR_CHANGED);
  406.         });
  408.     this.eventManager_.listen(this.imaAdsManager_,
  409.         google.ima.AdEvent.Type.AD_METADATA, (e) => {
  410.           convertEventAndSend(e, shaka.ads.AdManager.AD_METADATA);
  411.         });
  413.     this.eventManager_.listen(this.imaAdsManager_,
  414.         google.ima.AdEvent.Type.LOG, (e) => {
  415.           convertEventAndSend(e, shaka.ads.AdManager.AD_RECOVERABLE_ERROR);
  416.         });
  418.     this.eventManager_.listen(this.imaAdsManager_,
  419.         google.ima.AdEvent.Type.AD_BREAK_READY, (e) => {
  420.           convertEventAndSend(e, shaka.ads.AdManager.AD_BREAK_READY);
  421.         });
  423.     this.eventManager_.listen(this.imaAdsManager_,
  424.         google.ima.AdEvent.Type.INTERACTION, (e) => {
  425.           convertEventAndSend(e, shaka.ads.AdManager.AD_INTERACTION);
  426.         });
  427.   }
  429.   /**
  430.    * @param {!google.ima.AdEvent} e
  431.    * @private
  432.    */
  433.   onAdStart_(e) {
  434.     goog.asserts.assert(this.imaAdsManager_,
  435.         'Should have an ads manager at this point!');
  437.     const imaAd = e.getAd();
  438.     if (!imaAd) {
  439.       // Sometimes the IMA SDK will fire a CONTENT_PAUSE_REQUESTED or STARTED
  440.       // event with no associated ad object.
  441.       // We can't really play an ad in that situation, so just ignore the event.
  442.       shaka.log.alwaysWarn(
  443.           'The IMA SDK fired a ' + e.type + ' event with no associated ad. ' +
  444.           'Unable to play ad!');
  445.       return;
  446.     }
  448.     this.ad_ = new shaka.ads.ClientSideAd(imaAd,
  449.         this.imaAdsManager_, this.video_);
  450.     const data = new Map()
  451.         .set('ad', this.ad_)
  452.         .set('sdkAdObject', imaAd)
  453.         .set('originalEvent', e);
  454.     this.onEvent_(new shaka.util.FakeEvent(
  455.         shaka.ads.AdManager.AD_STARTED, data));
  456.     if (this.ad_.isLinear()) {
  457.       this.adContainer_.setAttribute('ad-active', 'true');
  458.       this.video_.pause();
  459.       if (this.video_.muted) {
  460.         this.ad_.setInitialMuted(this.video_.volume);
  461.       } else {
  462.         this.ad_.setVolume(this.video_.volume);
  463.       }
  464.     }
  465.   }
  467.   /**
  468.    * @param {?google.ima.AdEvent} e
  469.    * @private
  470.    */
  471.   onAdComplete_(e) {
  472.     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED,
  473.         (new Map()).set('originalEvent', e)));
  474.     if (this.ad_ && this.ad_.isLinear()) {
  475.       this.adContainer_.removeAttribute('ad-active');
  476.       if (!this.video_.ended) {
  477.         this.video_.play();
  478.       }
  479.     }
  480.   }
  481. };