add 'total downloaded' stats from server and peers in player (#3394)

Implements https://github.com/Chocobozzz/PeerTube/issues/3384
This will only work with HLS. The display for Webtorrent is left untouched.

Co-authored-by: Rigel Kent <par@rigelk.eu>

4 files changed, 15 insertions, 2 deletions

diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index f8116f4bc..e97925ab5 100644
--- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -153,6 +153,7 @@ class P2pMediaLoaderPlugin extends Plugin {
       this.statsHTTPBytes.pendingUpload = []
 
       return this.player.trigger('p2pInfo', {
+        source: 'p2p-media-loader',
         http: {
           downloadSpeed: httpDownloadSpeed,
           uploadSpeed: httpUploadSpeed,
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index a359b8595..f1e614499 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -175,6 +175,8 @@ type AutoResolutionUpdateData = {
 }
 
 type PlayerNetworkInfo = {
+  source: 'webtorrent' | 'p2p-media-loader'
+
   http: {
     downloadSpeed: number
     uploadSpeed: number
diff --git a/client/src/assets/player/videojs-components/p2p-info-button.ts b/client/src/assets/player/videojs-components/p2p-info-button.ts
index db6806fed..b1f7cd751 100644
--- a/client/src/assets/player/videojs-components/p2p-info-button.ts
+++ b/client/src/assets/player/videojs-components/p2p-info-button.ts
@@ -84,8 +84,17 @@ class P2pInfoButton extends Button {
       const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded)
       const numPeers = p2pStats.numPeers
 
-      subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
-        this.player().localize('Total uploaded: ' + totalUploaded.join(' '))
+      subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n'
+
+      if (data.source === 'p2p-media-loader') {
+        const downloadedFromServer = bytes(httpStats.downloaded).join(' ')
+        const downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
+
+        subDivWebtorrent.title +=
+          '* ' + this.player().localize('From the server: ') + downloadedFromServer + '\n' +
+          '* ' + this.player().localize('From peers: ') + downloadedFromPeers + '\n'
+      }
+      subDivWebtorrent.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ')
 
       downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
       downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index 782c91cbd..96ba497a0 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -487,6 +487,7 @@ class WebTorrentPlugin extends Plugin {
       if (this.webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(this.webtorrent.downloadSpeed)
 
       return this.player.trigger('p2pInfo', {
+        source: 'webtorrent',
         http: {
           downloadSpeed: 0,
           uploadSpeed: 0,