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

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