diff --git a/package.json b/package.json index b911778bc2..192fe79bd1 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/playerstats/playerstats.js b/src/components/playerstats/playerstats.js index a65baf3553..ca9d6dc20e 100644 --- a/src/components/playerstats/playerstats.js +++ b/src/components/playerstats/playerstats.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 = ''; } - var contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content'; + const contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content'; parent.innerHTML = '
' + button + '
'; @@ -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 += '
'; @@ -62,11 +72,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay categoryHtml += '
'; } - for (var i = 0, length = stats.length; i < length; i++) { + for (let i = 0, length = stats.length; i < length; i++) { categoryHtml += '
'; - var stat = stats[i]; + const stat = stats[i]; categoryHtml += '
'; 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; diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js index d6caf24e81..88f6ec6d9c 100644 --- a/src/controllers/playback/videoosd.js +++ b/src/controllers/playback/videoosd.js @@ -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 }); }