mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Migration of playerstats to ES6 module

Browse source
This commit is contained in:
Cameron 2020-07-17 17:52:05 +01:00
parent a9246f8f39
commit f29f3e15fb
3 changed files with 72 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -121,6 +121,7 @@
"src/components/playback/playmethodhelper.js", "src/components/playback/playmethodhelper.js",
"src/components/playback/remotecontrolautoplay.js", "src/components/playback/remotecontrolautoplay.js",
"src/components/playback/volumeosd.js", "src/components/playback/volumeosd.js",
"src/components/playerstats/playerstats.js",
"src/components/playlisteditor/playlisteditor.js", "src/components/playlisteditor/playlisteditor.js",
"src/components/groupedcards.js", "src/components/groupedcards.js",
"src/components/htmlMediaHelper.js", "src/components/htmlMediaHelper.js",

127
src/components/playerstats/playerstats.js
View file

@ -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) { import events from 'events';
'use strict'; 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) { function init(instance) {
var parent = document.createElement('div'); const parent = document.createElement('div');
parent.classList.add('playerStats'); parent.classList.add('playerStats');
@ -13,7 +23,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
parent.classList.add('hide'); parent.classList.add('hide');
var button; let button;
if (layoutManager.tv) { if (layoutManager.tv) {
button = ''; 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>'; 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>'; 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) { 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) { if (stats.length && category.name) {
categoryHtml += '<div class="playerStats-stat playerStats-stat-header">'; categoryHtml += '<div class="playerStats-stat playerStats-stat-header">';
@ -62,11 +72,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
categoryHtml += '</div>'; 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">'; categoryHtml += '<div class="playerStats-stat">';
var stat = stats[i]; const stat = stats[i];
categoryHtml += '<div class="playerStats-stat-label">'; categoryHtml += '<div class="playerStats-stat-label">';
categoryHtml += stat.label; categoryHtml += stat.label;
@ -86,13 +96,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function getSession(instance, player) { function getSession(instance, player) {
var now = new Date().getTime(); const now = new Date().getTime();
if ((now - (instance.lastSessionTime || 0)) < 10000) { if ((now - (instance.lastSessionTime || 0)) < 10000) {
return Promise.resolve(instance.lastSession); return Promise.resolve(instance.lastSession);
} }
var apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId); const apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
return apiClient.getSessions({ return apiClient.getSessions({
deviceId: apiClient.deviceId() deviceId: apiClient.deviceId()
@ -114,12 +124,12 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function getTranscodingStats(session, player, displayPlayMethod) { function getTranscodingStats(session, player, displayPlayMethod) {
var sessionStats = []; const sessionStats = [];
var videoCodec; let videoCodec;
var audioCodec; let audioCodec;
var totalBitrate; let totalBitrate;
var audioChannels; let audioChannels;
if (session.TranscodingInfo) { if (session.TranscodingInfo) {
@ -208,11 +218,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function getMediaSourceStats(session, player, displayPlayMethod) { function getMediaSourceStats(session, player, displayPlayMethod) {
var sessionStats = []; const sessionStats = [];
var mediaSource = playbackManager.currentMediaSource(player) || {}; const mediaSource = playbackManager.currentMediaSource(player) || {};
var totalBitrate = mediaSource.Bitrate; const totalBitrate = mediaSource.Bitrate;
var mediaFileSize = mediaSource.Size; const mediaFileSize = mediaSource.Size;
if (mediaSource.Container) { if (mediaSource.Container) {
sessionStats.push({ sessionStats.push({
@ -236,26 +246,26 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
}); });
} }
var mediaStreams = mediaSource.MediaStreams || []; const mediaStreams = mediaSource.MediaStreams || [];
var videoStream = mediaStreams.filter(function (s) { const videoStream = mediaStreams.filter(function (s) {
return s.Type === 'Video'; return s.Type === 'Video';
})[0] || {}; })[0] || {};
var videoCodec = videoStream.Codec; const videoCodec = videoStream.Codec;
var audioStreamIndex = playbackManager.getAudioStreamIndex(player); const audioStreamIndex = playbackManager.getAudioStreamIndex(player);
var audioStream = playbackManager.audioTracks(player).filter(function (s) { const audioStream = playbackManager.audioTracks(player).filter(function (s) {
return s.Type === 'Audio' && s.Index === audioStreamIndex; return s.Type === 'Audio' && s.Index === audioStreamIndex;
})[0] || {}; })[0] || {};
var audioCodec = audioStream.Codec; const audioCodec = audioStream.Codec;
var audioChannels = audioStream.Channels; const audioChannels = audioStream.Channels;
var videoInfos = []; const videoInfos = [];
if (videoCodec) { if (videoCodec) {
videoInfos.push(videoCodec.toUpperCase()); videoInfos.push(videoCodec.toUpperCase());
@ -279,7 +289,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
}); });
} }
var audioInfos = []; const audioInfos = [];
if (audioCodec) { if (audioCodec) {
audioInfos.push(audioCodec.toUpperCase()); audioInfos.push(audioCodec.toUpperCase());
@ -328,8 +338,8 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function getSyncPlayStats() { function getSyncPlayStats() {
var syncStats = []; const syncStats = [];
var stats = syncPlayManager.getStats(); const stats = syncPlayManager.getStats();
syncStats.push({ syncStats.push({
label: globalize.translate('LabelSyncPlayTimeOffset'), label: globalize.translate('LabelSyncPlayTimeOffset'),
@ -351,18 +361,18 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function getStats(instance, player) { function getStats(instance, player) {
var statsPromise = player.getStats ? player.getStats() : Promise.resolve({}); const statsPromise = player.getStats ? player.getStats() : Promise.resolve({});
var sessionPromise = getSession(instance, player); const sessionPromise = getSession(instance, player);
return Promise.all([statsPromise, sessionPromise]).then(function (responses) { return Promise.all([statsPromise, sessionPromise]).then(function (responses) {
var playerStatsResult = responses[0]; const playerStatsResult = responses[0];
var playerStats = playerStatsResult.categories || []; const playerStats = playerStatsResult.categories || [];
var session = responses[1]; const session = responses[1];
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
var baseCategory = { const baseCategory = {
stats: [], stats: [],
name: 'Playback Info' name: 'Playback Info'
}; };
@ -377,13 +387,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
value: player.name value: player.name
}); });
var categories = []; const categories = [];
categories.push(baseCategory); 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') { if (category.type === 'audio') {
category.name = 'Audio Info'; category.name = 'Audio Info';
} else if (category.type === 'video') { } else if (category.type === 'video') {
@ -418,7 +428,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function renderPlayerStats(instance, player) { function renderPlayerStats(instance, player) {
var now = new Date().getTime(); const now = new Date().getTime();
if ((now - (instance.lastRender || 0)) < 700) { if ((now - (instance.lastRender || 0)) < 700) {
return; return;
@ -428,7 +438,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
getStats(instance, player).then(function (stats) { getStats(instance, player).then(function (stats) {
var elem = instance.element; const elem = instance.element;
if (!elem) { if (!elem) {
return; return;
} }
@ -439,7 +449,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function bindEvents(instance, player) { function bindEvents(instance, player) {
var localOnTimeUpdate = function () { const localOnTimeUpdate = function () {
renderPlayerStats(instance, player); renderPlayerStats(instance, player);
}; };
@ -449,14 +459,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function unbindEvents(instance, player) { function unbindEvents(instance, player) {
var localOnTimeUpdate = instance.onTimeUpdate; const localOnTimeUpdate = instance.onTimeUpdate;
if (localOnTimeUpdate) { if (localOnTimeUpdate) {
events.off(player, 'timeupdate', localOnTimeUpdate); events.off(player, 'timeupdate', localOnTimeUpdate);
} }
} }
function PlayerStats(options) { class PlayerStats {
constructor(options) {
this.options = options; this.options = options;
@ -465,13 +476,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
this.enabled(true); this.enabled(true);
} }
PlayerStats.prototype.enabled = function (enabled) { enabled(enabled) {
if (enabled == null) { if (enabled == null) {
return this._enabled; return this._enabled;
} }
var options = this.options; const options = this.options;
if (!options) { if (!options) {
return; return;
@ -485,15 +496,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
this.element.classList.add('hide'); this.element.classList.add('hide');
unbindEvents(this, options.player); unbindEvents(this, options.player);
} }
}; }
PlayerStats.prototype.toggle = function () { toggle() {
this.enabled(!this.enabled()); this.enabled(!this.enabled());
}; }
PlayerStats.prototype.destroy = function () { destroy() {
var options = this.options; const options = this.options;
if (options) { if (options) {
@ -501,12 +512,14 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
unbindEvents(this, options.player); unbindEvents(this, options.player);
} }
var elem = this.element; const elem = this.element;
if (elem) { if (elem) {
elem.parentNode.removeChild(elem); elem.parentNode.removeChild(elem);
this.element = null; this.element = null;
} }
}; }
}
return PlayerStats; /* eslint-enable indent */
});
export default PlayerStats;

2
src/controllers/playback/videoosd.js
View file

@ -964,7 +964,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
if (statsOverlay) { if (statsOverlay) {
statsOverlay.toggle(); statsOverlay.toggle();
} else { } else {
statsOverlay = new PlayerStats({ statsOverlay = new PlayerStats.default({
player: player player: player
}); });
} }