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     const subDivFallbackText = videojsUntyped.dom.createEl('span', {
  64       className: 'peers-text',
  65       textContent: ' fallback'
  66     })
  67
  68     subDivHttp.appendChild(subDivHttpText)
  69     subDivHttp.appendChild(subDivFallbackText)
  70     div.appendChild(subDivHttp)
  71
  72     this.player_.peertube().on('torrentInfo', (event, data) => {
  73       // We are in HTTP fallback
  74       if (!data) {
  75         subDivHttp.className = 'vjs-peertube-displayed'
  76         subDivWebtorrent.className = 'vjs-peertube-hidden'
  77
  78         return
  79       }
  80
  81       const downloadSpeed = bytes(data.downloadSpeed)
  82       const uploadSpeed = bytes(data.uploadSpeed)
  83       const numPeers = data.numPeers
  84
  85       downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
  86       downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
  87
  88       uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
  89       uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
  90
  91       peersNumber.textContent = numPeers
  92       peersText.textContent = ' peers'
  93
  94       subDivHttp.className = 'vjs-peertube-hidden'
  95       subDivWebtorrent.className = 'vjs-peertube-displayed'
  96     })
  97
  98     return div
  99   }
 100 }
 101 Button.registerComponent('WebTorrentButton', WebtorrentInfoButton)