1 import { PlayerNetworkInfo } from '../peertube-videojs-typings'
2 import videojs from 'video.js'
3 import { bytes } from '../utils'
5 const Button = videojs.getComponent('Button')
6 class P2pInfoButton extends Button {
9 const div = videojs.dom.createEl('div', {
10 className: 'vjs-peertube'
12 const subDivWebtorrent = videojs.dom.createEl('div', {
13 className: 'vjs-peertube-hidden' // Hide the stats before we get the info
15 div.appendChild(subDivWebtorrent)
17 const downloadIcon = videojs.dom.createEl('span', {
18 className: 'icon icon-download'
20 subDivWebtorrent.appendChild(downloadIcon)
22 const downloadSpeedText = videojs.dom.createEl('span', {
23 className: 'download-speed-text'
25 const downloadSpeedNumber = videojs.dom.createEl('span', {
26 className: 'download-speed-number'
28 const downloadSpeedUnit = videojs.dom.createEl('span')
29 downloadSpeedText.appendChild(downloadSpeedNumber)
30 downloadSpeedText.appendChild(downloadSpeedUnit)
31 subDivWebtorrent.appendChild(downloadSpeedText)
33 const uploadIcon = videojs.dom.createEl('span', {
34 className: 'icon icon-upload'
36 subDivWebtorrent.appendChild(uploadIcon)
38 const uploadSpeedText = videojs.dom.createEl('span', {
39 className: 'upload-speed-text'
41 const uploadSpeedNumber = videojs.dom.createEl('span', {
42 className: 'upload-speed-number'
44 const uploadSpeedUnit = videojs.dom.createEl('span')
45 uploadSpeedText.appendChild(uploadSpeedNumber)
46 uploadSpeedText.appendChild(uploadSpeedUnit)
47 subDivWebtorrent.appendChild(uploadSpeedText)
49 const peersText = videojs.dom.createEl('span', {
50 className: 'peers-text'
52 const peersNumber = videojs.dom.createEl('span', {
53 className: 'peers-number'
55 subDivWebtorrent.appendChild(peersNumber)
56 subDivWebtorrent.appendChild(peersText)
58 const subDivHttp = videojs.dom.createEl('div', {
59 className: 'vjs-peertube-hidden'
61 const subDivHttpText = videojs.dom.createEl('span', {
62 className: 'http-fallback',
66 subDivHttp.appendChild(subDivHttpText)
67 div.appendChild(subDivHttp)
69 this.player_.on('p2pInfo', (event: any, data: PlayerNetworkInfo) => {
70 // We are in HTTP fallback
72 subDivHttp.className = 'vjs-peertube-displayed'
73 subDivWebtorrent.className = 'vjs-peertube-hidden'
78 const p2pStats = data.p2p
79 const httpStats = data.http
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
87 subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n'
89 if (data.source === 'p2p-media-loader') {
90 const downloadedFromServer = bytes(httpStats.downloaded).join(' ')
91 const downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
93 subDivWebtorrent.title +=
94 ' * ' + this.player().localize('From servers: ') + downloadedFromServer + '\n' +
95 ' * ' + this.player().localize('From peers: ') + downloadedFromPeers + '\n'
97 subDivWebtorrent.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ')
99 downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
100 downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
102 uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
103 uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
105 peersNumber.textContent = numPeers.toString()
106 peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer'))
108 subDivHttp.className = 'vjs-peertube-hidden'
109 subDivWebtorrent.className = 'vjs-peertube-displayed'
112 return div as HTMLButtonElement
116 videojs.registerComponent('P2PInfoButton', P2pInfoButton)