From a2b99c3c9243253e24fce2b061d2eb5ead678671 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 22 Aug 2025 11:20:57 +0200 Subject: [PATCH] Add more info to stats card --- .../player/src/shared/stats/stats-card.ts | 57 ++++++++++++------- scripts/i18n/create-custom-files.ts | 3 +- 2 files changed, 38 insertions(+), 22 deletions(-) diff --git a/client/src/standalone/player/src/shared/stats/stats-card.ts b/client/src/standalone/player/src/shared/stats/stats-card.ts index f75d4a3d8..ef27355d9 100644 --- a/client/src/standalone/player/src/shared/stats/stats-card.ts +++ b/client/src/standalone/player/src/shared/stats/stats-card.ts @@ -47,7 +47,6 @@ class StatsCard extends Component { declare private infoListEl: HTMLDivElement declare private playerMode: InfoElement - declare private p2p: InfoElement declare private uuid: InfoElement declare private viewport: InfoElement declare private resolution: InfoElement @@ -56,13 +55,15 @@ class StatsCard extends Component { declare private color: InfoElement declare private connection: InfoElement + declare private bufferProgress: InfoElement + declare private bufferState: InfoElement + + declare private p2p: InfoElement + declare private peers: InfoElement declare private network: InfoElement declare private transferred: InfoElement declare private download: InfoElement - declare private bufferProgress: InfoElement - declare private bufferState: InfoElement - declare private liveLatency: InfoElement declare private onNetworkInfoHandler: (_event: any, data: EventPlayerNetworkInfo) => void @@ -234,38 +235,40 @@ class StatsCard extends Component { private populateInfoBlocks () { this.playerMode = this.buildInfoRow(this.player().localize('Player mode')) - this.p2p = this.buildInfoRow(this.player().localize('P2P')) this.uuid = this.buildInfoRow(this.player().localize('Video UUID')) this.viewport = this.buildInfoRow(this.player().localize('Viewport / Frames')) this.resolution = this.buildInfoRow(this.player().localize('Resolution')) this.volume = this.buildInfoRow(this.player().localize('Volume')) this.codecs = this.buildInfoRow(this.player().localize('Codecs')) this.color = this.buildInfoRow(this.player().localize('Color')) - this.connection = this.buildInfoRow(this.player().localize('Connection Speed')) - - this.network = this.buildInfoRow(this.player().localize('Network Activity')) - this.transferred = this.buildInfoRow(this.player().localize('Total Transfered')) - this.download = this.buildInfoRow(this.player().localize('Download Breakdown')) this.bufferProgress = this.buildInfoRow(this.player().localize('Buffer Progress')) this.bufferState = this.buildInfoRow(this.player().localize('Buffer State')) + this.p2p = this.buildInfoRow(this.player().localize('P2P')) + this.peers = this.buildInfoRow(this.player().localize('Peers')) + this.connection = this.buildInfoRow(this.player().localize('Connection Speed')) + this.network = this.buildInfoRow(this.player().localize('Network Activity')) + this.transferred = this.buildInfoRow(this.player().localize('Total Transfered')) + this.download = this.buildInfoRow(this.player().localize('Download Breakdown')) + this.liveLatency = this.buildInfoRow(this.player().localize('Live Latency')) this.infoListEl.appendChild(this.playerMode.root) - this.infoListEl.appendChild(this.p2p.root) this.infoListEl.appendChild(this.uuid.root) this.infoListEl.appendChild(this.viewport.root) this.infoListEl.appendChild(this.resolution.root) this.infoListEl.appendChild(this.volume.root) this.infoListEl.appendChild(this.codecs.root) this.infoListEl.appendChild(this.color.root) + this.infoListEl.appendChild(this.bufferProgress.root) + this.infoListEl.appendChild(this.bufferState.root) this.infoListEl.appendChild(this.connection.root) + this.infoListEl.appendChild(this.p2p.root) + this.infoListEl.appendChild(this.peers.root) this.infoListEl.appendChild(this.network.root) this.infoListEl.appendChild(this.transferred.root) this.infoListEl.appendChild(this.download.root) - this.infoListEl.appendChild(this.bufferProgress.root) - this.infoListEl.appendChild(this.bufferState.root) this.infoListEl.appendChild(this.liveLatency.root) } @@ -320,7 +323,6 @@ class StatsCard extends Component { const p2pEnabled = this.options_.p2pEnabled && this.mode === 'p2p-media-loader' this.setInfoValue(this.playerMode, this.mode === 'p2p-media-loader' ? 'P2P Media Loader (v2)' : 'Web Video') - this.setInfoValue(this.p2p, player.localize(p2pEnabled ? 'enabled' : 'disabled')) this.setInfoValue(this.uuid, this.options_.videoUUID) this.setInfoValue(this.viewport, frames) @@ -328,15 +330,16 @@ class StatsCard extends Component { this.setInfoValue(this.volume, volume) this.setInfoValue(this.codecs, codecs) this.setInfoValue(this.color, colorSpace) - this.setInfoValue(this.transferred, totalTransferred) - this.setInfoValue(this.connection, playerNetworkInfo.averageBandwidth) - - this.setInfoValue(this.network, networkActivity) - this.setInfoValue(this.download, downloadBreakdown) - this.setInfoValue(this.bufferProgress, bufferProgress) this.setInfoValue(this.bufferState, buffer) + this.setInfoValue(this.p2p, p2pEnabled ? player.localize('enabled') : player.localize('disabled')) + this.setInfoValue(this.peers, playerNetworkInfo.numPeers ? playerNetworkInfo.numPeers + '' : player.localize('no peers')) + this.setInfoValue(this.connection, playerNetworkInfo.averageBandwidth) + this.setInfoValue(this.network, networkActivity) + this.setInfoValue(this.download, downloadBreakdown) + this.setInfoValue(this.transferred, totalTransferred) + if (latency && latencyFromEdge) { this.setInfoValue(this.liveLatency, player.localize('{1} (from edge: {2})', [ latency, latencyFromEdge ])) } @@ -370,11 +373,23 @@ class StatsCard extends Component { private timeRangesToString (r: TimeRange) { let result = '' - for (let i = 0; i < r.length; i++) { + let i = 0 + + if (r.length > 10) { + const toSkip = r.length - 10 + + result += this.player().localize(`(skipped {1} buffers) `, [ toSkip + '' ]) + + i = toSkip + } + + while (i < r.length) { const start = Math.floor(r.start(i)) const end = Math.floor(r.end(i)) result += `[${secondsToTime(start)}, ${secondsToTime(end)}] ` + + i++ } return result diff --git a/scripts/i18n/create-custom-files.ts b/scripts/i18n/create-custom-files.ts index 81a90884b..2ef274b5f 100755 --- a/scripts/i18n/create-custom-files.ts +++ b/scripts/i18n/create-custom-files.ts @@ -96,7 +96,8 @@ const playerKeys = { 'Upload speed:': 'Upload speed:', 'Download speed:': 'Download speed:', 'Uploader note:': 'Uploader note:', - 'Close': 'Close' + 'Close': 'Close', + '(skipped {1} buffers) ': '(skipped {1} buffers) ' } Object.assign(playerKeys, videojs)