Source: ui/ad_statistics_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.AdStatisticsButton');
  10. goog.require('shaka.log');
  11. goog.require('shaka.ads.Utils');
  12. goog.require('shaka.ui.ContextMenu');
  13. goog.require('shaka.ui.Controls');
  14. goog.require('shaka.ui.Element');
  15. goog.require('shaka.ui.Enums');
  16. goog.require('shaka.ui.Locales');
  17. goog.require('shaka.ui.Localization');
  18. goog.require('shaka.ui.OverflowMenu');
  19. goog.require('shaka.ui.Utils');
  20. goog.require('shaka.util.Dom');
  21. goog.require('shaka.util.Timer');
  22. goog.requireType('shaka.ui.Controls');
  25. /**
  26.  * @extends {shaka.ui.Element}
  27.  * @final
  28.  * @export
  29.  */
  30. shaka.ui.AdStatisticsButton = class extends shaka.ui.Element {
  31.   /**
  32.    * @param {!HTMLElement} parent
  33.    * @param {!shaka.ui.Controls} controls
  34.    */
  35.   constructor(parent, controls) {
  36.     super(parent, controls);
  38.     /** @private {!HTMLButtonElement} */
  39.     this.button_ = shaka.util.Dom.createButton();
  40.     this.button_.classList.add('shaka-ad-statistics-button');
  42.     /** @private {!HTMLElement} */
  43.     this.icon_ = shaka.util.Dom.createHTMLElement('i');
  44.     this.icon_.classList.add('material-icons-round');
  45.     this.icon_.textContent =
  46.       shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
  47.     this.button_.appendChild(this.icon_);
  49.     const label = shaka.util.Dom.createHTMLElement('label');
  50.     label.classList.add('shaka-overflow-button-label');
  52.     /** @private {!HTMLElement} */
  53.     this.nameSpan_ = shaka.util.Dom.createHTMLElement('span');
  54.     label.appendChild(this.nameSpan_);
  56.     /** @private {!HTMLElement} */
  57.     this.stateSpan_ = shaka.util.Dom.createHTMLElement('span');
  58.     this.stateSpan_.classList.add('shaka-current-selection-span');
  59.     label.appendChild(this.stateSpan_);
  61.     this.button_.appendChild(label);
  63.     this.parent.appendChild(this.button_);
  65.     /** @private {!HTMLElement} */
  66.     this.container_ = shaka.util.Dom.createHTMLElement('div');
  67.     this.container_.classList.add('shaka-no-propagation');
  68.     this.container_.classList.add('shaka-show-controls-on-mouse-over');
  69.     this.container_.classList.add('shaka-ad-statistics-container');
  70.     this.container_.classList.add('shaka-hidden');
  72.     const controlsContainer = this.controls.getControlsContainer();
  73.     controlsContainer.appendChild(this.container_);
  75.     /** @private {!Array} */
  76.     this.statisticsList_ = [];
  78.     /** @private {!Object.<string, (number|!Array.<number>)>} */
  79.     this.currentStats_ = this.adManager.getStats();
  81.     /** @private {!Object.<string, HTMLElement>} */
  82.     this.displayedElements_ = {};
  84.     const parseLoadTimes = (name) => {
  85.       let totalTime = 0;
  86.       const loadTimes =
  87.         /** @type {!Array.<number>} */ (this.currentStats_[name]);
  88.       for (const loadTime of loadTimes) {
  89.         totalTime += parseFloat(loadTime);
  90.       }
  91.       return totalTime;
  92.     };
  94.     const showNumber = (name) => {
  95.       return this.currentStats_[name];
  96.     };
  98.     /** @private {!Object.<string, function(string):string>} */
  99.     this.parseFrom_ = {
  100.       'loadTimes': parseLoadTimes,
  101.       'averageLoadTime': showNumber,
  102.       'started': showNumber,
  103.       'playedCompletely': showNumber,
  104.       'skipped': showNumber,
  105.       'errors': showNumber,
  106.     };
  108.     /** @private {shaka.util.Timer} */
  109.     this.timer_ = new shaka.util.Timer(() => {
  110.       this.onTimerTick_();
  111.     });
  113.     this.updateLocalizedStrings_();
  115.     this.loadContainer_();
  117.     this.eventManager.listen(
  118.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  119.           this.updateLocalizedStrings_();
  120.         });
  122.     this.eventManager.listen(
  123.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  124.           this.updateLocalizedStrings_();
  125.         });
  127.     this.eventManager.listen(this.button_, 'click', () => {
  128.       this.onClick_();
  129.       this.updateLocalizedStrings_();
  130.     });
  132.     this.eventManager.listen(this.player, 'loading', () => {
  133.       shaka.ui.Utils.setDisplay(this.button_, false);
  134.     });
  136.     this.eventManager.listen(
  137.         this.adManager, shaka.ads.Utils.AD_STARTED, () => {
  138.           shaka.ui.Utils.setDisplay(this.button_, true);
  139.         });
  140.   }
  142.   /** @private */
  143.   onClick_() {
  144.     shaka.ui.Utils.setDisplay(this.parent, false);
  146.     if (this.container_.classList.contains('shaka-hidden')) {
  147.       this.icon_.textContent =
  148.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_OFF;
  149.       this.timer_.tickEvery(0.1);
  150.       shaka.ui.Utils.setDisplay(this.container_, true);
  151.     } else {
  152.       this.icon_.textContent =
  153.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
  154.       this.timer_.stop();
  155.       shaka.ui.Utils.setDisplay(this.container_, false);
  156.     }
  157.   }
  159.   /** @private */
  160.   updateLocalizedStrings_() {
  161.     const LocIds = shaka.ui.Locales.Ids;
  163.     this.nameSpan_.textContent =
  164.         this.localization.resolve(LocIds.AD_STATISTICS);
  166.     this.button_.ariaLabel = this.localization.resolve(LocIds.AD_STATISTICS);
  168.     const labelText = this.container_.classList.contains('shaka-hidden') ?
  169.         LocIds.OFF : LocIds.ON;
  170.     this.stateSpan_.textContent = this.localization.resolve(labelText);
  171.   }
  173.   /** @private */
  174.   generateComponent_(name) {
  175.     const section = shaka.util.Dom.createHTMLElement('div');
  177.     const label = shaka.util.Dom.createHTMLElement('label');
  178.     label.textContent = name + ':';
  179.     section.appendChild(label);
  181.     const value = shaka.util.Dom.createHTMLElement('span');
  182.     value.textContent = this.parseFrom_[name](name);
  183.     section.appendChild(value);
  185.     this.displayedElements_[name] = value;
  187.     return section;
  188.   }
  190.   /** @private */
  191.   loadContainer_() {
  192.     for (const name of this.controls.getConfig().adStatisticsList) {
  193.       if (name in this.currentStats_) {
  194.         this.container_.appendChild(this.generateComponent_(name));
  195.         this.statisticsList_.push(name);
  196.       } else {
  197.         shaka.log.alwaysWarn('Unrecognized ad statistic element:', name);
  198.       }
  199.     }
  200.   }
  202.   /** @private */
  203.   onTimerTick_() {
  204.     this.currentStats_ = this.adManager.getStats();
  206.     for (const name of this.statisticsList_) {
  207.       this.displayedElements_[name].textContent =
  208.           this.parseFrom_[name](name);
  209.     }
  210.   }
  212.   /** @override */
  213.   release() {
  214.     this.timer_.stop();
  215.     this.timer_ = null;
  216.     super.release();
  217.   }
  218. };
  221. /**
  222.  * @implements {shaka.extern.IUIElement.Factory}
  223.  * @final
  224.  */
  225. shaka.ui.AdStatisticsButton.Factory = class {
  226.   /** @override */
  227.   create(rootElement, controls) {
  228.     return new shaka.ui.AdStatisticsButton(rootElement, controls);
  229.   }
  230. };
  233. shaka.ui.OverflowMenu.registerElement(
  234.     'ad_statistics', new shaka.ui.AdStatisticsButton.Factory());
  236. shaka.ui.ContextMenu.registerElement(
  237.     'ad_statistics', new shaka.ui.AdStatisticsButton.Factory());