diff options
Diffstat (limited to 'client/src/assets/player/videojs-components/p2p-info-button.ts')
-rw-r--r-- | client/src/assets/player/videojs-components/p2p-info-button.ts | 48 |
1 files changed, 25 insertions, 23 deletions
diff --git a/client/src/assets/player/videojs-components/p2p-info-button.ts b/client/src/assets/player/videojs-components/p2p-info-button.ts index 6424787b2..db6806fed 100644 --- a/client/src/assets/player/videojs-components/p2p-info-button.ts +++ b/client/src/assets/player/videojs-components/p2p-info-button.ts | |||
@@ -1,63 +1,64 @@ | |||
1 | import { PlayerNetworkInfo, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings' | 1 | import { PlayerNetworkInfo } from '../peertube-videojs-typings' |
2 | import videojs from 'video.js' | ||
2 | import { bytes } from '../utils' | 3 | import { bytes } from '../utils' |
3 | 4 | ||
4 | const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button') | 5 | const Button = videojs.getComponent('Button') |
5 | class P2pInfoButton extends Button { | 6 | class P2pInfoButton extends Button { |
6 | 7 | ||
7 | createEl () { | 8 | createEl () { |
8 | const div = videojsUntyped.dom.createEl('div', { | 9 | const div = videojs.dom.createEl('div', { |
9 | className: 'vjs-peertube' | 10 | className: 'vjs-peertube' |
10 | }) | 11 | }) |
11 | const subDivWebtorrent = videojsUntyped.dom.createEl('div', { | 12 | const subDivWebtorrent = videojs.dom.createEl('div', { |
12 | className: 'vjs-peertube-hidden' // Hide the stats before we get the info | 13 | className: 'vjs-peertube-hidden' // Hide the stats before we get the info |
13 | }) | 14 | }) as HTMLDivElement |
14 | div.appendChild(subDivWebtorrent) | 15 | div.appendChild(subDivWebtorrent) |
15 | 16 | ||
16 | const downloadIcon = videojsUntyped.dom.createEl('span', { | 17 | const downloadIcon = videojs.dom.createEl('span', { |
17 | className: 'icon icon-download' | 18 | className: 'icon icon-download' |
18 | }) | 19 | }) |
19 | subDivWebtorrent.appendChild(downloadIcon) | 20 | subDivWebtorrent.appendChild(downloadIcon) |
20 | 21 | ||
21 | const downloadSpeedText = videojsUntyped.dom.createEl('span', { | 22 | const downloadSpeedText = videojs.dom.createEl('span', { |
22 | className: 'download-speed-text' | 23 | className: 'download-speed-text' |
23 | }) | 24 | }) |
24 | const downloadSpeedNumber = videojsUntyped.dom.createEl('span', { | 25 | const downloadSpeedNumber = videojs.dom.createEl('span', { |
25 | className: 'download-speed-number' | 26 | className: 'download-speed-number' |
26 | }) | 27 | }) |
27 | const downloadSpeedUnit = videojsUntyped.dom.createEl('span') | 28 | const downloadSpeedUnit = videojs.dom.createEl('span') |
28 | downloadSpeedText.appendChild(downloadSpeedNumber) | 29 | downloadSpeedText.appendChild(downloadSpeedNumber) |
29 | downloadSpeedText.appendChild(downloadSpeedUnit) | 30 | downloadSpeedText.appendChild(downloadSpeedUnit) |
30 | subDivWebtorrent.appendChild(downloadSpeedText) | 31 | subDivWebtorrent.appendChild(downloadSpeedText) |
31 | 32 | ||
32 | const uploadIcon = videojsUntyped.dom.createEl('span', { | 33 | const uploadIcon = videojs.dom.createEl('span', { |
33 | className: 'icon icon-upload' | 34 | className: 'icon icon-upload' |
34 | }) | 35 | }) |
35 | subDivWebtorrent.appendChild(uploadIcon) | 36 | subDivWebtorrent.appendChild(uploadIcon) |
36 | 37 | ||
37 | const uploadSpeedText = videojsUntyped.dom.createEl('span', { | 38 | const uploadSpeedText = videojs.dom.createEl('span', { |
38 | className: 'upload-speed-text' | 39 | className: 'upload-speed-text' |
39 | }) | 40 | }) |
40 | const uploadSpeedNumber = videojsUntyped.dom.createEl('span', { | 41 | const uploadSpeedNumber = videojs.dom.createEl('span', { |
41 | className: 'upload-speed-number' | 42 | className: 'upload-speed-number' |
42 | }) | 43 | }) |
43 | const uploadSpeedUnit = videojsUntyped.dom.createEl('span') | 44 | const uploadSpeedUnit = videojs.dom.createEl('span') |
44 | uploadSpeedText.appendChild(uploadSpeedNumber) | 45 | uploadSpeedText.appendChild(uploadSpeedNumber) |
45 | uploadSpeedText.appendChild(uploadSpeedUnit) | 46 | uploadSpeedText.appendChild(uploadSpeedUnit) |
46 | subDivWebtorrent.appendChild(uploadSpeedText) | 47 | subDivWebtorrent.appendChild(uploadSpeedText) |
47 | 48 | ||
48 | const peersText = videojsUntyped.dom.createEl('span', { | 49 | const peersText = videojs.dom.createEl('span', { |
49 | className: 'peers-text' | 50 | className: 'peers-text' |
50 | }) | 51 | }) |
51 | const peersNumber = videojsUntyped.dom.createEl('span', { | 52 | const peersNumber = videojs.dom.createEl('span', { |
52 | className: 'peers-number' | 53 | className: 'peers-number' |
53 | }) | 54 | }) |
54 | subDivWebtorrent.appendChild(peersNumber) | 55 | subDivWebtorrent.appendChild(peersNumber) |
55 | subDivWebtorrent.appendChild(peersText) | 56 | subDivWebtorrent.appendChild(peersText) |
56 | 57 | ||
57 | const subDivHttp = videojsUntyped.dom.createEl('div', { | 58 | const subDivHttp = videojs.dom.createEl('div', { |
58 | className: 'vjs-peertube-hidden' | 59 | className: 'vjs-peertube-hidden' |
59 | }) | 60 | }) |
60 | const subDivHttpText = videojsUntyped.dom.createEl('span', { | 61 | const subDivHttpText = videojs.dom.createEl('span', { |
61 | className: 'http-fallback', | 62 | className: 'http-fallback', |
62 | textContent: 'HTTP' | 63 | textContent: 'HTTP' |
63 | }) | 64 | }) |
@@ -83,8 +84,8 @@ class P2pInfoButton extends Button { | |||
83 | const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded) | 84 | const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded) |
84 | const numPeers = p2pStats.numPeers | 85 | const numPeers = p2pStats.numPeers |
85 | 86 | ||
86 | subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' + | 87 | subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' + |
87 | this.player_.localize('Total uploaded: ' + totalUploaded.join(' ')) | 88 | this.player().localize('Total uploaded: ' + totalUploaded.join(' ')) |
88 | 89 | ||
89 | downloadSpeedNumber.textContent = downloadSpeed[ 0 ] | 90 | downloadSpeedNumber.textContent = downloadSpeed[ 0 ] |
90 | downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ] | 91 | downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ] |
@@ -92,14 +93,15 @@ class P2pInfoButton extends Button { | |||
92 | uploadSpeedNumber.textContent = uploadSpeed[ 0 ] | 93 | uploadSpeedNumber.textContent = uploadSpeed[ 0 ] |
93 | uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ] | 94 | uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ] |
94 | 95 | ||
95 | peersNumber.textContent = numPeers | 96 | peersNumber.textContent = numPeers.toString() |
96 | peersText.textContent = ' ' + (numPeers > 1 ? this.player_.localize('peers') : this.player_.localize('peer')) | 97 | peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer')) |
97 | 98 | ||
98 | subDivHttp.className = 'vjs-peertube-hidden' | 99 | subDivHttp.className = 'vjs-peertube-hidden' |
99 | subDivWebtorrent.className = 'vjs-peertube-displayed' | 100 | subDivWebtorrent.className = 'vjs-peertube-displayed' |
100 | }) | 101 | }) |
101 | 102 | ||
102 | return div | 103 | return div as HTMLButtonElement |
103 | } | 104 | } |
104 | } | 105 | } |
105 | Button.registerComponent('P2PInfoButton', P2pInfoButton) | 106 | |
107 | videojs.registerComponent('P2PInfoButton', P2pInfoButton) | ||