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.MaterialSVGIcon');
  19. goog.require('shaka.ui.OverflowMenu');
  20. goog.require('shaka.ui.Utils');
  21. goog.require('shaka.util.Dom');
  22. goog.require('shaka.util.Timer');
  23. goog.requireType('shaka.ui.Controls');
  26. /**
  27.  * @extends {shaka.ui.Element}
  28.  * @final
  29.  * @export
  30.  */
  31. shaka.ui.AdStatisticsButton = class extends shaka.ui.Element {
  32.   /**
  33.    * @param {!HTMLElement} parent
  34.    * @param {!shaka.ui.Controls} controls
  35.    */
  36.   constructor(parent, controls) {
  37.     super(parent, controls);
  39.     /** @private {!HTMLButtonElement} */
  40.     this.button_ = shaka.util.Dom.createButton();
  41.     this.button_.classList.add('shaka-ad-statistics-button');
  43.     /** @private {!shaka.ui.MaterialSVGIcon} */
  44.     this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
  45.         shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON);
  47.     const label = shaka.util.Dom.createHTMLElement('label');
  48.     label.classList.add('shaka-overflow-button-label');
  49.     label.classList.add('shaka-simple-overflow-button-label-inline');
  51.     /** @private {!HTMLElement} */
  52.     this.nameSpan_ = shaka.util.Dom.createHTMLElement('span');
  53.     label.appendChild(this.nameSpan_);
  55.     /** @private {!HTMLElement} */
  56.     this.stateSpan_ = shaka.util.Dom.createHTMLElement('span');
  57.     this.stateSpan_.classList.add('shaka-current-selection-span');
  58.     label.appendChild(this.stateSpan_);
  60.     this.button_.appendChild(label);
  62.     this.parent.appendChild(this.button_);
  64.     /** @private {!HTMLElement} */
  65.     this.container_ = shaka.util.Dom.createHTMLElement('div');
  66.     this.container_.classList.add('shaka-no-propagation');
  67.     this.container_.classList.add('shaka-show-controls-on-mouse-over');
  68.     this.container_.classList.add('shaka-ad-statistics-container');
  69.     this.container_.classList.add('shaka-hidden');
  71.     const controlsContainer = this.controls.getControlsContainer();
  72.     controlsContainer.appendChild(this.container_);
  74.     /** @private {!Array} */
  75.     this.statisticsList_ = [];
  77.     /** @private {!shaka.extern.AdsStats} */
  78.     this.currentStats_ = this.adManager.getStats();
  80.     shaka.ui.Utils.setDisplay(this.button_, this.currentStats_.started > 0);
  82.     /** @private {!Map<string, HTMLElement>} */
  83.     this.displayedElements_ = new Map();
  85.     const parseLoadTimes = (name) => {
  86.       let totalTime = 0;
  87.       const loadTimes =
  88.         /** @type {!Array<number>} */ (this.currentStats_[name]);
  89.       for (const loadTime of loadTimes) {
  90.         totalTime += parseFloat(loadTime);
  91.       }
  92.       return totalTime;
  93.     };
  95.     const showNumber = (name) => {
  96.       return this.currentStats_[name];
  97.     };
  99.     /** @private {!Map<string, function(string): string>} */
  100.     this.parseFrom_ = new Map()
  101.         .set('loadTimes', parseLoadTimes)
  102.         .set('averageLoadTime', showNumber)
  103.         .set('started', showNumber)
  104.         .set('overlayAds', showNumber)
  105.         .set('playedCompletely', showNumber)
  106.         .set('skipped', showNumber)
  107.         .set('errors', showNumber);
  109.     /** @private {shaka.util.Timer} */
  110.     this.timer_ = new shaka.util.Timer(() => {
  111.       this.onTimerTick_();
  112.     });
  114.     this.updateLocalizedStrings_();
  116.     this.loadContainer_();
  118.     this.eventManager.listen(
  119.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  120.           this.updateLocalizedStrings_();
  121.         });
  123.     this.eventManager.listen(
  124.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  125.           this.updateLocalizedStrings_();
  126.         });
  128.     this.eventManager.listen(this.button_, 'click', () => {
  129.       if (!this.controls.isOpaque()) {
  130.         return;
  131.       }
  132.       this.onClick_();
  133.       this.updateLocalizedStrings_();
  134.     });
  136.     this.eventManager.listen(this.player, 'loading', () => {
  137.       shaka.ui.Utils.setDisplay(this.button_, false);
  138.     });
  140.     this.eventManager.listen(
  141.         this.adManager, shaka.ads.Utils.AD_STARTED, () => {
  142.           shaka.ui.Utils.setDisplay(this.button_, true);
  143.         });
  144.   }
  146.   /** @private */
  147.   onClick_() {
  148.     if (this.container_.classList.contains('shaka-hidden')) {
  149.       this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_OFF);
  150.       this.timer_.tickEvery(0.1);
  151.       shaka.ui.Utils.setDisplay(this.container_, true);
  152.     } else {
  153.       this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.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.   /**
  174.    * @param {string} name
  175.    * @return {!HTMLElement}
  176.    * @private
  177.    */
  178.   generateComponent_(name) {
  179.     const section = shaka.util.Dom.createHTMLElement('div');
  181.     const label = shaka.util.Dom.createHTMLElement('label');
  182.     label.textContent = name + ':';
  183.     section.appendChild(label);
  185.     const value = shaka.util.Dom.createHTMLElement('span');
  186.     value.textContent = this.parseFrom_.get(name)(name);
  187.     section.appendChild(value);
  189.     this.displayedElements_.set(name, value);
  191.     return section;
  192.   }
  194.   /** @private */
  195.   loadContainer_() {
  196.     const closeElement = shaka.util.Dom.createHTMLElement('div');
  197.     closeElement.classList.add('shaka-no-propagation');
  198.     closeElement.classList.add('shaka-statistics-close');
  199.     const icon = new shaka.ui.MaterialSVGIcon(closeElement,
  200.         shaka.ui.Enums.MaterialDesignSVGIcons.CLOSE);
  201.     const iconElement = icon.getSvgElement();
  202.     iconElement.classList.add('material-icons', 'notranslate');
  204.     this.container_.appendChild(closeElement);
  205.     this.eventManager.listen(iconElement, 'click', () => {
  206.       this.onClick_();
  207.     });
  208.     for (const name of this.controls.getConfig().adStatisticsList) {
  209.       if (name in this.currentStats_) {
  210.         this.container_.appendChild(this.generateComponent_(name));
  211.         this.statisticsList_.push(name);
  212.       } else {
  213.         shaka.log.alwaysWarn('Unrecognized ad statistic element:', name);
  214.       }
  215.     }
  216.   }
  218.   /** @private */
  219.   onTimerTick_() {
  220.     this.currentStats_ = this.adManager.getStats();
  222.     for (const name of this.statisticsList_) {
  223.       this.displayedElements_.get(name).textContent =
  224.           this.parseFrom_.get(name)(name);
  225.     }
  226.   }
  228.   /** @override */
  229.   release() {
  230.     this.timer_.stop();
  231.     this.timer_ = null;
  232.     super.release();
  233.   }
  234. };
  237. /**
  238.  * @implements {shaka.extern.IUIElement.Factory}
  239.  * @final
  240.  */
  241. shaka.ui.AdStatisticsButton.Factory = class {
  242.   /** @override */
  243.   create(rootElement, controls) {
  244.     return new shaka.ui.AdStatisticsButton(rootElement, controls);
  245.   }
  246. };
  249. shaka.ui.OverflowMenu.registerElement(
  250.     'ad_statistics', new shaka.ui.AdStatisticsButton.Factory());
  252. shaka.ui.ContextMenu.registerElement(
  253.     'ad_statistics', new shaka.ui.AdStatisticsButton.Factory());