-import { PlayerNetworkInfo, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import videojs from 'video.js'
+import { PeerTubeP2PInfoButtonOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
import { bytes } from '../utils'
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
class P2pInfoButton extends Button {
+ constructor (player: videojs.Player, options?: PeerTubeP2PInfoButtonOptions) {
+ super(player, options as any)
+ }
+
createEl () {
- const div = videojsUntyped.dom.createEl('div', {
+ const div = videojs.dom.createEl('div', {
className: 'vjs-peertube'
})
- const subDivWebtorrent = videojsUntyped.dom.createEl('div', {
+ const subDivWebtorrent = videojs.dom.createEl('div', {
className: 'vjs-peertube-hidden' // Hide the stats before we get the info
- })
+ }) as HTMLDivElement
div.appendChild(subDivWebtorrent)
- const downloadIcon = videojsUntyped.dom.createEl('span', {
+ // Stop here if P2P is not enabled
+ const p2pEnabled = (this.options_ as PeerTubeP2PInfoButtonOptions).p2pEnabled
+ if (!p2pEnabled) return div as HTMLButtonElement
+
+ const downloadIcon = videojs.dom.createEl('span', {
className: 'icon icon-download'
})
subDivWebtorrent.appendChild(downloadIcon)
- const downloadSpeedText = videojsUntyped.dom.createEl('span', {
+ const downloadSpeedText = videojs.dom.createEl('span', {
className: 'download-speed-text'
})
- const downloadSpeedNumber = videojsUntyped.dom.createEl('span', {
+ const downloadSpeedNumber = videojs.dom.createEl('span', {
className: 'download-speed-number'
})
- const downloadSpeedUnit = videojsUntyped.dom.createEl('span')
+ const downloadSpeedUnit = videojs.dom.createEl('span')
downloadSpeedText.appendChild(downloadSpeedNumber)
downloadSpeedText.appendChild(downloadSpeedUnit)
subDivWebtorrent.appendChild(downloadSpeedText)
- const uploadIcon = videojsUntyped.dom.createEl('span', {
+ const uploadIcon = videojs.dom.createEl('span', {
className: 'icon icon-upload'
})
subDivWebtorrent.appendChild(uploadIcon)
- const uploadSpeedText = videojsUntyped.dom.createEl('span', {
+ const uploadSpeedText = videojs.dom.createEl('span', {
className: 'upload-speed-text'
})
- const uploadSpeedNumber = videojsUntyped.dom.createEl('span', {
+ const uploadSpeedNumber = videojs.dom.createEl('span', {
className: 'upload-speed-number'
})
- const uploadSpeedUnit = videojsUntyped.dom.createEl('span')
+ const uploadSpeedUnit = videojs.dom.createEl('span')
uploadSpeedText.appendChild(uploadSpeedNumber)
uploadSpeedText.appendChild(uploadSpeedUnit)
subDivWebtorrent.appendChild(uploadSpeedText)
- const peersText = videojsUntyped.dom.createEl('span', {
+ const peersText = videojs.dom.createEl('span', {
className: 'peers-text'
})
- const peersNumber = videojsUntyped.dom.createEl('span', {
+ const peersNumber = videojs.dom.createEl('span', {
className: 'peers-number'
})
subDivWebtorrent.appendChild(peersNumber)
subDivWebtorrent.appendChild(peersText)
- const subDivHttp = videojsUntyped.dom.createEl('div', {
+ const subDivHttp = videojs.dom.createEl('div', {
className: 'vjs-peertube-hidden'
})
- const subDivHttpText = videojsUntyped.dom.createEl('span', {
+ const subDivHttpText = videojs.dom.createEl('span', {
className: 'http-fallback',
textContent: 'HTTP'
})
const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded)
const numPeers = p2pStats.numPeers
- subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
- this.player_.localize('Total uploaded: ' + totalUploaded.join(' '))
+ subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n'
- downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
- downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
+ if (data.source === 'p2p-media-loader') {
+ const downloadedFromServer = bytes(httpStats.downloaded).join(' ')
+ const downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
- uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
- uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
+ subDivWebtorrent.title +=
+ ' * ' + this.player().localize('From servers: ') + downloadedFromServer + '\n' +
+ ' * ' + this.player().localize('From peers: ') + downloadedFromPeers + '\n'
+ }
+ subDivWebtorrent.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ')
+
+ downloadSpeedNumber.textContent = downloadSpeed[0]
+ downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
- peersNumber.textContent = numPeers
- peersText.textContent = ' ' + (numPeers > 1 ? this.player_.localize('peers') : this.player_.localize('peer'))
+ uploadSpeedNumber.textContent = uploadSpeed[0]
+ uploadSpeedUnit.textContent = ' ' + uploadSpeed[1]
+
+ peersNumber.textContent = numPeers.toString()
+ peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer'))
subDivHttp.className = 'vjs-peertube-hidden'
subDivWebtorrent.className = 'vjs-peertube-displayed'
})
- return div
+ return div as HTMLButtonElement
}
}
-Button.registerComponent('P2PInfoButton', P2pInfoButton)
+
+videojs.registerComponent('P2PInfoButton', P2pInfoButton)