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');
  51.     label.classList.add('shaka-simple-overflow-button-label-inline');
  53.     /** @private {!HTMLElement} */
  54.     this.nameSpan_ = shaka.util.Dom.createHTMLElement('span');
  55.     label.appendChild(this.nameSpan_);
  57.     /** @private {!HTMLElement} */
  58.     this.stateSpan_ = shaka.util.Dom.createHTMLElement('span');
  59.     this.stateSpan_.classList.add('shaka-current-selection-span');
  60.     label.appendChild(this.stateSpan_);
  62.     this.button_.appendChild(label);
  64.     this.parent.appendChild(this.button_);
  66.     /** @private {!HTMLElement} */
  67.     this.container_ = shaka.util.Dom.createHTMLElement('div');
  68.     this.container_.classList.add('shaka-no-propagation');
  69.     this.container_.classList.add('shaka-show-controls-on-mouse-over');
  70.     this.container_.classList.add('shaka-ad-statistics-container');
  71.     this.container_.classList.add('shaka-hidden');
  73.     const controlsContainer = this.controls.getControlsContainer();
  74.     controlsContainer.appendChild(this.container_);
  76.     /** @private {!Array} */
  77.     this.statisticsList_ = [];
  79.     /** @private {!shaka.extern.AdsStats} */
  80.     this.currentStats_ = this.adManager.getStats();
  82.     shaka.ui.Utils.setDisplay(this.button_, this.currentStats_.started > 0);
  84.     /** @private {!Map<string, HTMLElement>} */
  85.     this.displayedElements_ = new Map();
  87.     const parseLoadTimes = (name) => {
  88.       let totalTime = 0;
  89.       const loadTimes =
  90.         /** @type {!Array<number>} */ (this.currentStats_[name]);
  91.       for (const loadTime of loadTimes) {
  92.         totalTime += parseFloat(loadTime);
  93.       }
  94.       return totalTime;
  95.     };
  97.     const showNumber = (name) => {
  98.       return this.currentStats_[name];
  99.     };
  101.     /** @private {!Map<string, function(string): string>} */
  102.     this.parseFrom_ = new Map()
  103.         .set('loadTimes', parseLoadTimes)
  104.         .set('averageLoadTime', showNumber)
  105.         .set('started', showNumber)
  106.         .set('overlayAds', showNumber)
  107.         .set('playedCompletely', showNumber)
  108.         .set('skipped', showNumber)
  109.         .set('errors', showNumber);
  111.     /** @private {shaka.util.Timer} */
  112.     this.timer_ = new shaka.util.Timer(() => {
  113.       this.onTimerTick_();
  114.     });
  116.     this.updateLocalizedStrings_();
  118.     this.loadContainer_();
  120.     this.eventManager.listen(
  121.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  122.           this.updateLocalizedStrings_();
  123.         });
  125.     this.eventManager.listen(
  126.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  127.           this.updateLocalizedStrings_();
  128.         });
  130.     this.eventManager.listen(this.button_, 'click', () => {
  131.       if (!this.controls.isOpaque()) {
  132.         return;
  133.       }
  134.       this.onClick_();
  135.       this.updateLocalizedStrings_();
  136.     });
  138.     this.eventManager.listen(this.player, 'loading', () => {
  139.       shaka.ui.Utils.setDisplay(this.button_, false);
  140.     });
  142.     this.eventManager.listen(
  143.         this.adManager, shaka.ads.Utils.AD_STARTED, () => {
  144.           shaka.ui.Utils.setDisplay(this.button_, true);
  145.         });
  146.   }
  148.   /** @private */
  149.   onClick_() {
  150.     if (this.container_.classList.contains('shaka-hidden')) {
  151.       this.icon_.textContent =
  152.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_OFF;
  153.       this.timer_.tickEvery(0.1);
  154.       shaka.ui.Utils.setDisplay(this.container_, true);
  155.     } else {
  156.       this.icon_.textContent =
  157.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
  158.       this.timer_.stop();
  159.       shaka.ui.Utils.setDisplay(this.container_, false);
  160.     }
  161.   }
  163.   /** @private */
  164.   updateLocalizedStrings_() {
  165.     const LocIds = shaka.ui.Locales.Ids;
  167.     this.nameSpan_.textContent =
  168.         this.localization.resolve(LocIds.AD_STATISTICS);
  170.     this.button_.ariaLabel = this.localization.resolve(LocIds.AD_STATISTICS);
  172.     const labelText = this.container_.classList.contains('shaka-hidden') ?
  173.         LocIds.OFF : LocIds.ON;
  174.     this.stateSpan_.textContent = this.localization.resolve(labelText);
  175.   }
  177.   /**
  178.    * @param {string} name
  179.    * @return {!HTMLElement}
  180.    * @private
  181.    */
  182.   generateComponent_(name) {
  183.     const section = shaka.util.Dom.createHTMLElement('div');
  185.     const label = shaka.util.Dom.createHTMLElement('label');
  186.     label.textContent = name + ':';
  187.     section.appendChild(label);
  189.     const value = shaka.util.Dom.createHTMLElement('span');
  190.     value.textContent = this.parseFrom_.get(name)(name);
  191.     section.appendChild(value);
  193.     this.displayedElements_.set(name, value);
  195.     return section;
  196.   }
  198.   /** @private */
  199.   loadContainer_() {
  200.     const closeElement = shaka.util.Dom.createHTMLElement('div');
  201.     closeElement.classList.add('shaka-no-propagation');
  202.     closeElement.classList.add('shaka-statistics-close');
  203.     const icon = shaka.util.Dom.createHTMLElement('i');
  204.     icon.classList.add('material-icons');
  205.     icon.classList.add('notranslate');
  206.     icon.classList.add('material-icons-round');
  207.     icon.textContent =
  208.       shaka.ui.Enums.MaterialDesignIcons.CLOSE;
  209.     closeElement.appendChild(icon);
  210.     this.container_.appendChild(closeElement);
  211.     this.eventManager.listen(icon, 'click', () => {
  212.       this.onClick_();
  213.     });
  214.     for (const name of this.controls.getConfig().adStatisticsList) {
  215.       if (name in this.currentStats_) {
  216.         this.container_.appendChild(this.generateComponent_(name));
  217.         this.statisticsList_.push(name);
  218.       } else {
  219.         shaka.log.alwaysWarn('Unrecognized ad statistic element:', name);
  220.       }
  221.     }
  222.   }
  224.   /** @private */
  225.   onTimerTick_() {
  226.     this.currentStats_ = this.adManager.getStats();
  228.     for (const name of this.statisticsList_) {
  229.       this.displayedElements_.get(name).textContent =
  230.           this.parseFrom_.get(name)(name);
  231.     }
  232.   }
  234.   /** @override */
  235.   release() {
  236.     this.timer_.stop();
  237.     this.timer_ = null;
  238.     super.release();
  239.   }
  240. };
  243. /**
  244.  * @implements {shaka.extern.IUIElement.Factory}
  245.  * @final
  246.  */
  247. shaka.ui.AdStatisticsButton.Factory = class {
  248.   /** @override */
  249.   create(rootElement, controls) {
  250.     return new shaka.ui.AdStatisticsButton(rootElement, controls);
  251.   }
  252. };
  255. shaka.ui.OverflowMenu.registerElement(
  256.     'ad_statistics', new shaka.ui.AdStatisticsButton.Factory());
  258. shaka.ui.ContextMenu.registerElement(
  259.     'ad_statistics', new shaka.ui.AdStatisticsButton.Factory());