client/src/assets/player/webtorrent-info-button.ts

   1 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
   2 import { bytes } from './utils'
   3
   4 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
   5 class WebtorrentInfoButton 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_.peertube().on('torrentInfo', (event, data) => {
  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 downloadSpeed = bytes(data.downloadSpeed)
  78       const uploadSpeed = bytes(data.uploadSpeed)
  79       const totalDownloaded = bytes(data.downloaded)
  80       const totalUploaded = bytes(data.uploaded)
  81       const numPeers = data.numPeers
  82
  83       subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
  84         this.player_.localize('Total uploaded: ' + totalUploaded.join(' '))
  85
  86       downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
  87       downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
  88
  89       uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
  90       uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
  91
  92       peersNumber.textContent = numPeers
  93       peersText.textContent = ' ' + this.player_.localize('peers')
  94
  95       subDivHttp.className = 'vjs-peertube-hidden'
  96       subDivWebtorrent.className = 'vjs-peertube-displayed'
  97     })
  98
  99     return div
 100   }
 101 }
 102 Button.registerComponent('WebTorrentButton', WebtorrentInfoButton)