mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-14 15:56:38 +03:00
Álvaro Velad Galván
440 lines
12 KiB
JavaScript
440 lines
12 KiB
JavaScript
/*! @license
|
|
* Shaka Player
|
|
* Copyright 2016 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
|
|
goog.provide('shaka.ui.StatisticsButton');
|
|
|
|
goog.require('shaka.log');
|
|
goog.require('shaka.ui.Controls');
|
|
goog.require('shaka.ui.Element');
|
|
goog.require('shaka.ui.Enums');
|
|
goog.require('shaka.ui.Icon');
|
|
goog.require('shaka.ui.Locales');
|
|
goog.require('shaka.ui.OverflowMenu');
|
|
goog.require('shaka.ui.Utils');
|
|
goog.require('shaka.util.Dom');
|
|
goog.require('shaka.util.Timer');
|
|
goog.requireType('shaka.ui.Controls');
|
|
|
|
|
|
/**
|
|
* @extends {shaka.ui.Element}
|
|
* @final
|
|
* @export
|
|
*/
|
|
shaka.ui.StatisticsButton = class extends shaka.ui.Element {
|
|
/**
|
|
* @param {!HTMLElement} parent
|
|
* @param {!shaka.ui.Controls} controls
|
|
*/
|
|
constructor(parent, controls) {
|
|
super(parent, controls);
|
|
|
|
/** @private {!HTMLButtonElement} */
|
|
this.button_ = shaka.util.Dom.createButton();
|
|
this.button_.classList.add('shaka-statistics-button');
|
|
this.button_.classList.add('shaka-tooltip');
|
|
this.button_.classList.add('shaka-no-propagation');
|
|
this.button_.ariaPressed = 'false';
|
|
|
|
/** @private {!shaka.ui.Icon} */
|
|
this.icon_ = new shaka.ui.Icon(this.button_,
|
|
shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_ON']);
|
|
|
|
const label = shaka.util.Dom.createHTMLElement('label');
|
|
label.classList.add('shaka-overflow-button-label');
|
|
label.classList.add('shaka-simple-overflow-button-label-inline');
|
|
|
|
/** @private {!HTMLElement} */
|
|
this.nameSpan_ = shaka.util.Dom.createHTMLElement('span');
|
|
label.appendChild(this.nameSpan_);
|
|
|
|
/** @private {!HTMLElement} */
|
|
this.stateSpan_ = shaka.util.Dom.createHTMLElement('span');
|
|
this.stateSpan_.classList.add('shaka-current-selection-span');
|
|
label.appendChild(this.stateSpan_);
|
|
|
|
this.button_.appendChild(label);
|
|
|
|
this.parent.appendChild(this.button_);
|
|
|
|
/** @private {!HTMLElement} */
|
|
this.container_ = shaka.util.Dom.createHTMLElement('div');
|
|
this.container_.classList.add('shaka-no-propagation');
|
|
this.container_.classList.add('shaka-show-controls-on-mouse-over');
|
|
this.container_.classList.add('shaka-statistics-container');
|
|
this.container_.classList.add('shaka-hidden');
|
|
|
|
const controlsContainer = this.controls.getControlsContainer();
|
|
controlsContainer.appendChild(this.container_);
|
|
|
|
/** @private {!Array} */
|
|
this.statisticsList_ = [];
|
|
|
|
/** @private {!Array} */
|
|
this.skippedStats_ = ['stateHistory', 'switchHistory'];
|
|
|
|
/** @private {!shaka.extern.Stats} */
|
|
this.currentStats_ = this.player.getStats();
|
|
|
|
/** @private {!Map<string, HTMLElement>} */
|
|
this.displayedElements_ = new Map();
|
|
|
|
/** @private {!HTMLElement} */
|
|
this.headerTitle_ = shaka.util.Dom.createHTMLElement('span');
|
|
this.headerTitle_.classList.add('shaka-statistics-title');
|
|
|
|
const parsePx = (name) => {
|
|
return this.currentStats_[name] + ' (px)';
|
|
};
|
|
|
|
const parseString = (name) => {
|
|
return this.currentStats_[name];
|
|
};
|
|
|
|
const parsePercent = (name) => {
|
|
return this.currentStats_[name] + ' (%)';
|
|
};
|
|
|
|
const parseFrames = (name) => {
|
|
return this.currentStats_[name] + ' (frames)';
|
|
};
|
|
|
|
const parseSeconds = (name) => {
|
|
return this.currentStats_[name].toFixed(2) + ' (s)';
|
|
};
|
|
|
|
const parseBits = (name) => {
|
|
return Math.round(this.currentStats_[name] / 1000) + ' (kbits/s)';
|
|
};
|
|
|
|
const parseTime = (name) => {
|
|
const value = this.currentStats_[name];
|
|
return shaka.ui.Utils.buildTimeString(value, value > 3600);
|
|
};
|
|
|
|
const parseGaps = (name) => {
|
|
return this.currentStats_[name] + ' (gaps)';
|
|
};
|
|
|
|
const parseStalls = (name) => {
|
|
return this.currentStats_[name] + ' (stalls)';
|
|
};
|
|
|
|
const parseErrors = (name) => {
|
|
return this.currentStats_[name] + ' (errors)';
|
|
};
|
|
|
|
const parsePeriods = (name) => {
|
|
return this.currentStats_[name] + ' (periods)';
|
|
};
|
|
|
|
const parseBytes = (name) => {
|
|
const bytes = parseInt(this.currentStats_[name], 10);
|
|
if (bytes > 2 * 1e9) {
|
|
return (bytes / 1e9).toFixed(2) + 'GB';
|
|
} else if (bytes > 1e6) {
|
|
return (bytes / 1e6).toFixed(2) + 'MB';
|
|
} else if (bytes > 1e3) {
|
|
return (bytes / 1e3).toFixed(2) + 'KB';
|
|
} else {
|
|
return bytes + 'B';
|
|
}
|
|
};
|
|
|
|
/** @private {!Map<string, function(string): string>} */
|
|
this.parseFrom_ = new Map()
|
|
.set('width', parsePx)
|
|
.set('height', parsePx)
|
|
.set('currentCodecs', parseString)
|
|
.set('completionPercent', parsePercent)
|
|
.set('bufferingTime', parseSeconds)
|
|
.set('drmTimeSeconds', parseSeconds)
|
|
.set('licenseTime', parseSeconds)
|
|
.set('liveLatency', parseSeconds)
|
|
.set('loadLatency', parseSeconds)
|
|
.set('timeToFirstFrame', parseSeconds)
|
|
.set('manifestTimeSeconds', parseSeconds)
|
|
.set('estimatedBandwidth', parseBits)
|
|
.set('streamBandwidth', parseBits)
|
|
.set('maxSegmentDuration', parseSeconds)
|
|
.set('pauseTime', parseTime)
|
|
.set('playTime', parseTime)
|
|
.set('corruptedFrames', parseFrames)
|
|
.set('decodedFrames', parseFrames)
|
|
.set('droppedFrames', parseFrames)
|
|
.set('stallsDetected', parseStalls)
|
|
.set('gapsJumped', parseGaps)
|
|
.set('manifestSizeBytes', parseBytes)
|
|
.set('bytesDownloaded', parseBytes)
|
|
.set('nonFatalErrorCount', parseErrors)
|
|
.set('manifestPeriodCount', parsePeriods)
|
|
.set('manifestGapCount', parseGaps);
|
|
|
|
/** @private {shaka.util.Timer} */
|
|
this.timer_ = new shaka.util.Timer(() => {
|
|
this.updateStats_();
|
|
});
|
|
|
|
this.updateLocalizedStrings();
|
|
|
|
this.loadContainer_();
|
|
|
|
this.eventManager.listen(this.button_, 'click', () => {
|
|
this.onClick_();
|
|
this.updateLocalizedStrings();
|
|
});
|
|
}
|
|
|
|
/** @private */
|
|
onClick_() {
|
|
if (this.container_.classList.contains('shaka-hidden')) {
|
|
this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_OFF']);
|
|
this.timer_.tickEvery(0.1);
|
|
shaka.ui.Utils.setDisplay(this.container_, true);
|
|
this.button_.ariaPressed = 'true';
|
|
} else {
|
|
this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_ON']);
|
|
this.timer_.stop();
|
|
shaka.ui.Utils.setDisplay(this.container_, false);
|
|
this.button_.ariaPressed = 'false';
|
|
}
|
|
}
|
|
|
|
/** @override */
|
|
updateLocalizedStrings() {
|
|
const LocIds = shaka.ui.Locales.Ids;
|
|
|
|
const label = this.localization.resolve(LocIds.STATISTICS);
|
|
|
|
this.nameSpan_.textContent = label;
|
|
this.headerTitle_.textContent = label;
|
|
this.button_.ariaLabel = label;
|
|
|
|
const labelText = this.container_.classList.contains('shaka-hidden') ?
|
|
LocIds.OFF : LocIds.ON;
|
|
this.stateSpan_.textContent = this.localization.resolve(labelText);
|
|
}
|
|
|
|
/**
|
|
* @param {string} name
|
|
* @return {!HTMLElement}
|
|
* @private
|
|
*/
|
|
generateComponent_(name) {
|
|
const section = shaka.util.Dom.createHTMLElement('div');
|
|
|
|
const label = shaka.util.Dom.createHTMLElement('label');
|
|
label.textContent = name + ':';
|
|
section.appendChild(label);
|
|
|
|
const value = shaka.util.Dom.createHTMLElement('span');
|
|
value.textContent = this.parseFrom_.get(name)(name);
|
|
section.appendChild(value);
|
|
|
|
this.displayedElements_.set(name, value);
|
|
|
|
return section;
|
|
}
|
|
|
|
/** @private */
|
|
loadContainer_() {
|
|
const header = shaka.util.Dom.createHTMLElement('div');
|
|
header.classList.add('shaka-statistics-header');
|
|
header.classList.add('shaka-no-propagation');
|
|
header.appendChild(this.headerTitle_);
|
|
const icon = new shaka.ui.Icon(header,
|
|
shaka.ui.Enums.MaterialDesignSVGIcons['CLOSE']);
|
|
const iconElement = icon.getSvgElement();
|
|
iconElement.classList.add('material-icons', 'notranslate');
|
|
this.container_.appendChild(header);
|
|
this.eventManager.listen(iconElement, 'click', () => {
|
|
this.onClick_();
|
|
});
|
|
|
|
/**
|
|
* @const {!Array<{label: string, stats: !Array<string>}>}
|
|
*/
|
|
const groups = [
|
|
{
|
|
label: 'Video',
|
|
stats: [
|
|
'width',
|
|
'height',
|
|
'currentCodecs',
|
|
],
|
|
},
|
|
{
|
|
label: 'Network',
|
|
stats: [
|
|
'estimatedBandwidth',
|
|
'streamBandwidth',
|
|
'maxSegmentDuration',
|
|
'bytesDownloaded',
|
|
],
|
|
},
|
|
{
|
|
label: 'Load',
|
|
stats: [
|
|
'loadLatency',
|
|
'timeToFirstFrame',
|
|
'manifestTimeSeconds',
|
|
'drmTimeSeconds',
|
|
'licenseTime',
|
|
],
|
|
},
|
|
{
|
|
label: 'Playback',
|
|
stats: [
|
|
'playTime',
|
|
'pauseTime',
|
|
'bufferingTime',
|
|
'liveLatency',
|
|
'completionPercent',
|
|
],
|
|
},
|
|
{
|
|
label: 'Frames',
|
|
stats: [
|
|
'decodedFrames',
|
|
'droppedFrames',
|
|
'corruptedFrames',
|
|
],
|
|
},
|
|
{
|
|
label: 'Stability',
|
|
stats: [
|
|
'stallsDetected',
|
|
'gapsJumped',
|
|
'nonFatalErrorCount',
|
|
],
|
|
},
|
|
{
|
|
label: 'Manifest',
|
|
stats: [
|
|
'manifestSizeBytes',
|
|
'manifestPeriodCount',
|
|
'manifestGapCount',
|
|
],
|
|
},
|
|
];
|
|
|
|
const configList = this.controls.getConfig().statisticsList;
|
|
|
|
/** @type {!Set<string>} Track which stats have already been rendered */
|
|
const rendered = new Set();
|
|
|
|
/** @param {string} labelText */
|
|
const appendSectionLabel = (labelText) => {
|
|
const el = shaka.util.Dom.createHTMLElement('div');
|
|
el.classList.add('shaka-statistics-section-label');
|
|
el.textContent = labelText;
|
|
this.container_.appendChild(el);
|
|
};
|
|
|
|
const appendDivider = () => {
|
|
const el = shaka.util.Dom.createHTMLElement('div');
|
|
el.classList.add('shaka-statistics-divider');
|
|
this.container_.appendChild(el);
|
|
};
|
|
|
|
let firstGroup = true;
|
|
|
|
for (const group of groups) {
|
|
// Only render stats that the integrator has configured AND that the
|
|
// player is actually reporting (skipping stateHistory / switchHistory).
|
|
const groupStats = group.stats.filter((name) =>
|
|
configList.includes(name) &&
|
|
name in this.currentStats_ &&
|
|
!this.skippedStats_.includes(name));
|
|
|
|
if (groupStats.length === 0) {
|
|
continue;
|
|
}
|
|
|
|
if (!firstGroup) {
|
|
appendDivider();
|
|
}
|
|
firstGroup = false;
|
|
|
|
appendSectionLabel(group.label);
|
|
|
|
for (const name of groupStats) {
|
|
this.container_.appendChild(this.generateComponent_(name));
|
|
this.statisticsList_.push(name);
|
|
rendered.add(name);
|
|
}
|
|
}
|
|
|
|
// Any configured stat not covered by the groups above goes into 'Other'.
|
|
const remaining = configList.filter((name) =>
|
|
!rendered.has(name) &&
|
|
name in this.currentStats_ &&
|
|
!this.skippedStats_.includes(name));
|
|
|
|
if (remaining.length > 0) {
|
|
appendDivider();
|
|
appendSectionLabel('Other');
|
|
for (const name of remaining) {
|
|
this.container_.appendChild(this.generateComponent_(name));
|
|
this.statisticsList_.push(name);
|
|
}
|
|
}
|
|
|
|
for (const name of configList) {
|
|
if (!(name in this.currentStats_)) {
|
|
shaka.log.alwaysWarn('Unrecognized statistic element:', name);
|
|
}
|
|
}
|
|
}
|
|
|
|
/** @private */
|
|
updateStats_() {
|
|
this.currentStats_ = this.player.getStats();
|
|
|
|
for (const name of this.statisticsList_) {
|
|
const element = this.displayedElements_.get(name);
|
|
element.textContent = this.parseFrom_.get(name)(name);
|
|
if (element && element.parentElement) {
|
|
const value = this.currentStats_[name];
|
|
if (typeof value == 'string') {
|
|
shaka.ui.Utils.setDisplay(element.parentElement, value != '');
|
|
} else {
|
|
shaka.ui.Utils.setDisplay(element.parentElement, !isNaN(value));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** @override */
|
|
release() {
|
|
this.timer_.stop();
|
|
this.timer_ = null;
|
|
super.release();
|
|
}
|
|
|
|
/** @override */
|
|
checkAvailability() {
|
|
shaka.ui.Utils.setDisplay(this.button_, !this.isSubMenuOpened);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* @implements {shaka.extern.IUIElement.Factory}
|
|
* @final
|
|
*/
|
|
shaka.ui.StatisticsButton.Factory = class {
|
|
/** @override */
|
|
create(rootElement, controls) {
|
|
return new shaka.ui.StatisticsButton(rootElement, controls);
|
|
}
|
|
};
|
|
|
|
|
|
shaka.ui.OverflowMenu.registerElement(
|
|
'statistics', new shaka.ui.StatisticsButton.Factory());
|