client/src/assets/player/videojs-components/p2p-info-button.ts

   1 import { PlayerNetworkInfo, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
   2 import { bytes } from '../utils'
   3
   4 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
   5 class P2pInfoButton extends Button {
   6
   7   createEl () {
   8     const div = videojsUntyped.dom.createEl('div', {
   9       className: 'vjs-peertube'
  10     })
  11     const subDivWebtorrent = videojsUntyped.dom.createEl('div', {
  12       className: 'vjs-peertube-hidden' // Hide the stats before we get the info
  13     })
  14     div.appendChild(subDivWebtorrent)
  15
  16     const downloadIcon = videojsUntyped.dom.createEl('span', {
  17       className: 'icon icon-download'
  18     })
  19     subDivWebtorrent.appendChild(downloadIcon)
  20
  21     const downloadSpeedText = videojsUntyped.dom.createEl('span', {
  22       className: 'download-speed-text'
  23     })
  24     const downloadSpeedNumber = videojsUntyped.dom.createEl('span', {
  25       className: 'download-speed-number'
  26     })
  27     const downloadSpeedUnit = videojsUntyped.dom.createEl('span')
  28     downloadSpeedText.appendChild(downloadSpeedNumber)
  29     downloadSpeedText.appendChild(downloadSpeedUnit)
  30     subDivWebtorrent.appendChild(downloadSpeedText)
  31
  32     const uploadIcon = videojsUntyped.dom.createEl('span', {
  33       className: 'icon icon-upload'
  34     })
  35     subDivWebtorrent.appendChild(uploadIcon)
  36
  37     const uploadSpeedText = videojsUntyped.dom.createEl('span', {
  38       className: 'upload-speed-text'
  39     })
  40     const uploadSpeedNumber = videojsUntyped.dom.createEl('span', {
  41       className: 'upload-speed-number'
  42     })
  43     const uploadSpeedUnit = videojsUntyped.dom.createEl('span')
  44     uploadSpeedText.appendChild(uploadSpeedNumber)
  45     uploadSpeedText.appendChild(uploadSpeedUnit)
  46     subDivWebtorrent.appendChild(uploadSpeedText)
  47
  48     const peersText = videojsUntyped.dom.createEl('span', {
  49       className: 'peers-text'
  50     })
  51     const peersNumber = videojsUntyped.dom.createEl('span', {
  52       className: 'peers-number'
  53     })
  54     subDivWebtorrent.appendChild(peersNumber)
  55     subDivWebtorrent.appendChild(peersText)
  56
  57     const subDivHttp = videojsUntyped.dom.createEl('div', {
  58       className: 'vjs-peertube-hidden'
  59     })
  60     const subDivHttpText = videojsUntyped.dom.createEl('span', {
  61       className: 'http-fallback',
  62       textContent: 'HTTP'
  63     })
  64
  65     subDivHttp.appendChild(subDivHttpText)
  66     div.appendChild(subDivHttp)
  67
  68     this.player_.on('p2pInfo', (event: any, data: PlayerNetworkInfo) => {
  69       // We are in HTTP fallback
  70       if (!data) {
  71         subDivHttp.className = 'vjs-peertube-displayed'
  72         subDivWebtorrent.className = 'vjs-peertube-hidden'
  73
  74         return
  75       }
  76
  77       const p2pStats = data.p2p
  78       const httpStats = data.http
  79
  80       const downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed)
  81       const uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed)
  82       const totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded)
  83       const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded)
  84       const numPeers = p2pStats.numPeers
  85
  86       subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
  87         this.player_.localize('Total uploaded: ' + totalUploaded.join(' '))
  88
  89       downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
  90       downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
  91
  92       uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
  93       uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
  94
  95       peersNumber.textContent = numPeers
  96       peersText.textContent = ' ' + (numPeers > 1 ? this.player_.localize('peers') : this.player_.localize('peer'))
  97
  98       subDivHttp.className = 'vjs-peertube-hidden'
  99       subDivWebtorrent.className = 'vjs-peertube-displayed'
 100     })
 101
 102     return div
 103   }
 104 }
 105 Button.registerComponent('P2PInfoButton', P2pInfoButton)