Source: ui/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.StatisticsButton');
  10. goog.require('shaka.log');
  11. goog.require('shaka.ui.ContextMenu');
  12. goog.require('shaka.ui.Controls');
  13. goog.require('shaka.ui.Element');
  14. goog.require('shaka.ui.Enums');
  15. goog.require('shaka.ui.Locales');
  16. goog.require('shaka.ui.Localization');
  17. goog.require('shaka.ui.OverflowMenu');
  18. goog.require('shaka.ui.Utils');
  19. goog.require('shaka.util.Dom');
  20. goog.require('shaka.util.Timer');
  21. goog.requireType('shaka.ui.Controls');
  24. /**
  25.  * @extends {shaka.ui.Element}
  26.  * @final
  27.  * @export
  28.  */
  29. shaka.ui.StatisticsButton = class extends shaka.ui.Element {
  30.   /**
  31.    * @param {!HTMLElement} parent
  32.    * @param {!shaka.ui.Controls} controls
  33.    */
  34.   constructor(parent, controls) {
  35.     super(parent, controls);
  37.     /** @private {!HTMLButtonElement} */
  38.     this.button_ = shaka.util.Dom.createButton();
  39.     this.button_.classList.add('shaka-statistics-button');
  41.     /** @private {!HTMLElement} */
  42.     this.icon_ = shaka.util.Dom.createHTMLElement('i');
  43.     this.icon_.classList.add('material-icons-round');
  44.     this.icon_.textContent =
  45.       shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
  46.     this.button_.appendChild(this.icon_);
  48.     const label = shaka.util.Dom.createHTMLElement('label');
  49.     label.classList.add('shaka-overflow-button-label');
  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-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 {!Array} */
  78.     this.skippedStats_ = ['stateHistory', 'switchHistory'];
  80.     /** @private {!Object.<string, number>} */
  81.     this.currentStats_ = this.player.getStats();
  83.     /** @private {!Object.<string, HTMLElement>} */
  84.     this.displayedElements_ = {};
  87.     const parsePx = (name) => {
  88.       return this.currentStats_[name] + ' (px)';
  89.     };
  91.     const parsePercent = (name) => {
  92.       return this.currentStats_[name] + ' (%)';
  93.     };
  95.     const parseFrames = (name) => {
  96.       return this.currentStats_[name] + ' (frames)';
  97.     };
  99.     const parseSeconds = (name) => {
  100.       return this.currentStats_[name].toFixed(2) + ' (s)';
  101.     };
  103.     const parseBits = (name) => {
  104.       return Math.round(this.currentStats_[name] / 1000) + ' (kbits/s)';
  105.     };
  107.     const parseTime = (name) => {
  108.       return shaka.ui.Utils.buildTimeString(
  109.           this.currentStats_[name], false) + ' (m)';
  110.     };
  112.     const parseGaps = (name) => {
  113.       return this.currentStats_[name] + ' (gaps)';
  114.     };
  116.     const parseStalls = (name) => {
  117.       return this.currentStats_[name] + ' (stalls)';
  118.     };
  120.     /** @private {!Object.<string, function(string):string>} */
  121.     this.parseFrom_ = {
  122.       'width': parsePx,
  123.       'height': parsePx,
  124.       'completionPercent': parsePercent,
  125.       'bufferingTime': parseSeconds,
  126.       'drmTimeSeconds': parseSeconds,
  127.       'licenseTime': parseSeconds,
  128.       'liveLatency': parseSeconds,
  129.       'loadLatency': parseSeconds,
  130.       'manifestTimeSeconds': parseSeconds,
  131.       'estimatedBandwidth': parseBits,
  132.       'streamBandwidth': parseBits,
  133.       'maxSegmentDuration': parseTime,
  134.       'pauseTime': parseTime,
  135.       'playTime': parseTime,
  136.       'corruptedFrames': parseFrames,
  137.       'decodedFrames': parseFrames,
  138.       'droppedFrames': parseFrames,
  139.       'stallsDetected': parseStalls,
  140.       'gapsJumped': parseGaps,
  141.     };
  143.     /** @private {shaka.util.Timer} */
  144.     this.timer_ = new shaka.util.Timer(() => {
  145.       this.onTimerTick_();
  146.     });
  148.     this.updateLocalizedStrings_();
  150.     this.loadContainer_();
  152.     this.eventManager.listen(
  153.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  154.           this.updateLocalizedStrings_();
  155.         });
  157.     this.eventManager.listen(
  158.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  159.           this.updateLocalizedStrings_();
  160.         });
  162.     this.eventManager.listen(this.button_, 'click', () => {
  163.       this.onClick_();
  164.       this.updateLocalizedStrings_();
  165.     });
  166.   }
  168.   /** @private */
  169.   onClick_() {
  170.     shaka.ui.Utils.setDisplay(this.parent, false);
  172.     if (this.container_.classList.contains('shaka-hidden')) {
  173.       this.icon_.textContent =
  174.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_OFF;
  175.       this.timer_.tickEvery(0.1);
  176.       shaka.ui.Utils.setDisplay(this.container_, true);
  177.     } else {
  178.       this.icon_.textContent =
  179.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
  180.       this.timer_.stop();
  181.       shaka.ui.Utils.setDisplay(this.container_, false);
  182.     }
  183.   }
  185.   /** @private */
  186.   updateLocalizedStrings_() {
  187.     const LocIds = shaka.ui.Locales.Ids;
  189.     this.nameSpan_.textContent =
  190.         this.localization.resolve(LocIds.STATISTICS);
  192.     this.button_.ariaLabel = this.localization.resolve(LocIds.STATISTICS);
  194.     const labelText = this.container_.classList.contains('shaka-hidden') ?
  195.         LocIds.OFF : LocIds.ON;
  196.     this.stateSpan_.textContent = this.localization.resolve(labelText);
  197.   }
  199.   /** @private */
  200.   generateComponent_(name) {
  201.     const section = shaka.util.Dom.createHTMLElement('div');
  203.     const label = shaka.util.Dom.createHTMLElement('label');
  204.     label.textContent = name + ':';
  205.     section.appendChild(label);
  207.     const value = shaka.util.Dom.createHTMLElement('span');
  208.     value.textContent = this.parseFrom_[name](name);
  209.     section.appendChild(value);
  211.     this.displayedElements_[name] = value;
  213.     return section;
  214.   }
  216.   /** @private */
  217.   loadContainer_() {
  218.     for (const name of this.controls.getConfig().statisticsList) {
  219.       if (name in this.currentStats_ && !this.skippedStats_.includes(name)) {
  220.         this.container_.appendChild(this.generateComponent_(name));
  221.         this.statisticsList_.push(name);
  222.       } else {
  223.         shaka.log.alwaysWarn('Unrecognized statistic element:', name);
  224.       }
  225.     }
  226.   }
  228.   /** @private */
  229.   onTimerTick_() {
  230.     this.currentStats_ = this.player.getStats();
  232.     for (const name of this.statisticsList_) {
  233.       this.displayedElements_[name].textContent =
  234.           this.parseFrom_[name](name);
  235.     }
  236.   }
  238.   /** @override */
  239.   release() {
  240.     this.timer_.stop();
  241.     this.timer_ = null;
  242.     super.release();
  243.   }
  244. };
  247. /**
  248.  * @implements {shaka.extern.IUIElement.Factory}
  249.  * @final
  250.  */
  251. shaka.ui.StatisticsButton.Factory = class {
  252.   /** @override */
  253.   create(rootElement, controls) {
  254.     return new shaka.ui.StatisticsButton(rootElement, controls);
  255.   }
  256. };
  259. shaka.ui.OverflowMenu.registerElement(
  260.     'statistics', new shaka.ui.StatisticsButton.Factory());
  262. shaka.ui.ContextMenu.registerElement(
  263.     'statistics', new shaka.ui.StatisticsButton.Factory());