Better display redundancy pies

[github/Chocobozzz/PeerTube.git] / client / src / assets / player / stats / stats-card.ts

diff --git a/client/src/assets/player/stats/stats-card.ts b/client/src/assets/player/stats/stats-card.ts
index a93f595062ac98f6e4ccd5e108af2467a67fc282..e76a81a74e6bedac7cd287fbd5e4f3fa71260af4 100644 (file)
--- a/client/src/assets/player/stats/stats-card.ts
+++ b/client/src/assets/player/stats/stats-card.ts
@@ -1,11 +1,13 @@
 import videojs from 'video.js'
+import { secondsToTime } from '@shared/core-utils'
 import { PlayerNetworkInfo as EventPlayerNetworkInfo } from '../peertube-videojs-typings'
-import { bytes, secondsToTime } from '../utils'
+import { bytes } from '../utils'
 
 interface StatsCardOptions extends videojs.ComponentOptions {
   videoUUID: string
   videoIsLive: boolean
   mode: 'webtorrent' | 'p2p-media-loader'
+  p2pEnabled: boolean
 }
 
 interface PlayerNetworkInfo {
@@ -38,10 +40,6 @@ class StatsCard extends Component {
   intervalMs = 300
   playerNetworkInfo: PlayerNetworkInfo = {}
 
-  constructor (player: videojs.Player, options: StatsCardOptions) {
-    super(player, options)
-  }
-
   createEl () {
     const container = super.createEl('div', {
       className: 'vjs-stats-content',
@@ -80,9 +78,8 @@ class StatsCard extends Component {
   }
 
   toggle () {
-    this.updateInterval
-      ? this.hide()
-      : this.show()
+    if (this.updateInterval) this.hide()
+    else this.show()
   }
 
   show () {
@@ -90,7 +87,7 @@ class StatsCard extends Component {
     this.updateInterval = setInterval(async () => {
       try {
         const options = this.mode === 'p2p-media-loader'
-          ? await this.buildHLSOptions()
+          ? this.buildHLSOptions()
           : await this.buildWebTorrentOptions() // Default
 
         this.list.innerHTML = this.getListTemplate(options)
@@ -106,7 +103,7 @@ class StatsCard extends Component {
     this.container.style.display = 'none'
   }
 
-  private async buildHLSOptions () {
+  private buildHLSOptions () {
     const p2pMediaLoader = this.player_.p2pMediaLoader()
     const level = p2pMediaLoader.getCurrentLevel()
 
@@ -204,7 +201,7 @@ class StatsCard extends Component {
       ? `${playerNetworkInfo.totalDownloaded} ⇓ / ${playerNetworkInfo.totalUploaded} ⇑`
       : undefined
     const downloadBreakdown = playerNetworkInfo.downloadedFromServer
-      ? `${playerNetworkInfo.downloadedFromServer} from server · ${playerNetworkInfo.downloadedFromPeers} from peers`
+      ? `${playerNetworkInfo.downloadedFromServer} from servers · ${playerNetworkInfo.downloadedFromPeers} from peers`
       : undefined
 
     const bufferProgress = progress !== undefined
@@ -213,6 +210,7 @@ class StatsCard extends Component {
 
     return `
       ${this.buildElement(player.localize('Player mode'), this.mode || 'HTTP')}
+      ${this.buildElement(player.localize('P2P'), player.localize(this.options_.p2pEnabled ? 'enabled' : 'disabled'))}
 
       ${this.buildElement(player.localize('Video UUID'), this.options_.videoUUID)}