]>
Commit | Line | Data |
---|---|---|
f5fcd9f7 C |
1 | import { PlayerNetworkInfo } from '../peertube-videojs-typings' |
2 | import videojs from 'video.js' | |
2adfc7ea | 3 | import { bytes } from '../utils' |
c6352f2c | 4 | |
f5fcd9f7 | 5 | const Button = videojs.getComponent('Button') |
2adfc7ea | 6 | class P2pInfoButton extends Button { |
1a49822c | 7 | |
c6352f2c | 8 | createEl () { |
f5fcd9f7 | 9 | const div = videojs.dom.createEl('div', { |
c6352f2c C |
10 | className: 'vjs-peertube' |
11 | }) | |
f5fcd9f7 | 12 | const subDivWebtorrent = videojs.dom.createEl('div', { |
c6352f2c | 13 | className: 'vjs-peertube-hidden' // Hide the stats before we get the info |
f5fcd9f7 | 14 | }) as HTMLDivElement |
c6352f2c C |
15 | div.appendChild(subDivWebtorrent) |
16 | ||
f5fcd9f7 | 17 | const downloadIcon = videojs.dom.createEl('span', { |
c6352f2c C |
18 | className: 'icon icon-download' |
19 | }) | |
20 | subDivWebtorrent.appendChild(downloadIcon) | |
21 | ||
f5fcd9f7 | 22 | const downloadSpeedText = videojs.dom.createEl('span', { |
c6352f2c C |
23 | className: 'download-speed-text' |
24 | }) | |
f5fcd9f7 | 25 | const downloadSpeedNumber = videojs.dom.createEl('span', { |
c6352f2c C |
26 | className: 'download-speed-number' |
27 | }) | |
f5fcd9f7 | 28 | const downloadSpeedUnit = videojs.dom.createEl('span') |
c6352f2c C |
29 | downloadSpeedText.appendChild(downloadSpeedNumber) |
30 | downloadSpeedText.appendChild(downloadSpeedUnit) | |
31 | subDivWebtorrent.appendChild(downloadSpeedText) | |
32 | ||
f5fcd9f7 | 33 | const uploadIcon = videojs.dom.createEl('span', { |
c6352f2c C |
34 | className: 'icon icon-upload' |
35 | }) | |
36 | subDivWebtorrent.appendChild(uploadIcon) | |
37 | ||
f5fcd9f7 | 38 | const uploadSpeedText = videojs.dom.createEl('span', { |
c6352f2c C |
39 | className: 'upload-speed-text' |
40 | }) | |
f5fcd9f7 | 41 | const uploadSpeedNumber = videojs.dom.createEl('span', { |
c6352f2c C |
42 | className: 'upload-speed-number' |
43 | }) | |
f5fcd9f7 | 44 | const uploadSpeedUnit = videojs.dom.createEl('span') |
c6352f2c C |
45 | uploadSpeedText.appendChild(uploadSpeedNumber) |
46 | uploadSpeedText.appendChild(uploadSpeedUnit) | |
47 | subDivWebtorrent.appendChild(uploadSpeedText) | |
48 | ||
f5fcd9f7 | 49 | const peersText = videojs.dom.createEl('span', { |
c6352f2c C |
50 | className: 'peers-text' |
51 | }) | |
f5fcd9f7 | 52 | const peersNumber = videojs.dom.createEl('span', { |
c6352f2c C |
53 | className: 'peers-number' |
54 | }) | |
55 | subDivWebtorrent.appendChild(peersNumber) | |
56 | subDivWebtorrent.appendChild(peersText) | |
57 | ||
f5fcd9f7 | 58 | const subDivHttp = videojs.dom.createEl('div', { |
c6352f2c C |
59 | className: 'vjs-peertube-hidden' |
60 | }) | |
f5fcd9f7 | 61 | const subDivHttpText = videojs.dom.createEl('span', { |
1ee156b2 | 62 | className: 'http-fallback', |
c6352f2c C |
63 | textContent: 'HTTP' |
64 | }) | |
c6352f2c C |
65 | |
66 | subDivHttp.appendChild(subDivHttpText) | |
c6352f2c C |
67 | div.appendChild(subDivHttp) |
68 | ||
3b6f205c | 69 | this.player_.on('p2pInfo', (event: any, data: PlayerNetworkInfo) => { |
c6352f2c C |
70 | // We are in HTTP fallback |
71 | if (!data) { | |
72 | subDivHttp.className = 'vjs-peertube-displayed' | |
73 | subDivWebtorrent.className = 'vjs-peertube-hidden' | |
74 | ||
75 | return | |
76 | } | |
77 | ||
3b6f205c | 78 | const p2pStats = data.p2p |
09209296 | 79 | const httpStats = data.http |
3b6f205c | 80 | |
09209296 C |
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) | |
3b6f205c | 85 | const numPeers = p2pStats.numPeers |
c6352f2c | 86 | |
f5fcd9f7 C |
87 | subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' + |
88 | this.player().localize('Total uploaded: ' + totalUploaded.join(' ')) | |
1a49822c | 89 | |
c6352f2c C |
90 | downloadSpeedNumber.textContent = downloadSpeed[ 0 ] |
91 | downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ] | |
92 | ||
93 | uploadSpeedNumber.textContent = uploadSpeed[ 0 ] | |
94 | uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ] | |
95 | ||
f5fcd9f7 C |
96 | peersNumber.textContent = numPeers.toString() |
97 | peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer')) | |
c6352f2c C |
98 | |
99 | subDivHttp.className = 'vjs-peertube-hidden' | |
100 | subDivWebtorrent.className = 'vjs-peertube-displayed' | |
101 | }) | |
102 | ||
f5fcd9f7 | 103 | return div as HTMLButtonElement |
c6352f2c C |
104 | } |
105 | } | |
f5fcd9f7 C |
106 | |
107 | videojs.registerComponent('P2PInfoButton', P2pInfoButton) |