1 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
2 import { bytes } from './utils'
4 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
5 class WebtorrentInfoButton extends Button {
7 const div = videojsUntyped.dom.createEl('div', {
8 className: 'vjs-peertube'
10 const subDivWebtorrent = videojsUntyped.dom.createEl('div', {
11 className: 'vjs-peertube-hidden' // Hide the stats before we get the info
13 div.appendChild(subDivWebtorrent)
15 const downloadIcon = videojsUntyped.dom.createEl('span', {
16 className: 'icon icon-download'
18 subDivWebtorrent.appendChild(downloadIcon)
20 const downloadSpeedText = videojsUntyped.dom.createEl('span', {
21 className: 'download-speed-text'
23 const downloadSpeedNumber = videojsUntyped.dom.createEl('span', {
24 className: 'download-speed-number'
26 const downloadSpeedUnit = videojsUntyped.dom.createEl('span')
27 downloadSpeedText.appendChild(downloadSpeedNumber)
28 downloadSpeedText.appendChild(downloadSpeedUnit)
29 subDivWebtorrent.appendChild(downloadSpeedText)
31 const uploadIcon = videojsUntyped.dom.createEl('span', {
32 className: 'icon icon-upload'
34 subDivWebtorrent.appendChild(uploadIcon)
36 const uploadSpeedText = videojsUntyped.dom.createEl('span', {
37 className: 'upload-speed-text'
39 const uploadSpeedNumber = videojsUntyped.dom.createEl('span', {
40 className: 'upload-speed-number'
42 const uploadSpeedUnit = videojsUntyped.dom.createEl('span')
43 uploadSpeedText.appendChild(uploadSpeedNumber)
44 uploadSpeedText.appendChild(uploadSpeedUnit)
45 subDivWebtorrent.appendChild(uploadSpeedText)
47 const peersText = videojsUntyped.dom.createEl('span', {
48 className: 'peers-text'
50 const peersNumber = videojsUntyped.dom.createEl('span', {
51 className: 'peers-number'
53 subDivWebtorrent.appendChild(peersNumber)
54 subDivWebtorrent.appendChild(peersText)
56 const subDivHttp = videojsUntyped.dom.createEl('div', {
57 className: 'vjs-peertube-hidden'
59 const subDivHttpText = videojsUntyped.dom.createEl('span', {
60 className: 'peers-number',
64 subDivHttp.appendChild(subDivHttpText)
65 div.appendChild(subDivHttp)
67 this.player_.peertube().on('torrentInfo', (event, data) => {
68 // We are in HTTP fallback
70 subDivHttp.className = 'vjs-peertube-displayed'
71 subDivWebtorrent.className = 'vjs-peertube-hidden'
76 const downloadSpeed = bytes(data.downloadSpeed)
77 const uploadSpeed = bytes(data.uploadSpeed)
78 const numPeers = data.numPeers
80 downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
81 downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
83 uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
84 uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
86 peersNumber.textContent = numPeers
87 peersText.textContent = ' ' + this.player_.localize('peers')
89 subDivHttp.className = 'vjs-peertube-hidden'
90 subDivWebtorrent.className = 'vjs-peertube-displayed'
96 Button.registerComponent('WebTorrentButton', WebtorrentInfoButton)