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');
  50.     label.classList.add('shaka-simple-overflow-button-label-inline');
  52.     /** @private {!HTMLElement} */
  53.     this.nameSpan_ = shaka.util.Dom.createHTMLElement('span');
  54.     label.appendChild(this.nameSpan_);
  56.     /** @private {!HTMLElement} */
  57.     this.stateSpan_ = shaka.util.Dom.createHTMLElement('span');
  58.     this.stateSpan_.classList.add('shaka-current-selection-span');
  59.     label.appendChild(this.stateSpan_);
  61.     this.button_.appendChild(label);
  63.     this.parent.appendChild(this.button_);
  65.     /** @private {!HTMLElement} */
  66.     this.container_ = shaka.util.Dom.createHTMLElement('div');
  67.     this.container_.classList.add('shaka-no-propagation');
  68.     this.container_.classList.add('shaka-show-controls-on-mouse-over');
  69.     this.container_.classList.add('shaka-statistics-container');
  70.     this.container_.classList.add('shaka-hidden');
  72.     const controlsContainer = this.controls.getControlsContainer();
  73.     controlsContainer.appendChild(this.container_);
  75.     /** @private {!Array} */
  76.     this.statisticsList_ = [];
  78.     /** @private {!Array} */
  79.     this.skippedStats_ = ['stateHistory', 'switchHistory'];
  81.     /** @private {!shaka.extern.Stats} */
  82.     this.currentStats_ = this.player.getStats();
  84.     /** @private {!Map<string, HTMLElement>} */
  85.     this.displayedElements_ = new Map();
  88.     const parsePx = (name) => {
  89.       return this.currentStats_[name] + ' (px)';
  90.     };
  92.     const parseString = (name) => {
  93.       return this.currentStats_[name];
  94.     };
  96.     const parsePercent = (name) => {
  97.       return this.currentStats_[name] + ' (%)';
  98.     };
  100.     const parseFrames = (name) => {
  101.       return this.currentStats_[name] + ' (frames)';
  102.     };
  104.     const parseSeconds = (name) => {
  105.       return this.currentStats_[name].toFixed(2) + ' (s)';
  106.     };
  108.     const parseBits = (name) => {
  109.       return Math.round(this.currentStats_[name] / 1000) + ' (kbits/s)';
  110.     };
  112.     const parseTime = (name) => {
  113.       return shaka.ui.Utils.buildTimeString(
  114.           this.currentStats_[name], false) + ' (m)';
  115.     };
  117.     const parseGaps = (name) => {
  118.       return this.currentStats_[name] + ' (gaps)';
  119.     };
  121.     const parseStalls = (name) => {
  122.       return this.currentStats_[name] + ' (stalls)';
  123.     };
  125.     const parseErrors = (name) => {
  126.       return this.currentStats_[name] + ' (errors)';
  127.     };
  129.     const parsePeriods = (name) => {
  130.       return this.currentStats_[name] + ' (periods)';
  131.     };
  133.     const parseBytes = (name) => {
  134.       const bytes = parseInt(this.currentStats_[name], 10);
  135.       if (bytes > 2 * 1e9) {
  136.         return (bytes / 1e9).toFixed(2) + 'GB';
  137.       } else if (bytes > 1e6) {
  138.         return (bytes / 1e6).toFixed(2) + 'MB';
  139.       } else if (bytes > 1e3) {
  140.         return (bytes / 1e3).toFixed(2) + 'KB';
  141.       } else {
  142.         return bytes + 'B';
  143.       }
  144.     };
  146.     /** @private {!Map<string, function(string): string>} */
  147.     this.parseFrom_ = new Map()
  148.         .set('width', parsePx)
  149.         .set('height', parsePx)
  150.         .set('currentCodecs', parseString)
  151.         .set('completionPercent', parsePercent)
  152.         .set('bufferingTime', parseSeconds)
  153.         .set('drmTimeSeconds', parseSeconds)
  154.         .set('licenseTime', parseSeconds)
  155.         .set('liveLatency', parseSeconds)
  156.         .set('loadLatency', parseSeconds)
  157.         .set('manifestTimeSeconds', parseSeconds)
  158.         .set('estimatedBandwidth', parseBits)
  159.         .set('streamBandwidth', parseBits)
  160.         .set('maxSegmentDuration', parseSeconds)
  161.         .set('pauseTime', parseTime)
  162.         .set('playTime', parseTime)
  163.         .set('corruptedFrames', parseFrames)
  164.         .set('decodedFrames', parseFrames)
  165.         .set('droppedFrames', parseFrames)
  166.         .set('stallsDetected', parseStalls)
  167.         .set('gapsJumped', parseGaps)
  168.         .set('manifestSizeBytes', parseBytes)
  169.         .set('bytesDownloaded', parseBytes)
  170.         .set('nonFatalErrorCount', parseErrors)
  171.         .set('manifestPeriodCount', parsePeriods)
  172.         .set('manifestGapCount', parseGaps);
  174.     /** @private {shaka.util.Timer} */
  175.     this.timer_ = new shaka.util.Timer(() => {
  176.       this.onTimerTick_();
  177.     });
  179.     this.updateLocalizedStrings_();
  181.     this.loadContainer_();
  183.     this.eventManager.listen(
  184.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  185.           this.updateLocalizedStrings_();
  186.         });
  188.     this.eventManager.listen(
  189.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  190.           this.updateLocalizedStrings_();
  191.         });
  193.     this.eventManager.listen(this.button_, 'click', () => {
  194.       this.onClick_();
  195.       this.updateLocalizedStrings_();
  196.     });
  197.   }
  199.   /** @private */
  200.   onClick_() {
  201.     if (this.container_.classList.contains('shaka-hidden')) {
  202.       this.icon_.textContent =
  203.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_OFF;
  204.       this.timer_.tickEvery(0.1);
  205.       shaka.ui.Utils.setDisplay(this.container_, true);
  206.     } else {
  207.       this.icon_.textContent =
  208.           shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
  209.       this.timer_.stop();
  210.       shaka.ui.Utils.setDisplay(this.container_, false);
  211.     }
  212.   }
  214.   /** @private */
  215.   updateLocalizedStrings_() {
  216.     const LocIds = shaka.ui.Locales.Ids;
  218.     this.nameSpan_.textContent =
  219.         this.localization.resolve(LocIds.STATISTICS);
  221.     this.button_.ariaLabel = this.localization.resolve(LocIds.STATISTICS);
  223.     const labelText = this.container_.classList.contains('shaka-hidden') ?
  224.         LocIds.OFF : LocIds.ON;
  225.     this.stateSpan_.textContent = this.localization.resolve(labelText);
  226.   }
  228.   /**
  229.    * @param {string} name
  230.    * @return {!HTMLElement}
  231.    * @private
  232.    */
  233.   generateComponent_(name) {
  234.     const section = shaka.util.Dom.createHTMLElement('div');
  236.     const label = shaka.util.Dom.createHTMLElement('label');
  237.     label.textContent = name + ':';
  238.     section.appendChild(label);
  240.     const value = shaka.util.Dom.createHTMLElement('span');
  241.     value.textContent = this.parseFrom_.get(name)(name);
  242.     section.appendChild(value);
  244.     this.displayedElements_.set(name, value);
  246.     return section;
  247.   }
  249.   /** @private */
  250.   loadContainer_() {
  251.     const closeElement = shaka.util.Dom.createHTMLElement('div');
  252.     closeElement.classList.add('shaka-no-propagation');
  253.     closeElement.classList.add('shaka-statistics-close');
  254.     const icon = shaka.util.Dom.createHTMLElement('i');
  255.     icon.classList.add('material-icons');
  256.     icon.classList.add('notranslate');
  257.     icon.classList.add('material-icons-round');
  258.     icon.textContent =
  259.       shaka.ui.Enums.MaterialDesignIcons.CLOSE;
  260.     closeElement.appendChild(icon);
  261.     this.container_.appendChild(closeElement);
  262.     this.eventManager.listen(icon, 'click', () => {
  263.       this.onClick_();
  264.     });
  265.     for (const name of this.controls.getConfig().statisticsList) {
  266.       if (name in this.currentStats_ && !this.skippedStats_.includes(name)) {
  267.         const element = this.generateComponent_(name);
  268.         this.container_.appendChild(element);
  269.         this.statisticsList_.push(name);
  270.       } else {
  271.         shaka.log.alwaysWarn('Unrecognized statistic element:', name);
  272.       }
  273.     }
  274.   }
  276.   /** @private */
  277.   onTimerTick_() {
  278.     this.currentStats_ = this.player.getStats();
  280.     for (const name of this.statisticsList_) {
  281.       const element = this.displayedElements_.get(name);
  282.       element.textContent = this.parseFrom_.get(name)(name);
  283.       if (element && element.parentElement) {
  284.         const value = this.currentStats_[name];
  285.         if (typeof value == 'string') {
  286.           shaka.ui.Utils.setDisplay(element.parentElement, value != '');
  287.         } else {
  288.           shaka.ui.Utils.setDisplay(element.parentElement, !isNaN(value));
  289.         }
  290.       }
  291.     }
  292.   }
  294.   /** @override */
  295.   release() {
  296.     this.timer_.stop();
  297.     this.timer_ = null;
  298.     super.release();
  299.   }
  300. };
  303. /**
  304.  * @implements {shaka.extern.IUIElement.Factory}
  305.  * @final
  306.  */
  307. shaka.ui.StatisticsButton.Factory = class {
  308.   /** @override */
  309.   create(rootElement, controls) {
  310.     return new shaka.ui.StatisticsButton(rootElement, controls);
  311.   }
  312. };
  315. shaka.ui.OverflowMenu.registerElement(
  316.     'statistics', new shaka.ui.StatisticsButton.Factory());
  318. shaka.ui.ContextMenu.registerElement(
  319.     'statistics', new shaka.ui.StatisticsButton.Factory());