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 {!shaka.extern.Stats} */
  81.     this.currentStats_ = this.player.getStats();
  83.     /** @private {!Map<string, HTMLElement>} */
  84.     this.displayedElements_ = new Map();
  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 parseErrors = (name) => {
  121.       return this.currentStats_[name] + ' (errors)';
  122.     };
  124.     const parsePeriods = (name) => {
  125.       return this.currentStats_[name] + ' (periods)';
  126.     };
  128.     const parseBytes = (name) => {
  129.       const bytes = parseInt(this.currentStats_[name], 10);
  130.       if (bytes > 2 * 1e9) {
  131.         return (bytes / 1e9).toFixed(2) + 'GB';
  132.       } else if (bytes > 1e6) {
  133.         return (bytes / 1e6).toFixed(2) + 'MB';
  134.       } else if (bytes > 1e3) {
  135.         return (bytes / 1e3).toFixed(2) + 'KB';
  136.       } else {
  137.         return bytes + 'B';
  138.       }
  139.     };
  141.     /** @private {!Map<string, function(string): string>} */
  142.     this.parseFrom_ = new Map()
  143.         .set('width', parsePx)
  144.         .set('height', parsePx)
  145.         .set('completionPercent', parsePercent)
  146.         .set('bufferingTime', parseSeconds)
  147.         .set('drmTimeSeconds', parseSeconds)
  148.         .set('licenseTime', parseSeconds)
  149.         .set('liveLatency', parseSeconds)
  150.         .set('loadLatency', parseSeconds)
  151.         .set('manifestTimeSeconds', parseSeconds)
  152.         .set('estimatedBandwidth', parseBits)
  153.         .set('streamBandwidth', parseBits)
  154.         .set('maxSegmentDuration', parseSeconds)
  155.         .set('pauseTime', parseTime)
  156.         .set('playTime', parseTime)
  157.         .set('corruptedFrames', parseFrames)
  158.         .set('decodedFrames', parseFrames)
  159.         .set('droppedFrames', parseFrames)
  160.         .set('stallsDetected', parseStalls)
  161.         .set('gapsJumped', parseGaps)
  162.         .set('manifestSizeBytes', parseBytes)
  163.         .set('bytesDownloaded', parseBytes)
  164.         .set('nonFatalErrorCount', parseErrors)
  165.         .set('manifestPeriodCount', parsePeriods)
  166.         .set('manifestGapCount', parseGaps);
  168.     /** @private {shaka.util.Timer} */
  169.     this.timer_ = new shaka.util.Timer(() => {
  170.       this.onTimerTick_();
  171.     });
  173.     this.updateLocalizedStrings_();
  175.     this.loadContainer_();
  177.     this.eventManager.listen(
  178.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  179.           this.updateLocalizedStrings_();
  180.         });
  182.     this.eventManager.listen(
  183.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  184.           this.updateLocalizedStrings_();
  185.         });
  187.     this.eventManager.listen(this.button_, 'click', () => {
  188.       this.onClick_();
  189.       this.updateLocalizedStrings_();
  190.     });
  191.   }
  193.   /** @private */
  194.   onClick_() {
  195.     if (this.container_.classList.contains('shaka-hidden')) {
  196.       this.icon_.textContent =
  197.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_OFF;
  198.       this.timer_.tickEvery(0.1);
  199.       shaka.ui.Utils.setDisplay(this.container_, true);
  200.     } else {
  201.       this.icon_.textContent =
  202.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
  203.       this.timer_.stop();
  204.       shaka.ui.Utils.setDisplay(this.container_, false);
  205.     }
  206.   }
  208.   /** @private */
  209.   updateLocalizedStrings_() {
  210.     const LocIds = shaka.ui.Locales.Ids;
  212.     this.nameSpan_.textContent =
  213.         this.localization.resolve(LocIds.STATISTICS);
  215.     this.button_.ariaLabel = this.localization.resolve(LocIds.STATISTICS);
  217.     const labelText = this.container_.classList.contains('shaka-hidden') ?
  218.         LocIds.OFF : LocIds.ON;
  219.     this.stateSpan_.textContent = this.localization.resolve(labelText);
  220.   }
  222.   /**
  223.    * @param {string} name
  224.    * @return {!HTMLElement}
  225.    * @private
  226.    */
  227.   generateComponent_(name) {
  228.     const section = shaka.util.Dom.createHTMLElement('div');
  230.     const label = shaka.util.Dom.createHTMLElement('label');
  231.     label.textContent = name + ':';
  232.     section.appendChild(label);
  234.     const value = shaka.util.Dom.createHTMLElement('span');
  235.     value.textContent = this.parseFrom_.get(name)(name);
  236.     section.appendChild(value);
  238.     this.displayedElements_.set(name, value);
  240.     return section;
  241.   }
  243.   /** @private */
  244.   loadContainer_() {
  245.     const closeElement = shaka.util.Dom.createHTMLElement('div');
  246.     closeElement.classList.add('shaka-no-propagation');
  247.     closeElement.classList.add('shaka-statistics-close');
  248.     const icon = shaka.util.Dom.createHTMLElement('i');
  249.     icon.classList.add('material-icons-round');
  250.     icon.textContent =
  251.       shaka.ui.Enums.MaterialDesignIcons.CLOSE;
  252.     closeElement.appendChild(icon);
  253.     this.container_.appendChild(closeElement);
  254.     this.eventManager.listen(icon, 'click', () => {
  255.       this.onClick_();
  256.     });
  257.     for (const name of this.controls.getConfig().statisticsList) {
  258.       if (name in this.currentStats_ && !this.skippedStats_.includes(name)) {
  259.         const element = this.generateComponent_(name);
  260.         this.container_.appendChild(element);
  261.         this.statisticsList_.push(name);
  262.       } else {
  263.         shaka.log.alwaysWarn('Unrecognized statistic element:', name);
  264.       }
  265.     }
  266.   }
  268.   /** @private */
  269.   onTimerTick_() {
  270.     this.currentStats_ = this.player.getStats();
  272.     for (const name of this.statisticsList_) {
  273.       const element = this.displayedElements_.get(name);
  274.       element.textContent = this.parseFrom_.get(name)(name);
  275.       if (element && element.parentElement) {
  276.         shaka.ui.Utils.setDisplay(element.parentElement,
  277.             !isNaN(this.currentStats_[name]));
  278.       }
  279.     }
  280.   }
  282.   /** @override */
  283.   release() {
  284.     this.timer_.stop();
  285.     this.timer_ = null;
  286.     super.release();
  287.   }
  288. };
  291. /**
  292.  * @implements {shaka.extern.IUIElement.Factory}
  293.  * @final
  294.  */
  295. shaka.ui.StatisticsButton.Factory = class {
  296.   /** @override */
  297.   create(rootElement, controls) {
  298.     return new shaka.ui.StatisticsButton(rootElement, controls);
  299.   }
  300. };
  303. shaka.ui.OverflowMenu.registerElement(
  304.     'statistics', new shaka.ui.StatisticsButton.Factory());
  306. shaka.ui.ContextMenu.registerElement(
  307.     'statistics', new shaka.ui.StatisticsButton.Factory());