]>
Commit | Line | Data |
---|---|---|
512decf3 | 1 | import videojs from 'video.js' |
57d65032 C |
2 | import { PeerTubeP2PInfoButtonOptions, PlayerNetworkInfo } from '../../types' |
3 | import { bytes } from '../common' | |
c6352f2c | 4 | |
f5fcd9f7 | 5 | const Button = videojs.getComponent('Button') |
2adfc7ea | 6 | class P2pInfoButton extends Button { |
1a49822c | 7 | |
bf1c3c78 C |
8 | constructor (player: videojs.Player, options?: PeerTubeP2PInfoButtonOptions) { |
9 | super(player, options as any) | |
10 | } | |
11 | ||
c6352f2c | 12 | createEl () { |
f5fcd9f7 | 13 | const div = videojs.dom.createEl('div', { |
c6352f2c C |
14 | className: 'vjs-peertube' |
15 | }) | |
f5fcd9f7 | 16 | const subDivWebtorrent = videojs.dom.createEl('div', { |
c6352f2c | 17 | className: 'vjs-peertube-hidden' // Hide the stats before we get the info |
f5fcd9f7 | 18 | }) as HTMLDivElement |
c6352f2c C |
19 | div.appendChild(subDivWebtorrent) |
20 | ||
bf1c3c78 C |
21 | // Stop here if P2P is not enabled |
22 | const p2pEnabled = (this.options_ as PeerTubeP2PInfoButtonOptions).p2pEnabled | |
23 | if (!p2pEnabled) return div as HTMLButtonElement | |
24 | ||
f5fcd9f7 | 25 | const downloadIcon = videojs.dom.createEl('span', { |
c6352f2c C |
26 | className: 'icon icon-download' |
27 | }) | |
28 | subDivWebtorrent.appendChild(downloadIcon) | |
29 | ||
f5fcd9f7 | 30 | const downloadSpeedText = videojs.dom.createEl('span', { |
c6352f2c C |
31 | className: 'download-speed-text' |
32 | }) | |
f5fcd9f7 | 33 | const downloadSpeedNumber = videojs.dom.createEl('span', { |
c6352f2c C |
34 | className: 'download-speed-number' |
35 | }) | |
f5fcd9f7 | 36 | const downloadSpeedUnit = videojs.dom.createEl('span') |
c6352f2c C |
37 | downloadSpeedText.appendChild(downloadSpeedNumber) |
38 | downloadSpeedText.appendChild(downloadSpeedUnit) | |
39 | subDivWebtorrent.appendChild(downloadSpeedText) | |
40 | ||
f5fcd9f7 | 41 | const uploadIcon = videojs.dom.createEl('span', { |
c6352f2c C |
42 | className: 'icon icon-upload' |
43 | }) | |
44 | subDivWebtorrent.appendChild(uploadIcon) | |
45 | ||
f5fcd9f7 | 46 | const uploadSpeedText = videojs.dom.createEl('span', { |
c6352f2c C |
47 | className: 'upload-speed-text' |
48 | }) | |
f5fcd9f7 | 49 | const uploadSpeedNumber = videojs.dom.createEl('span', { |
c6352f2c C |
50 | className: 'upload-speed-number' |
51 | }) | |
f5fcd9f7 | 52 | const uploadSpeedUnit = videojs.dom.createEl('span') |
c6352f2c C |
53 | uploadSpeedText.appendChild(uploadSpeedNumber) |
54 | uploadSpeedText.appendChild(uploadSpeedUnit) | |
55 | subDivWebtorrent.appendChild(uploadSpeedText) | |
56 | ||
f5fcd9f7 | 57 | const peersText = videojs.dom.createEl('span', { |
c6352f2c C |
58 | className: 'peers-text' |
59 | }) | |
f5fcd9f7 | 60 | const peersNumber = videojs.dom.createEl('span', { |
c6352f2c C |
61 | className: 'peers-number' |
62 | }) | |
63 | subDivWebtorrent.appendChild(peersNumber) | |
64 | subDivWebtorrent.appendChild(peersText) | |
65 | ||
f5fcd9f7 | 66 | const subDivHttp = videojs.dom.createEl('div', { |
c6352f2c C |
67 | className: 'vjs-peertube-hidden' |
68 | }) | |
f5fcd9f7 | 69 | const subDivHttpText = videojs.dom.createEl('span', { |
1ee156b2 | 70 | className: 'http-fallback', |
c6352f2c C |
71 | textContent: 'HTTP' |
72 | }) | |
c6352f2c C |
73 | |
74 | subDivHttp.appendChild(subDivHttpText) | |
c6352f2c C |
75 | div.appendChild(subDivHttp) |
76 | ||
3b6f205c | 77 | this.player_.on('p2pInfo', (event: any, data: PlayerNetworkInfo) => { |
c6352f2c C |
78 | // We are in HTTP fallback |
79 | if (!data) { | |
80 | subDivHttp.className = 'vjs-peertube-displayed' | |
81 | subDivWebtorrent.className = 'vjs-peertube-hidden' | |
82 | ||
83 | return | |
84 | } | |
85 | ||
3b6f205c | 86 | const p2pStats = data.p2p |
09209296 | 87 | const httpStats = data.http |
3b6f205c | 88 | |
09209296 | 89 | const downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed) |
fd3c2e87 | 90 | const uploadSpeed = bytes(p2pStats.uploadSpeed) |
09209296 | 91 | const totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded) |
fd3c2e87 | 92 | const totalUploaded = bytes(p2pStats.uploaded) |
3b6f205c | 93 | const numPeers = p2pStats.numPeers |
c6352f2c | 94 | |
17152837 FC |
95 | subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' |
96 | ||
97 | if (data.source === 'p2p-media-loader') { | |
98 | const downloadedFromServer = bytes(httpStats.downloaded).join(' ') | |
99 | const downloadedFromPeers = bytes(p2pStats.downloaded).join(' ') | |
100 | ||
101 | subDivWebtorrent.title += | |
5f8327c5 C |
102 | ' * ' + this.player().localize('From servers: ') + downloadedFromServer + '\n' + |
103 | ' * ' + this.player().localize('From peers: ') + downloadedFromPeers + '\n' | |
17152837 FC |
104 | } |
105 | subDivWebtorrent.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ') | |
1a49822c | 106 | |
9df52d66 C |
107 | downloadSpeedNumber.textContent = downloadSpeed[0] |
108 | downloadSpeedUnit.textContent = ' ' + downloadSpeed[1] | |
c6352f2c | 109 | |
9df52d66 C |
110 | uploadSpeedNumber.textContent = uploadSpeed[0] |
111 | uploadSpeedUnit.textContent = ' ' + uploadSpeed[1] | |
c6352f2c | 112 | |
f5fcd9f7 C |
113 | peersNumber.textContent = numPeers.toString() |
114 | peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer')) | |
c6352f2c C |
115 | |
116 | subDivHttp.className = 'vjs-peertube-hidden' | |
117 | subDivWebtorrent.className = 'vjs-peertube-displayed' | |
118 | }) | |
119 | ||
f5fcd9f7 | 120 | return div as HTMLButtonElement |
c6352f2c C |
121 | } |
122 | } | |
f5fcd9f7 C |
123 | |
124 | videojs.registerComponent('P2PInfoButton', P2pInfoButton) |