Improve control bar inactivity handling

[github/Chocobozzz/PeerTube.git] / client / src / assets / player / videojs-components / p2p-info-button.ts

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 6424787b286513740d363544fae2fdcc3267f773..07ed18989cd0f7f98316c42d6f656ea710570b0d 100644 (file)
--- a/client/src/assets/player/videojs-components/p2p-info-button.ts
+++ b/client/src/assets/player/videojs-components/p2p-info-button.ts
@@ -1,63 +1,64 @@
-import { PlayerNetworkInfo, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import { PlayerNetworkInfo } from '../peertube-videojs-typings'
+import videojs from 'video.js'
 import { bytes } from '../utils'
 
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
 class P2pInfoButton extends Button {
 
   createEl () {
-    const div = videojsUntyped.dom.createEl('div', {
+    const div = videojs.dom.createEl('div', {
       className: 'vjs-peertube'
     })
-    const subDivWebtorrent = videojsUntyped.dom.createEl('div', {
+    const subDivWebtorrent = videojs.dom.createEl('div', {
       className: 'vjs-peertube-hidden' // Hide the stats before we get the info
-    })
+    }) as HTMLDivElement
     div.appendChild(subDivWebtorrent)
 
-    const downloadIcon = videojsUntyped.dom.createEl('span', {
+    const downloadIcon = videojs.dom.createEl('span', {
       className: 'icon icon-download'
     })
     subDivWebtorrent.appendChild(downloadIcon)
 
-    const downloadSpeedText = videojsUntyped.dom.createEl('span', {
+    const downloadSpeedText = videojs.dom.createEl('span', {
       className: 'download-speed-text'
     })
-    const downloadSpeedNumber = videojsUntyped.dom.createEl('span', {
+    const downloadSpeedNumber = videojs.dom.createEl('span', {
       className: 'download-speed-number'
     })
-    const downloadSpeedUnit = videojsUntyped.dom.createEl('span')
+    const downloadSpeedUnit = videojs.dom.createEl('span')
     downloadSpeedText.appendChild(downloadSpeedNumber)
     downloadSpeedText.appendChild(downloadSpeedUnit)
     subDivWebtorrent.appendChild(downloadSpeedText)
 
-    const uploadIcon = videojsUntyped.dom.createEl('span', {
+    const uploadIcon = videojs.dom.createEl('span', {
       className: 'icon icon-upload'
     })
     subDivWebtorrent.appendChild(uploadIcon)
 
-    const uploadSpeedText = videojsUntyped.dom.createEl('span', {
+    const uploadSpeedText = videojs.dom.createEl('span', {
       className: 'upload-speed-text'
     })
-    const uploadSpeedNumber = videojsUntyped.dom.createEl('span', {
+    const uploadSpeedNumber = videojs.dom.createEl('span', {
       className: 'upload-speed-number'
     })
-    const uploadSpeedUnit = videojsUntyped.dom.createEl('span')
+    const uploadSpeedUnit = videojs.dom.createEl('span')
     uploadSpeedText.appendChild(uploadSpeedNumber)
     uploadSpeedText.appendChild(uploadSpeedUnit)
     subDivWebtorrent.appendChild(uploadSpeedText)
 
-    const peersText = videojsUntyped.dom.createEl('span', {
+    const peersText = videojs.dom.createEl('span', {
       className: 'peers-text'
     })
-    const peersNumber = videojsUntyped.dom.createEl('span', {
+    const peersNumber = videojs.dom.createEl('span', {
       className: 'peers-number'
     })
     subDivWebtorrent.appendChild(peersNumber)
     subDivWebtorrent.appendChild(peersText)
 
-    const subDivHttp = videojsUntyped.dom.createEl('div', {
+    const subDivHttp = videojs.dom.createEl('div', {
       className: 'vjs-peertube-hidden'
     })
-    const subDivHttpText = videojsUntyped.dom.createEl('span', {
+    const subDivHttpText = videojs.dom.createEl('span', {
       className: 'http-fallback',
       textContent: 'HTTP'
     })
@@ -83,23 +84,33 @@ 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(' ')
 
-      downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
-      downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
+        subDivWebtorrent.title +=
+          ' * ' + this.player().localize('From servers: ') + downloadedFromServer + '\n' +
+          ' * ' + this.player().localize('From peers: ') + downloadedFromPeers + '\n'
+      }
+      subDivWebtorrent.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ')
 
-      uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
-      uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
+      downloadSpeedNumber.textContent = downloadSpeed[0]
+      downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
 
-      peersNumber.textContent = numPeers
-      peersText.textContent = ' ' + (numPeers > 1 ? this.player_.localize('peers') : this.player_.localize('peer'))
+      uploadSpeedNumber.textContent = uploadSpeed[0]
+      uploadSpeedUnit.textContent = ' ' + uploadSpeed[1]
+
+      peersNumber.textContent = numPeers.toString()
+      peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer'))
 
       subDivHttp.className = 'vjs-peertube-hidden'
       subDivWebtorrent.className = 'vjs-peertube-displayed'
     })
 
-    return div
+    return div as HTMLButtonElement
   }
 }
-Button.registerComponent('P2PInfoButton', P2pInfoButton)
+
+videojs.registerComponent('P2PInfoButton', P2pInfoButton)