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