1 import videojs from 'video.js'
2 import { secondsToTime } from '@shared/core-utils'
3 import { PlayerNetworkInfo as EventPlayerNetworkInfo } from '../peertube-videojs-typings'
4 import { bytes } from '../utils'
6 interface StatsCardOptions extends videojs.ComponentOptions {
9 mode: 'webtorrent' | 'p2p-media-loader'
13 interface PlayerNetworkInfo {
14 downloadSpeed?: string
16 totalDownloaded?: string
17 totalUploaded?: string
19 averageBandwidth?: string
21 downloadedFromServer?: string
22 downloadedFromPeers?: string
25 const Component = videojs.getComponent('Component')
26 class StatsCard extends Component {
27 options_: StatsCardOptions
29 container: HTMLDivElement
32 closeButton: HTMLElement
36 mode: 'webtorrent' | 'p2p-media-loader'
38 metadataStore: any = {}
41 playerNetworkInfo: PlayerNetworkInfo = {}
44 const container = super.createEl('div', {
45 className: 'vjs-stats-content',
46 innerHTML: this.getMainTemplate()
48 this.container = container
49 this.container.style.display = 'none'
51 this.closeButton = this.container.getElementsByClassName('vjs-stats-close')[0] as HTMLElement
52 this.closeButton.onclick = () => this.hide()
54 this.list = this.container.getElementsByClassName('vjs-stats-list')[0] as HTMLDivElement
56 this.player_.on('p2pInfo', (event: any, data: EventPlayerNetworkInfo) => {
57 if (!data) return // HTTP fallback
59 this.mode = data.source
61 const p2pStats = data.p2p
62 const httpStats = data.http
64 this.playerNetworkInfo.downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed).join(' ')
65 this.playerNetworkInfo.uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed).join(' ')
66 this.playerNetworkInfo.totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded).join(' ')
67 this.playerNetworkInfo.totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded).join(' ')
68 this.playerNetworkInfo.numPeers = p2pStats.numPeers
69 this.playerNetworkInfo.averageBandwidth = bytes(data.bandwidthEstimate).join(' ') + '/s'
71 if (data.source === 'p2p-media-loader') {
72 this.playerNetworkInfo.downloadedFromServer = bytes(httpStats.downloaded).join(' ')
73 this.playerNetworkInfo.downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
81 if (this.updateInterval) this.hide()
86 this.container.style.display = 'block'
87 this.updateInterval = setInterval(async () => {
89 const options = this.mode === 'p2p-media-loader'
90 ? this.buildHLSOptions()
91 : await this.buildWebTorrentOptions() // Default
93 this.list.innerHTML = this.getListTemplate(options)
95 console.error('Cannot update stats.', err)
96 clearInterval(this.updateInterval)
102 clearInterval(this.updateInterval)
103 this.container.style.display = 'none'
106 private buildHLSOptions () {
107 const p2pMediaLoader = this.player_.p2pMediaLoader()
108 const level = p2pMediaLoader.getCurrentLevel()
110 const codecs = level?.videoCodec || level?.audioCodec
111 ? `${level?.videoCodec || ''} / ${level?.audioCodec || ''}`
114 const resolution = `${level?.height}p${level?.attrs['FRAME-RATE'] || ''}`
115 const buffer = this.timeRangesToString(this.player().buffered())
120 if (this.options_.videoIsLive) {
121 latency = secondsToTime(p2pMediaLoader.getLiveLatency())
123 progress = this.player().bufferedPercent()
127 playerNetworkInfo: this.playerNetworkInfo,
136 private async buildWebTorrentOptions () {
137 const videoFile = this.player_.webtorrent().getCurrentVideoFile()
139 if (!this.metadataStore[videoFile.fileUrl]) {
140 this.metadataStore[videoFile.fileUrl] = await fetch(videoFile.metadataUrl).then(res => res.json())
143 const metadata = this.metadataStore[videoFile.fileUrl]
145 let colorSpace = 'unknown'
146 let codecs = 'unknown'
148 if (metadata?.streams[0]) {
149 const stream = metadata.streams[0]
151 colorSpace = stream['color_space'] !== 'unknown'
152 ? stream['color_space']
155 codecs = stream['codec_name'] || 'avc1'
158 const resolution = videoFile?.resolution.label + videoFile?.fps
159 const buffer = this.timeRangesToString(this.player().buffered())
160 const progress = this.player_.webtorrent().getTorrent()?.progress
163 playerNetworkInfo: this.playerNetworkInfo,
172 private getListTemplate (options: {
173 playerNetworkInfo: PlayerNetworkInfo
182 const { playerNetworkInfo, progress, colorSpace, codecs, resolution, buffer, latency } = options
183 const player = this.player()
185 const videoQuality: VideoPlaybackQuality = player.getVideoPlaybackQuality()
186 const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
187 const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
188 const pr = (window.devicePixelRatio || 1).toFixed(2)
189 const frames = `${vw}x${vh}*${pr} / ${videoQuality.droppedVideoFrames} dropped of ${videoQuality.totalVideoFrames}`
191 const duration = player.duration()
193 let volume = `${Math.round(player.volume() * 100)}`
194 if (player.muted()) volume += ' (muted)'
196 const networkActivity = playerNetworkInfo.downloadSpeed
197 ? `${playerNetworkInfo.downloadSpeed} ⇓ / ${playerNetworkInfo.uploadSpeed} ⇑`
200 const totalTransferred = playerNetworkInfo.totalDownloaded
201 ? `${playerNetworkInfo.totalDownloaded} ⇓ / ${playerNetworkInfo.totalUploaded} ⇑`
203 const downloadBreakdown = playerNetworkInfo.downloadedFromServer
204 ? `${playerNetworkInfo.downloadedFromServer} from servers ยท ${playerNetworkInfo.downloadedFromPeers} from peers`
207 const bufferProgress = progress !== undefined
208 ? `${(progress * 100).toFixed(1)}% (${(progress * duration).toFixed(1)}s)`
212 ${this.buildElement(player.localize('Player mode'), this.mode || 'HTTP')}
213 ${this.buildElement(player.localize('P2P'), player.localize(this.options_.p2pEnabled ? 'enabled' : 'disabled'))}
215 ${this.buildElement(player.localize('Video UUID'), this.options_.videoUUID)}
217 ${this.buildElement(player.localize('Viewport / Frames'), frames)}
219 ${this.buildElement(player.localize('Resolution'), resolution)}
221 ${this.buildElement(player.localize('Volume'), volume)}
223 ${this.buildElement(player.localize('Codecs'), codecs)}
224 ${this.buildElement(player.localize('Color'), colorSpace)}
226 ${this.buildElement(player.localize('Connection Speed'), playerNetworkInfo.averageBandwidth)}
228 ${this.buildElement(player.localize('Network Activity'), networkActivity)}
229 ${this.buildElement(player.localize('Total Transfered'), totalTransferred)}
230 ${this.buildElement(player.localize('Download Breakdown'), downloadBreakdown)}
232 ${this.buildElement(player.localize('Buffer Progress'), bufferProgress)}
233 ${this.buildElement(player.localize('Buffer State'), buffer)}
235 ${this.buildElement(player.localize('Live Latency'), latency)}
239 private getMainTemplate () {
241 <button class="vjs-stats-close" tabindex=0 aria-label="Close stats" title="Close stats">[x]</button>
242 <div class="vjs-stats-list"></div>
246 private buildElement (label: string, value?: string) {
247 if (!value) return ''
249 return `<div><div>${label}</div><span>${value}</span></div>`
252 private timeRangesToString (r: videojs.TimeRange) {
255 for (let i = 0; i < r.length; i++) {
256 const start = Math.floor(r.start(i))
257 const end = Math.floor(r.end(i))
259 result += `[${secondsToTime(start)}, ${secondsToTime(end)}] `
266 videojs.registerComponent('StatsCard', StatsCard)