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