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',
63 const subDivFallbackText = videojsUntyped.dom.createEl('span', {
64 className: 'peers-text',
65 textContent: ' fallback'
68 subDivHttp.appendChild(subDivHttpText)
69 subDivHttp.appendChild(subDivFallbackText)
70 div.appendChild(subDivHttp)
72 this.player_.peertube().on('torrentInfo', (event, data) => {
73 // We are in HTTP fallback
75 subDivHttp.className = 'vjs-peertube-displayed'
76 subDivWebtorrent.className = 'vjs-peertube-hidden'
81 const downloadSpeed = bytes(data.downloadSpeed)
82 const uploadSpeed = bytes(data.uploadSpeed)
83 const numPeers = data.numPeers
85 downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
86 downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
88 uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
89 uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
91 peersNumber.textContent = numPeers
92 peersText.textContent = ' peers'
94 subDivHttp.className = 'vjs-peertube-hidden'
95 subDivWebtorrent.className = 'vjs-peertube-displayed'
101 Button.registerComponent('WebTorrentButton', WebtorrentInfoButton)