From 04bd31bc18cd789f72ddaeb22e72b85af9ef3efd Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 30 Oct 2023 11:08:09 +0100
Subject: [PATCH] Add more live latency info in stats for nerds

---
 .../p2p-media-loader/p2p-media-loader-plugin.ts      | 10 ++++++++++
 .../web-video-options-builder.ts                     |  2 +-
 client/src/assets/player/shared/stats/stats-card.ts  | 12 +++++++++---
 scripts/i18n/create-custom-files.ts                  |  3 ++-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
index ee617ce8a..7a8824274 100644
--- a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -87,16 +87,26 @@ class P2pMediaLoaderPlugin extends Plugin {
     super.dispose()
   }
 
+  // ---------------------------------------------------------------------------
+
   getCurrentLevel () {
     if (!this.hlsjs) return undefined
 
     return this.hlsjs.levels[this.hlsjs.currentLevel]
   }
 
+  // ---------------------------------------------------------------------------
+
   getLiveLatency () {
     return Math.round(this.hlsjs.latency)
   }
 
+  getLiveLatencyFromEdge () {
+    return Math.round(this.hlsjs.latency - this.hlsjs.targetLatency)
+  }
+
+  // ---------------------------------------------------------------------------
+
   getHLSJS () {
     return this.hlsjs
   }
diff --git a/client/src/assets/player/shared/player-options-builder/web-video-options-builder.ts b/client/src/assets/player/shared/player-options-builder/web-video-options-builder.ts
index 6c1fb8f18..9cf74d8ed 100644
--- a/client/src/assets/player/shared/player-options-builder/web-video-options-builder.ts
+++ b/client/src/assets/player/shared/player-options-builder/web-video-options-builder.ts
@@ -1,6 +1,6 @@
 import { PeerTubePlayerLoadOptions, WebVideoPluginOptions } from '../../types'
 
-type ConstructorOptions = Pick<PeerTubePlayerLoadOptions, 'videoFileToken' | 'webVideo' | 'hls' | 'startTime'>
+type ConstructorOptions = Pick<PeerTubePlayerLoadOptions, 'videoFileToken' | 'webVideo' | 'hls'>
 
 export class WebVideoOptionsBuilder {
 
diff --git a/client/src/assets/player/shared/stats/stats-card.ts b/client/src/assets/player/shared/stats/stats-card.ts
index fefe8483e..b04e91f99 100644
--- a/client/src/assets/player/shared/stats/stats-card.ts
+++ b/client/src/assets/player/shared/stats/stats-card.ts
@@ -163,9 +163,11 @@ class StatsCard extends Component {
 
     let progress: number
     let latency: string
+    let latencyFromEdge: string
 
     if (this.options_.videoIsLive) {
       latency = secondsToTime(p2pMediaLoader.getLiveLatency())
+      latencyFromEdge = secondsToTime(p2pMediaLoader.getLiveLatencyFromEdge())
     } else {
       progress = this.player().bufferedPercent()
     }
@@ -176,6 +178,7 @@ class StatsCard extends Component {
       codecs,
       buffer,
       latency,
+      latencyFromEdge,
       progress
     }
   }
@@ -261,9 +264,10 @@ class StatsCard extends Component {
     buffer: string
 
     latency?: string
+    latencyFromEdge?: string
     colorSpace?: string
   }) {
-    const { playerNetworkInfo, progress, colorSpace, codecs, resolution, buffer, latency } = options
+    const { playerNetworkInfo, progress, colorSpace, codecs, resolution, buffer, latency, latencyFromEdge } = options
     const { downloadedFromServer, downloadedFromPeers } = playerNetworkInfo
 
     const player = this.player()
@@ -311,16 +315,18 @@ 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.transferred, totalTransferred)
     this.setInfoValue(this.download, downloadBreakdown)
 
     this.setInfoValue(this.bufferProgress, bufferProgress)
     this.setInfoValue(this.bufferState, buffer)
 
-    this.setInfoValue(this.liveLatency, latency)
+    if (latency && latencyFromEdge) {
+      this.setInfoValue(this.liveLatency, player.localize('{1} (from edge: {2})', [ latency, latencyFromEdge ]))
+    }
   }
 
   private setInfoValue (el: InfoElement, value: string) {
diff --git a/scripts/i18n/create-custom-files.ts b/scripts/i18n/create-custom-files.ts
index a0b659ec8..c1451113f 100755
--- a/scripts/i18n/create-custom-files.ts
+++ b/scripts/i18n/create-custom-files.ts
@@ -75,7 +75,8 @@ const playerKeys = {
   'Incorrect password, please enter a correct password': 'Incorrect password, please enter a correct password',
   'Cancel': 'Cancel',
   'Up Next': 'Up Next',
-  'Autoplay is suspended': 'Autoplay is suspended'
+  'Autoplay is suspended': 'Autoplay is suspended',
+  '{1} (from edge: {2})': '{1} (from edge: {2})'
 }
 Object.assign(playerKeys, videojs)