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 {!shaka.extern.AdsStats} */
  79.     this.currentStats_ = this.adManager.getStats();
  81.     shaka.ui.Utils.setDisplay(this.button_, this.currentStats_.started > 0);
  83.     /** @private {!Map<string, HTMLElement>} */
  84.     this.displayedElements_ = new Map();
  86.     const parseLoadTimes = (name) => {
  87.       let totalTime = 0;
  88.       const loadTimes =
  89.         /** @type {!Array<number>} */ (this.currentStats_[name]);
  90.       for (const loadTime of loadTimes) {
  91.         totalTime += parseFloat(loadTime);
  92.       }
  93.       return totalTime;
  94.     };
  96.     const showNumber = (name) => {
  97.       return this.currentStats_[name];
  98.     };
  100.     /** @private {!Map<string, function(string): string>} */
  101.     this.parseFrom_ = new Map()
  102.         .set('loadTimes', parseLoadTimes)
  103.         .set('averageLoadTime', showNumber)
  104.         .set('started', showNumber)
  105.         .set('overlayAds', showNumber)
  106.         .set('playedCompletely', showNumber)
  107.         .set('skipped', showNumber)
  108.         .set('errors', showNumber);
  110.     /** @private {shaka.util.Timer} */
  111.     this.timer_ = new shaka.util.Timer(() => {
  112.       this.onTimerTick_();
  113.     });
  115.     this.updateLocalizedStrings_();
  117.     this.loadContainer_();
  119.     this.eventManager.listen(
  120.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  121.           this.updateLocalizedStrings_();
  122.         });
  124.     this.eventManager.listen(
  125.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  126.           this.updateLocalizedStrings_();
  127.         });
  129.     this.eventManager.listen(this.button_, 'click', () => {
  130.       if (!this.controls.isOpaque()) {
  131.         return;
  132.       }
  133.       this.onClick_();
  134.       this.updateLocalizedStrings_();
  135.     });
  137.     this.eventManager.listen(this.player, 'loading', () => {
  138.       shaka.ui.Utils.setDisplay(this.button_, false);
  139.     });
  141.     this.eventManager.listen(
  142.         this.adManager, shaka.ads.Utils.AD_STARTED, () => {
  143.           shaka.ui.Utils.setDisplay(this.button_, true);
  144.         });
  145.   }
  147.   /** @private */
  148.   onClick_() {
  149.     if (this.container_.classList.contains('shaka-hidden')) {
  150.       this.icon_.textContent =
  151.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_OFF;
  152.       this.timer_.tickEvery(0.1);
  153.       shaka.ui.Utils.setDisplay(this.container_, true);
  154.     } else {
  155.       this.icon_.textContent =
  156.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
  157.       this.timer_.stop();
  158.       shaka.ui.Utils.setDisplay(this.container_, false);
  159.     }
  160.   }
  162.   /** @private */
  163.   updateLocalizedStrings_() {
  164.     const LocIds = shaka.ui.Locales.Ids;
  166.     this.nameSpan_.textContent =
  167.         this.localization.resolve(LocIds.AD_STATISTICS);
  169.     this.button_.ariaLabel = this.localization.resolve(LocIds.AD_STATISTICS);
  171.     const labelText = this.container_.classList.contains('shaka-hidden') ?
  172.         LocIds.OFF : LocIds.ON;
  173.     this.stateSpan_.textContent = this.localization.resolve(labelText);
  174.   }
  176.   /**
  177.    * @param {string} name
  178.    * @return {!HTMLElement}
  179.    * @private
  180.    */
  181.   generateComponent_(name) {
  182.     const section = shaka.util.Dom.createHTMLElement('div');
  184.     const label = shaka.util.Dom.createHTMLElement('label');
  185.     label.textContent = name + ':';
  186.     section.appendChild(label);
  188.     const value = shaka.util.Dom.createHTMLElement('span');
  189.     value.textContent = this.parseFrom_.get(name)(name);
  190.     section.appendChild(value);
  192.     this.displayedElements_.set(name, value);
  194.     return section;
  195.   }
  197.   /** @private */
  198.   loadContainer_() {
  199.     const closeElement = shaka.util.Dom.createHTMLElement('div');
  200.     closeElement.classList.add('shaka-no-propagation');
  201.     closeElement.classList.add('shaka-statistics-close');
  202.     const icon = shaka.util.Dom.createHTMLElement('i');
  203.     icon.classList.add('material-icons-round');
  204.     icon.textContent =
  205.       shaka.ui.Enums.MaterialDesignIcons.CLOSE;
  206.     closeElement.appendChild(icon);
  207.     this.container_.appendChild(closeElement);
  208.     this.eventManager.listen(icon, 'click', () => {
  209.       this.onClick_();
  210.     });
  211.     for (const name of this.controls.getConfig().adStatisticsList) {
  212.       if (name in this.currentStats_) {
  213.         this.container_.appendChild(this.generateComponent_(name));
  214.         this.statisticsList_.push(name);
  215.       } else {
  216.         shaka.log.alwaysWarn('Unrecognized ad statistic element:', name);
  217.       }
  218.     }
  219.   }
  221.   /** @private */
  222.   onTimerTick_() {
  223.     this.currentStats_ = this.adManager.getStats();
  225.     for (const name of this.statisticsList_) {
  226.       this.displayedElements_.get(name).textContent =
  227.           this.parseFrom_.get(name)(name);
  228.     }
  229.   }
  231.   /** @override */
  232.   release() {
  233.     this.timer_.stop();
  234.     this.timer_ = null;
  235.     super.release();
  236.   }
  237. };
  240. /**
  241.  * @implements {shaka.extern.IUIElement.Factory}
  242.  * @final
  243.  */
  244. shaka.ui.AdStatisticsButton.Factory = class {
  245.   /** @override */
  246.   create(rootElement, controls) {
  247.     return new shaka.ui.AdStatisticsButton(rootElement, controls);
  248.   }
  249. };
  252. shaka.ui.OverflowMenu.registerElement(
  253.     'ad_statistics', new shaka.ui.AdStatisticsButton.Factory());
  255. shaka.ui.ContextMenu.registerElement(
  256.     'ad_statistics', new shaka.ui.AdStatisticsButton.Factory());