mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Migration of playerstats to ES6 module
This commit is contained in:
Cameron
parent
a9246f8f39
commit
f29f3e15fb
3 changed files with 72 additions and 58 deletions
|
|
@ -121,6 +121,7 @@
|
|||
"src/components/playback/playmethodhelper.js",
|
||||
"src/components/playback/remotecontrolautoplay.js",
|
||||
"src/components/playback/volumeosd.js",
|
||||
"src/components/playerstats/playerstats.js",
|
||||
"src/components/playlisteditor/playlisteditor.js",
|
||||
"src/components/groupedcards.js",
|
||||
"src/components/htmlMediaHelper.js",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,19 @@
|
|||
define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlayManager', 'playMethodHelper', 'layoutManager', 'serverNotifications', 'paper-icon-button-light', 'css!./playerstats'], function (events, globalize, playbackManager, connectionManager, syncPlayManager, playMethodHelper, layoutManager, serverNotifications) {
|
||||
'use strict';
|
||||
import events from 'events';
|
||||
import globalize from 'globalize';
|
||||
import playbackManager from 'playbackManager';
|
||||
import connectionManager from 'connectionManager';
|
||||
import syncPlayManager from 'syncPlayManager';
|
||||
import playMethodHelper from 'playMethodHelper';
|
||||
import layoutManager from 'layoutManager';
|
||||
import serverNotifications from 'serverNotifications';
|
||||
import 'paper-icon-button-light';
|
||||
import 'css!./playerstats';
|
||||
|
||||
/* eslint-disable indent */
|
||||
|
||||
function init(instance) {
|
||||
|
||||
var parent = document.createElement('div');
|
||||
const parent = document.createElement('div');
|
||||
|
||||
parent.classList.add('playerStats');
|
||||
|
||||
|
|
@ -13,7 +23,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
|
||||
parent.classList.add('hide');
|
||||
|
||||
var button;
|
||||
let button;
|
||||
|
||||
if (layoutManager.tv) {
|
||||
button = '';
|
||||
|
|
@ -21,7 +31,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
button = '<button type="button" is="paper-icon-button-light" class="playerStats-closeButton"><span class="material-icons close"></span></button>';
|
||||
}
|
||||
|
||||
var contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content';
|
||||
const contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content';
|
||||
|
||||
parent.innerHTML = '<div class="' + contentClass + '">' + button + '<div class="playerStats-stats"></div></div>';
|
||||
|
||||
|
|
@ -44,9 +54,9 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
|
||||
elem.querySelector('.playerStats-stats').innerHTML = categories.map(function (category) {
|
||||
|
||||
var categoryHtml = '';
|
||||
let categoryHtml = '';
|
||||
|
||||
var stats = category.stats;
|
||||
const stats = category.stats;
|
||||
|
||||
if (stats.length && category.name) {
|
||||
categoryHtml += '<div class="playerStats-stat playerStats-stat-header">';
|
||||
|
|
@ -62,11 +72,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
categoryHtml += '</div>';
|
||||
}
|
||||
|
||||
for (var i = 0, length = stats.length; i < length; i++) {
|
||||
for (let i = 0, length = stats.length; i < length; i++) {
|
||||
|
||||
categoryHtml += '<div class="playerStats-stat">';
|
||||
|
||||
var stat = stats[i];
|
||||
const stat = stats[i];
|
||||
|
||||
categoryHtml += '<div class="playerStats-stat-label">';
|
||||
categoryHtml += stat.label;
|
||||
|
|
@ -86,13 +96,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
|
||||
function getSession(instance, player) {
|
||||
|
||||
var now = new Date().getTime();
|
||||
const now = new Date().getTime();
|
||||
|
||||
if ((now - (instance.lastSessionTime || 0)) < 10000) {
|
||||
return Promise.resolve(instance.lastSession);
|
||||
}
|
||||
|
||||
var apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
|
||||
const apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
|
||||
|
||||
return apiClient.getSessions({
|
||||
deviceId: apiClient.deviceId()
|
||||
|
|
@ -114,12 +124,12 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
}
|
||||
|
||||
function getTranscodingStats(session, player, displayPlayMethod) {
|
||||
var sessionStats = [];
|
||||
const sessionStats = [];
|
||||
|
||||
var videoCodec;
|
||||
var audioCodec;
|
||||
var totalBitrate;
|
||||
var audioChannels;
|
||||
let videoCodec;
|
||||
let audioCodec;
|
||||
let totalBitrate;
|
||||
let audioChannels;
|
||||
|
||||
if (session.TranscodingInfo) {
|
||||
|
||||
|
|
@ -208,11 +218,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
|
||||
function getMediaSourceStats(session, player, displayPlayMethod) {
|
||||
|
||||
var sessionStats = [];
|
||||
const sessionStats = [];
|
||||
|
||||
var mediaSource = playbackManager.currentMediaSource(player) || {};
|
||||
var totalBitrate = mediaSource.Bitrate;
|
||||
var mediaFileSize = mediaSource.Size;
|
||||
const mediaSource = playbackManager.currentMediaSource(player) || {};
|
||||
const totalBitrate = mediaSource.Bitrate;
|
||||
const mediaFileSize = mediaSource.Size;
|
||||
|
||||
if (mediaSource.Container) {
|
||||
sessionStats.push({
|
||||
|
|
@ -236,26 +246,26 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
});
|
||||
}
|
||||
|
||||
var mediaStreams = mediaSource.MediaStreams || [];
|
||||
var videoStream = mediaStreams.filter(function (s) {
|
||||
const mediaStreams = mediaSource.MediaStreams || [];
|
||||
const videoStream = mediaStreams.filter(function (s) {
|
||||
|
||||
return s.Type === 'Video';
|
||||
|
||||
})[0] || {};
|
||||
|
||||
var videoCodec = videoStream.Codec;
|
||||
const videoCodec = videoStream.Codec;
|
||||
|
||||
var audioStreamIndex = playbackManager.getAudioStreamIndex(player);
|
||||
var audioStream = playbackManager.audioTracks(player).filter(function (s) {
|
||||
const audioStreamIndex = playbackManager.getAudioStreamIndex(player);
|
||||
const audioStream = playbackManager.audioTracks(player).filter(function (s) {
|
||||
|
||||
return s.Type === 'Audio' && s.Index === audioStreamIndex;
|
||||
|
||||
})[0] || {};
|
||||
|
||||
var audioCodec = audioStream.Codec;
|
||||
var audioChannels = audioStream.Channels;
|
||||
const audioCodec = audioStream.Codec;
|
||||
const audioChannels = audioStream.Channels;
|
||||
|
||||
var videoInfos = [];
|
||||
const videoInfos = [];
|
||||
|
||||
if (videoCodec) {
|
||||
videoInfos.push(videoCodec.toUpperCase());
|
||||
|
|
@ -279,7 +289,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
});
|
||||
}
|
||||
|
||||
var audioInfos = [];
|
||||
const audioInfos = [];
|
||||
|
||||
if (audioCodec) {
|
||||
audioInfos.push(audioCodec.toUpperCase());
|
||||
|
|
@ -328,8 +338,8 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
}
|
||||
|
||||
function getSyncPlayStats() {
|
||||
var syncStats = [];
|
||||
var stats = syncPlayManager.getStats();
|
||||
const syncStats = [];
|
||||
const stats = syncPlayManager.getStats();
|
||||
|
||||
syncStats.push({
|
||||
label: globalize.translate('LabelSyncPlayTimeOffset'),
|
||||
|
|
@ -351,18 +361,18 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
|
||||
function getStats(instance, player) {
|
||||
|
||||
var statsPromise = player.getStats ? player.getStats() : Promise.resolve({});
|
||||
var sessionPromise = getSession(instance, player);
|
||||
const statsPromise = player.getStats ? player.getStats() : Promise.resolve({});
|
||||
const sessionPromise = getSession(instance, player);
|
||||
|
||||
return Promise.all([statsPromise, sessionPromise]).then(function (responses) {
|
||||
|
||||
var playerStatsResult = responses[0];
|
||||
var playerStats = playerStatsResult.categories || [];
|
||||
var session = responses[1];
|
||||
const playerStatsResult = responses[0];
|
||||
const playerStats = playerStatsResult.categories || [];
|
||||
const session = responses[1];
|
||||
|
||||
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
|
||||
const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
|
||||
|
||||
var baseCategory = {
|
||||
const baseCategory = {
|
||||
stats: [],
|
||||
name: 'Playback Info'
|
||||
};
|
||||
|
|
@ -377,13 +387,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
value: player.name
|
||||
});
|
||||
|
||||
var categories = [];
|
||||
const categories = [];
|
||||
|
||||
categories.push(baseCategory);
|
||||
|
||||
for (var i = 0, length = playerStats.length; i < length; i++) {
|
||||
for (let i = 0, length = playerStats.length; i < length; i++) {
|
||||
|
||||
var category = playerStats[i];
|
||||
const category = playerStats[i];
|
||||
if (category.type === 'audio') {
|
||||
category.name = 'Audio Info';
|
||||
} else if (category.type === 'video') {
|
||||
|
|
@ -418,7 +428,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
|
||||
function renderPlayerStats(instance, player) {
|
||||
|
||||
var now = new Date().getTime();
|
||||
const now = new Date().getTime();
|
||||
|
||||
if ((now - (instance.lastRender || 0)) < 700) {
|
||||
return;
|
||||
|
|
@ -428,7 +438,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
|
||||
getStats(instance, player).then(function (stats) {
|
||||
|
||||
var elem = instance.element;
|
||||
const elem = instance.element;
|
||||
if (!elem) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -439,7 +449,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
|
||||
function bindEvents(instance, player) {
|
||||
|
||||
var localOnTimeUpdate = function () {
|
||||
const localOnTimeUpdate = function () {
|
||||
renderPlayerStats(instance, player);
|
||||
};
|
||||
|
||||
|
|
@ -449,14 +459,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
|
||||
function unbindEvents(instance, player) {
|
||||
|
||||
var localOnTimeUpdate = instance.onTimeUpdate;
|
||||
const localOnTimeUpdate = instance.onTimeUpdate;
|
||||
|
||||
if (localOnTimeUpdate) {
|
||||
events.off(player, 'timeupdate', localOnTimeUpdate);
|
||||
}
|
||||
}
|
||||
|
||||
function PlayerStats(options) {
|
||||
class PlayerStats {
|
||||
constructor(options) {
|
||||
|
||||
this.options = options;
|
||||
|
||||
|
|
@ -465,13 +476,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
this.enabled(true);
|
||||
}
|
||||
|
||||
PlayerStats.prototype.enabled = function (enabled) {
|
||||
enabled(enabled) {
|
||||
|
||||
if (enabled == null) {
|
||||
return this._enabled;
|
||||
}
|
||||
|
||||
var options = this.options;
|
||||
const options = this.options;
|
||||
|
||||
if (!options) {
|
||||
return;
|
||||
|
|
@ -485,15 +496,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
this.element.classList.add('hide');
|
||||
unbindEvents(this, options.player);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
PlayerStats.prototype.toggle = function () {
|
||||
toggle() {
|
||||
this.enabled(!this.enabled());
|
||||
};
|
||||
}
|
||||
|
||||
PlayerStats.prototype.destroy = function () {
|
||||
destroy() {
|
||||
|
||||
var options = this.options;
|
||||
const options = this.options;
|
||||
|
||||
if (options) {
|
||||
|
||||
|
|
@ -501,12 +512,14 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
|
|||
unbindEvents(this, options.player);
|
||||
}
|
||||
|
||||
var elem = this.element;
|
||||
const elem = this.element;
|
||||
if (elem) {
|
||||
elem.parentNode.removeChild(elem);
|
||||
this.element = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return PlayerStats;
|
||||
});
|
||||
/* eslint-enable indent */
|
||||
|
||||
export default PlayerStats;
|
||||
|
|
|
|||
|
|
@ -964,7 +964,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
|
|||
if (statsOverlay) {
|
||||
statsOverlay.toggle();
|
||||
} else {
|
||||
statsOverlay = new PlayerStats({
|
||||
statsOverlay = new PlayerStats.default({
|
||||
player: player
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue