Add more info to stats card

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

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)