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   createEl () {
   7     const div = videojsUntyped.dom.createEl('div', {
   8       className: 'vjs-peertube'
   9     })
  10     const subDivWebtorrent = videojsUntyped.dom.createEl('div', {
  11       className: 'vjs-peertube-hidden' // Hide the stats before we get the info
  12     })
  13     div.appendChild(subDivWebtorrent)
  14
  15     const downloadIcon = videojsUntyped.dom.createEl('span', {
  16       className: 'icon icon-download'
  17     })
  18     subDivWebtorrent.appendChild(downloadIcon)
  19
  20     const downloadSpeedText = videojsUntyped.dom.createEl('span', {
  21       className: 'download-speed-text'
  22     })
  23     const downloadSpeedNumber = videojsUntyped.dom.createEl('span', {
  24       className: 'download-speed-number'
  25     })
  26     const downloadSpeedUnit = videojsUntyped.dom.createEl('span')
  27     downloadSpeedText.appendChild(downloadSpeedNumber)
  28     downloadSpeedText.appendChild(downloadSpeedUnit)
  29     subDivWebtorrent.appendChild(downloadSpeedText)
  30
  31     const uploadIcon = videojsUntyped.dom.createEl('span', {
  32       className: 'icon icon-upload'
  33     })
  34     subDivWebtorrent.appendChild(uploadIcon)
  35
  36     const uploadSpeedText = videojsUntyped.dom.createEl('span', {
  37       className: 'upload-speed-text'
  38     })
  39     const uploadSpeedNumber = videojsUntyped.dom.createEl('span', {
  40       className: 'upload-speed-number'
  41     })
  42     const uploadSpeedUnit = videojsUntyped.dom.createEl('span')
  43     uploadSpeedText.appendChild(uploadSpeedNumber)
  44     uploadSpeedText.appendChild(uploadSpeedUnit)
  45     subDivWebtorrent.appendChild(uploadSpeedText)
  46
  47     const peersText = videojsUntyped.dom.createEl('span', {
  48       className: 'peers-text'
  49     })
  50     const peersNumber = videojsUntyped.dom.createEl('span', {
  51       className: 'peers-number'
  52     })
  53     subDivWebtorrent.appendChild(peersNumber)
  54     subDivWebtorrent.appendChild(peersText)
  55
  56     const subDivHttp = videojsUntyped.dom.createEl('div', {
  57       className: 'vjs-peertube-hidden'
  58     })
  59     const subDivHttpText = videojsUntyped.dom.createEl('span', {
  60       className: 'peers-number',
  61       textContent: 'HTTP'
  62     })
  63
  64     subDivHttp.appendChild(subDivHttpText)
  65     div.appendChild(subDivHttp)
  66
  67     this.player_.peertube().on('torrentInfo', (event, data) => {
  68       // We are in HTTP fallback
  69       if (!data) {
  70         subDivHttp.className = 'vjs-peertube-displayed'
  71         subDivWebtorrent.className = 'vjs-peertube-hidden'
  72
  73         return
  74       }
  75
  76       const downloadSpeed = bytes(data.downloadSpeed)
  77       const uploadSpeed = bytes(data.uploadSpeed)
  78       const numPeers = data.numPeers
  79
  80       downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
  81       downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
  82
  83       uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
  84       uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
  85
  86       peersNumber.textContent = numPeers
  87       peersText.textContent = ' ' + this.player_.localize('peers')
  88
  89       subDivHttp.className = 'vjs-peertube-hidden'
  90       subDivWebtorrent.className = 'vjs-peertube-displayed'
  91     })
  92
  93     return div
  94   }
  95 }
  96 Button.registerComponent('WebTorrentButton', WebtorrentInfoButton)