]>
Commit | Line | Data |
---|---|---|
c6352f2c C |
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 { | |
1a49822c | 6 | |
c6352f2c C |
7 | createEl () { |
8 | const div = videojsUntyped.dom.createEl('div', { | |
9 | className: 'vjs-peertube' | |
10 | }) | |
11 | const subDivWebtorrent = videojsUntyped.dom.createEl('div', { | |
12 | className: 'vjs-peertube-hidden' // Hide the stats before we get the info | |
13 | }) | |
14 | div.appendChild(subDivWebtorrent) | |
15 | ||
16 | const downloadIcon = videojsUntyped.dom.createEl('span', { | |
17 | className: 'icon icon-download' | |
18 | }) | |
19 | subDivWebtorrent.appendChild(downloadIcon) | |
20 | ||
21 | const downloadSpeedText = videojsUntyped.dom.createEl('span', { | |
22 | className: 'download-speed-text' | |
23 | }) | |
24 | const downloadSpeedNumber = videojsUntyped.dom.createEl('span', { | |
25 | className: 'download-speed-number' | |
26 | }) | |
27 | const downloadSpeedUnit = videojsUntyped.dom.createEl('span') | |
28 | downloadSpeedText.appendChild(downloadSpeedNumber) | |
29 | downloadSpeedText.appendChild(downloadSpeedUnit) | |
30 | subDivWebtorrent.appendChild(downloadSpeedText) | |
31 | ||
32 | const uploadIcon = videojsUntyped.dom.createEl('span', { | |
33 | className: 'icon icon-upload' | |
34 | }) | |
35 | subDivWebtorrent.appendChild(uploadIcon) | |
36 | ||
37 | const uploadSpeedText = videojsUntyped.dom.createEl('span', { | |
38 | className: 'upload-speed-text' | |
39 | }) | |
40 | const uploadSpeedNumber = videojsUntyped.dom.createEl('span', { | |
41 | className: 'upload-speed-number' | |
42 | }) | |
43 | const uploadSpeedUnit = videojsUntyped.dom.createEl('span') | |
44 | uploadSpeedText.appendChild(uploadSpeedNumber) | |
45 | uploadSpeedText.appendChild(uploadSpeedUnit) | |
46 | subDivWebtorrent.appendChild(uploadSpeedText) | |
47 | ||
48 | const peersText = videojsUntyped.dom.createEl('span', { | |
49 | className: 'peers-text' | |
50 | }) | |
51 | const peersNumber = videojsUntyped.dom.createEl('span', { | |
52 | className: 'peers-number' | |
53 | }) | |
54 | subDivWebtorrent.appendChild(peersNumber) | |
55 | subDivWebtorrent.appendChild(peersText) | |
56 | ||
57 | const subDivHttp = videojsUntyped.dom.createEl('div', { | |
58 | className: 'vjs-peertube-hidden' | |
59 | }) | |
60 | const subDivHttpText = videojsUntyped.dom.createEl('span', { | |
1ee156b2 | 61 | className: 'http-fallback', |
c6352f2c C |
62 | textContent: 'HTTP' |
63 | }) | |
c6352f2c C |
64 | |
65 | subDivHttp.appendChild(subDivHttpText) | |
c6352f2c C |
66 | div.appendChild(subDivHttp) |
67 | ||
68 | this.player_.peertube().on('torrentInfo', (event, data) => { | |
69 | // We are in HTTP fallback | |
70 | if (!data) { | |
71 | subDivHttp.className = 'vjs-peertube-displayed' | |
72 | subDivWebtorrent.className = 'vjs-peertube-hidden' | |
73 | ||
74 | return | |
75 | } | |
76 | ||
77 | const downloadSpeed = bytes(data.downloadSpeed) | |
78 | const uploadSpeed = bytes(data.uploadSpeed) | |
1a49822c C |
79 | const totalDownloaded = bytes(data.downloaded) |
80 | const totalUploaded = bytes(data.uploaded) | |
c6352f2c C |
81 | const numPeers = data.numPeers |
82 | ||
1b952dd4 | 83 | subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' + |
1a49822c C |
84 | this.player_.localize('Total uploaded: ' + totalUploaded.join(' ')) |
85 | ||
c6352f2c C |
86 | downloadSpeedNumber.textContent = downloadSpeed[ 0 ] |
87 | downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ] | |
88 | ||
89 | uploadSpeedNumber.textContent = uploadSpeed[ 0 ] | |
90 | uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ] | |
91 | ||
92 | peersNumber.textContent = numPeers | |
e945b184 | 93 | peersText.textContent = ' ' + this.player_.localize('peers') |
c6352f2c C |
94 | |
95 | subDivHttp.className = 'vjs-peertube-hidden' | |
96 | subDivWebtorrent.className = 'vjs-peertube-displayed' | |
97 | }) | |
98 | ||
99 | return div | |
100 | } | |
101 | } | |
102 | Button.registerComponent('WebTorrentButton', WebtorrentInfoButton) |