Source: ui/skip_ad_button.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.SkipAdButton');
  10. goog.require('goog.asserts');
  11. goog.require('shaka.ads.Utils');
  12. goog.require('shaka.ui.Element');
  13. goog.require('shaka.ui.Locales');
  14. goog.require('shaka.ui.Localization');
  15. goog.require('shaka.ui.Utils');
  16. goog.require('shaka.util.Dom');
  17. goog.require('shaka.util.Timer');
  18. goog.requireType('shaka.ui.Controls');
  21. /**
  22.  * @extends {shaka.ui.Element}
  23.  * @final
  24.  * @export
  25.  */
  26. shaka.ui.SkipAdButton = class extends shaka.ui.Element {
  27.   /**
  28.    * @param {!HTMLElement} parent
  29.    * @param {!shaka.ui.Controls} controls
  30.    */
  31.   constructor(parent, controls) {
  32.     super(parent, controls);
  34.     /** @private {!HTMLElement} */
  35.     this.container_ = shaka.util.Dom.createHTMLElement('div');
  36.     this.container_.classList.add('shaka-skip-ad-container');
  37.     this.parent.appendChild(this.container_);
  39.     /** @private {!HTMLElement} */
  40.     this.counter_ = shaka.util.Dom.createHTMLElement('div');
  41.     this.counter_.classList.add('shaka-skip-ad-counter');
  42.     shaka.ui.Utils.setDisplay(this.counter_, false);
  43.     this.container_.appendChild(this.counter_);
  45.     /** @private {!HTMLButtonElement} */
  46.     this.button_ = shaka.util.Dom.createButton();
  47.     this.button_.classList.add('shaka-skip-ad-button');
  48.     this.button_.disabled = true;
  49.     shaka.ui.Utils.setDisplay(this.button_, false);
  50.     this.button_.classList.add('shaka-no-propagation');
  51.     this.container_.appendChild(this.button_);
  52.     this.updateAriaLabel_();
  53.     this.updateLocalizedStrings_();
  55.     /**
  56.      * The timer that tracks down the ad progress until it can be skipped.
  57.      *
  58.      * @private {shaka.util.Timer}
  59.      */
  60.     this.timer_ = new shaka.util.Timer(() => {
  61.       this.onTimerTick_();
  62.     });
  64.     this.eventManager.listen(
  65.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  66.           this.updateAriaLabel_();
  67.           this.updateLocalizedStrings_();
  68.         });
  70.     this.eventManager.listen(
  71.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  72.           this.updateAriaLabel_();
  73.           this.updateLocalizedStrings_();
  74.         });
  76.     this.eventManager.listen(
  77.         this.adManager, shaka.ads.Utils.AD_STARTED, () => {
  78.           this.onAdStarted_();
  79.         });
  81.     this.eventManager.listen(
  82.         this.adManager, shaka.ads.Utils.AD_SKIP_STATE_CHANGED, () => {
  83.           this.onSkipStateChanged_();
  84.         });
  86.     this.eventManager.listen(
  87.         this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
  88.           this.reset_();
  89.         });
  91.     this.eventManager.listen(
  92.         this.button_, 'click', () => {
  93.           this.ad.skip();
  94.         });
  96.     if (this.ad) {
  97.       // There was already an ad.
  98.       this.onAdStarted_();
  99.     }
  100.   }
  102.   /**
  103.    * @override
  104.    */
  105.   release() {
  106.     this.timer_.stop();
  107.     this.timer_ = null;
  108.     super.release();
  109.   }
  111.   /**
  112.    * @private
  113.    */
  114.   updateLocalizedStrings_() {
  115.     const LocIds = shaka.ui.Locales.Ids;
  116.     this.button_.textContent = this.localization.resolve(LocIds.SKIP_AD);
  117.   }
  119.   /**
  120.    * @private
  121.    */
  122.   updateAriaLabel_() {
  123.     // TODO
  124.   }
  126.   /**
  127.    * @private
  128.    */
  129.   onAdStarted_() {
  130.     if (this.ad.isSkippable() && this.ad.needsSkipUI()) {
  131.       shaka.ui.Utils.setDisplay(this.button_, true);
  132.       shaka.ui.Utils.setDisplay(this.counter_, true);
  133.       this.counter_.textContent = '';
  134.       this.timer_.tickNow();
  135.       this.timer_.tickEvery(0.5);
  136.     }
  137.   }
  139.   /**
  140.    * @private
  141.    */
  142.   onTimerTick_() {
  143.     goog.asserts.assert(this.ad != null,
  144.         'this.ad should exist at this point');
  145.     if (this.ad.isSkippable()) {
  146.       const secondsLeft = Math.round(this.ad.getTimeUntilSkippable());
  147.       if (secondsLeft > 0) {
  148.         this.counter_.textContent = secondsLeft;
  149.       } else {
  150.         // The ad should now be skippable. OnSkipStateChanged() is
  151.         // listening for a SKIP_STATE_CHANGED event and will take care
  152.         // of the button. Here we just stop the timer and hide the counter.
  153.         // NOTE: onSkipStateChanged_() also hides the counter.
  154.         this.timer_.stop();
  155.         shaka.ui.Utils.setDisplay(this.counter_, false);
  156.       }
  157.     } else {
  158.       this.reset_();
  159.     }
  160.   }
  162.   /**
  163.    * @private
  164.    */
  165.   onSkipStateChanged_() {
  166.     // Double-check that the ad is now skippable
  167.     if (!this.ad.isSkippable()) {
  168.       this.reset_();
  169.     } else if (this.ad.canSkipNow()) {
  170.       this.button_.disabled = false;
  171.       this.timer_.stop();
  172.       shaka.ui.Utils.setDisplay(this.counter_, false);
  173.     }
  174.   }
  176.   /**
  177.    * @private
  178.    */
  179.   reset_() {
  180.     this.timer_.stop();
  181.     this.button_.disabled = true;
  182.     shaka.ui.Utils.setDisplay(this.button_, false);
  183.     shaka.ui.Utils.setDisplay(this.counter_, false);
  184.   }
  185. };