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.     const parseBytesDownloaded = (name) => {
  121.       const bytes = parseInt(this.currentStats_[name], 10);
  122.       if (bytes > 1e6) {
  123.         return (bytes / 1e6).toFixed(2) + 'MB';
  124.       } else if (bytes > 1e3) {
  125.         return (bytes / 1e3).toFixed(2) + 'KB';
  126.       } else {
  127.         return bytes + 'B';
  128.       }
  129.     };
  131.     /** @private {!Object.<string, function(string):string>} */
  132.     this.parseFrom_ = {
  133.       'width': parsePx,
  134.       'height': parsePx,
  135.       'completionPercent': parsePercent,
  136.       'bufferingTime': parseSeconds,
  137.       'drmTimeSeconds': parseSeconds,
  138.       'licenseTime': parseSeconds,
  139.       'liveLatency': parseSeconds,
  140.       'loadLatency': parseSeconds,
  141.       'manifestTimeSeconds': parseSeconds,
  142.       'estimatedBandwidth': parseBits,
  143.       'streamBandwidth': parseBits,
  144.       'maxSegmentDuration': parseTime,
  145.       'pauseTime': parseTime,
  146.       'playTime': parseTime,
  147.       'corruptedFrames': parseFrames,
  148.       'decodedFrames': parseFrames,
  149.       'droppedFrames': parseFrames,
  150.       'stallsDetected': parseStalls,
  151.       'gapsJumped': parseGaps,
  152.       'bytesDownloaded': parseBytesDownloaded,
  153.     };
  155.     /** @private {shaka.util.Timer} */
  156.     this.timer_ = new shaka.util.Timer(() => {
  157.       this.onTimerTick_();
  158.     });
  160.     this.updateLocalizedStrings_();
  162.     this.loadContainer_();
  164.     this.eventManager.listen(
  165.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  166.           this.updateLocalizedStrings_();
  167.         });
  169.     this.eventManager.listen(
  170.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  171.           this.updateLocalizedStrings_();
  172.         });
  174.     this.eventManager.listen(this.button_, 'click', () => {
  175.       this.onClick_();
  176.       this.updateLocalizedStrings_();
  177.     });
  178.   }
  180.   /** @private */
  181.   onClick_() {
  182.     shaka.ui.Utils.setDisplay(this.parent, false);
  184.     if (this.container_.classList.contains('shaka-hidden')) {
  185.       this.icon_.textContent =
  186.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_OFF;
  187.       this.timer_.tickEvery(0.1);
  188.       shaka.ui.Utils.setDisplay(this.container_, true);
  189.     } else {
  190.       this.icon_.textContent =
  191.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
  192.       this.timer_.stop();
  193.       shaka.ui.Utils.setDisplay(this.container_, false);
  194.     }
  195.   }
  197.   /** @private */
  198.   updateLocalizedStrings_() {
  199.     const LocIds = shaka.ui.Locales.Ids;
  201.     this.nameSpan_.textContent =
  202.         this.localization.resolve(LocIds.STATISTICS);
  204.     this.button_.ariaLabel = this.localization.resolve(LocIds.STATISTICS);
  206.     const labelText = this.container_.classList.contains('shaka-hidden') ?
  207.         LocIds.OFF : LocIds.ON;
  208.     this.stateSpan_.textContent = this.localization.resolve(labelText);
  209.   }
  211.   /** @private */
  212.   generateComponent_(name) {
  213.     const section = shaka.util.Dom.createHTMLElement('div');
  215.     const label = shaka.util.Dom.createHTMLElement('label');
  216.     label.textContent = name + ':';
  217.     section.appendChild(label);
  219.     const value = shaka.util.Dom.createHTMLElement('span');
  220.     value.textContent = this.parseFrom_[name](name);
  221.     section.appendChild(value);
  223.     this.displayedElements_[name] = value;
  225.     return section;
  226.   }
  228.   /** @private */
  229.   loadContainer_() {
  230.     for (const name of this.controls.getConfig().statisticsList) {
  231.       if (name in this.currentStats_ && !this.skippedStats_.includes(name)) {
  232.         const element = this.generateComponent_(name);
  233.         this.container_.appendChild(element);
  234.         this.statisticsList_.push(name);
  235.         shaka.ui.Utils.setDisplay(element.parentElement,
  236.             !isNaN(this.currentStats_[name]));
  237.       } else {
  238.         shaka.log.alwaysWarn('Unrecognized statistic element:', name);
  239.       }
  240.     }
  241.   }
  243.   /** @private */
  244.   onTimerTick_() {
  245.     this.currentStats_ = this.player.getStats();
  247.     for (const name of this.statisticsList_) {
  248.       const element = this.displayedElements_[name];
  249.       element.textContent = this.parseFrom_[name](name);
  250.       if (element && element.parentElement) {
  251.         shaka.ui.Utils.setDisplay(element.parentElement,
  252.             !isNaN(this.currentStats_[name]));
  253.       }
  254.     }
  255.   }
  257.   /** @override */
  258.   release() {
  259.     this.timer_.stop();
  260.     this.timer_ = null;
  261.     super.release();
  262.   }
  263. };
  266. /**
  267.  * @implements {shaka.extern.IUIElement.Factory}
  268.  * @final
  269.  */
  270. shaka.ui.StatisticsButton.Factory = class {
  271.   /** @override */
  272.   create(rootElement, controls) {
  273.     return new shaka.ui.StatisticsButton(rootElement, controls);
  274.   }
  275. };
  278. shaka.ui.OverflowMenu.registerElement(
  279.     'statistics', new shaka.ui.StatisticsButton.Factory());
  281. shaka.ui.ContextMenu.registerElement(
  282.     'statistics', new shaka.ui.StatisticsButton.Factory());