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

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