]>
Commit | Line | Data |
---|---|---|
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) |