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 | 124 |
1 files changed, 0 insertions, 124 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 deleted file mode 100644 index 081dee1d3..000000000 --- a/client/src/assets/player/videojs-components/p2p-info-button.ts +++ /dev/null | |||
@@ -1,124 +0,0 @@ | |||
1 | import videojs from 'video.js' | ||
2 | import { PeerTubeP2PInfoButtonOptions, PlayerNetworkInfo } from '../peertube-videojs-typings' | ||
3 | import { bytes } from '../utils' | ||
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) | ||