diff options
Diffstat (limited to 'client/src/assets/player/webtorrent-info-button.ts')
-rw-r--r-- | client/src/assets/player/webtorrent-info-button.ts | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/client/src/assets/player/webtorrent-info-button.ts b/client/src/assets/player/webtorrent-info-button.ts new file mode 100644 index 000000000..8a79e0e50 --- /dev/null +++ b/client/src/assets/player/webtorrent-info-button.ts | |||
@@ -0,0 +1,101 @@ | |||
1 | import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings' | ||
2 | import { bytes } from './utils' | ||
3 | |||
4 | const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button') | ||
5 | class WebtorrentInfoButton extends Button { | ||
6 | createEl () { | ||
7 | const div = videojsUntyped.dom.createEl('div', { | ||
8 | className: 'vjs-peertube' | ||
9 | }) | ||
10 | const subDivWebtorrent = videojsUntyped.dom.createEl('div', { | ||
11 | className: 'vjs-peertube-hidden' // Hide the stats before we get the info | ||
12 | }) | ||
13 | div.appendChild(subDivWebtorrent) | ||
14 | |||
15 | const downloadIcon = videojsUntyped.dom.createEl('span', { | ||
16 | className: 'icon icon-download' | ||
17 | }) | ||
18 | subDivWebtorrent.appendChild(downloadIcon) | ||
19 | |||
20 | const downloadSpeedText = videojsUntyped.dom.createEl('span', { | ||
21 | className: 'download-speed-text' | ||
22 | }) | ||
23 | const downloadSpeedNumber = videojsUntyped.dom.createEl('span', { | ||
24 | className: 'download-speed-number' | ||
25 | }) | ||
26 | const downloadSpeedUnit = videojsUntyped.dom.createEl('span') | ||
27 | downloadSpeedText.appendChild(downloadSpeedNumber) | ||
28 | downloadSpeedText.appendChild(downloadSpeedUnit) | ||
29 | subDivWebtorrent.appendChild(downloadSpeedText) | ||
30 | |||
31 | const uploadIcon = videojsUntyped.dom.createEl('span', { | ||
32 | className: 'icon icon-upload' | ||
33 | }) | ||
34 | subDivWebtorrent.appendChild(uploadIcon) | ||
35 | |||
36 | const uploadSpeedText = videojsUntyped.dom.createEl('span', { | ||
37 | className: 'upload-speed-text' | ||
38 | }) | ||
39 | const uploadSpeedNumber = videojsUntyped.dom.createEl('span', { | ||
40 | className: 'upload-speed-number' | ||
41 | }) | ||
42 | const uploadSpeedUnit = videojsUntyped.dom.createEl('span') | ||
43 | uploadSpeedText.appendChild(uploadSpeedNumber) | ||
44 | uploadSpeedText.appendChild(uploadSpeedUnit) | ||
45 | subDivWebtorrent.appendChild(uploadSpeedText) | ||
46 | |||
47 | const peersText = videojsUntyped.dom.createEl('span', { | ||
48 | className: 'peers-text' | ||
49 | }) | ||
50 | const peersNumber = videojsUntyped.dom.createEl('span', { | ||
51 | className: 'peers-number' | ||
52 | }) | ||
53 | subDivWebtorrent.appendChild(peersNumber) | ||
54 | subDivWebtorrent.appendChild(peersText) | ||
55 | |||
56 | const subDivHttp = videojsUntyped.dom.createEl('div', { | ||
57 | className: 'vjs-peertube-hidden' | ||
58 | }) | ||
59 | const subDivHttpText = videojsUntyped.dom.createEl('span', { | ||
60 | className: 'peers-number', | ||
61 | textContent: 'HTTP' | ||
62 | }) | ||
63 | const subDivFallbackText = videojsUntyped.dom.createEl('span', { | ||
64 | className: 'peers-text', | ||
65 | textContent: 'fallback' | ||
66 | }) | ||
67 | |||
68 | subDivHttp.appendChild(subDivHttpText) | ||
69 | subDivHttp.appendChild(subDivFallbackText) | ||
70 | div.appendChild(subDivHttp) | ||
71 | |||
72 | this.player_.peertube().on('torrentInfo', (event, data) => { | ||
73 | // We are in HTTP fallback | ||
74 | if (!data) { | ||
75 | subDivHttp.className = 'vjs-peertube-displayed' | ||
76 | subDivWebtorrent.className = 'vjs-peertube-hidden' | ||
77 | |||
78 | return | ||
79 | } | ||
80 | |||
81 | const downloadSpeed = bytes(data.downloadSpeed) | ||
82 | const uploadSpeed = bytes(data.uploadSpeed) | ||
83 | const numPeers = data.numPeers | ||
84 | |||
85 | downloadSpeedNumber.textContent = downloadSpeed[ 0 ] | ||
86 | downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ] | ||
87 | |||
88 | uploadSpeedNumber.textContent = uploadSpeed[ 0 ] | ||
89 | uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ] | ||
90 | |||
91 | peersNumber.textContent = numPeers | ||
92 | peersText.textContent = ' peers' | ||
93 | |||
94 | subDivHttp.className = 'vjs-peertube-hidden' | ||
95 | subDivWebtorrent.className = 'vjs-peertube-displayed' | ||
96 | }) | ||
97 | |||
98 | return div | ||
99 | } | ||
100 | } | ||
101 | Button.registerComponent('WebTorrentButton', WebtorrentInfoButton) | ||