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'
12 interface PlayerNetworkInfo {
13 downloadSpeed?: string
15 totalDownloaded?: string
16 totalUploaded?: string
18 averageBandwidth?: string
20 downloadedFromServer?: string
21 downloadedFromPeers?: string
24 const Component = videojs.getComponent('Component')
25 class StatsCard extends Component {
26 options_: StatsCardOptions
28 container: HTMLDivElement
31 closeButton: HTMLElement
35 mode: 'webtorrent' | 'p2p-media-loader'
37 metadataStore: any = {}
40 playerNetworkInfo: PlayerNetworkInfo = {}
43 const container = super.createEl('div', {
44 className: 'vjs-stats-content',
45 innerHTML: this.getMainTemplate()
47 this.container = container
48 this.container.style.display = 'none'
50 this.closeButton = this.container.getElementsByClassName('vjs-stats-close')[0] as HTMLElement
51 this.closeButton.onclick = () => this.hide()
53 this.list = this.container.getElementsByClassName('vjs-stats-list')[0] as HTMLDivElement
55 this.player_.on('p2pInfo', (event: any, data: EventPlayerNetworkInfo) => {
56 if (!data) return // HTTP fallback
58 this.mode = data.source
60 const p2pStats = data.p2p
61 const httpStats = data.http
63 this.playerNetworkInfo.downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed).join(' ')
64 this.playerNetworkInfo.uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed).join(' ')
65 this.playerNetworkInfo.totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded).join(' ')
66 this.playerNetworkInfo.totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded).join(' ')
67 this.playerNetworkInfo.numPeers = p2pStats.numPeers
68 this.playerNetworkInfo.averageBandwidth = bytes(data.bandwidthEstimate).join(' ') + '/s'
70 if (data.source === 'p2p-media-loader') {
71 this.playerNetworkInfo.downloadedFromServer = bytes(httpStats.downloaded).join(' ')
72 this.playerNetworkInfo.downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
80 if (this.updateInterval) this.hide()
85 this.container.style.display = 'block'
86 this.updateInterval = setInterval(async () => {
88 const options = this.mode === 'p2p-media-loader'
89 ? await this.buildHLSOptions()
90 : await this.buildWebTorrentOptions() // Default
92 this.list.innerHTML = this.getListTemplate(options)
94 console.error('Cannot update stats.', err)
95 clearInterval(this.updateInterval)
101 clearInterval(this.updateInterval)
102 this.container.style.display = 'none'
105 private async buildHLSOptions () {
106 const p2pMediaLoader = this.player_.p2pMediaLoader()
107 const level = p2pMediaLoader.getCurrentLevel()
109 const codecs = level?.videoCodec || level?.audioCodec
110 ? `${level?.videoCodec || ''} / ${level?.audioCodec || ''}`
113 const resolution = `${level?.height}p${level?.attrs['FRAME-RATE'] || ''}`
114 const buffer = this.timeRangesToString(this.player().buffered())
119 if (this.options_.videoIsLive) {
120 latency = secondsToTime(p2pMediaLoader.getLiveLatency())
122 progress = this.player().bufferedPercent()
126 playerNetworkInfo: this.playerNetworkInfo,
135 private async buildWebTorrentOptions () {
136 const videoFile = this.player_.webtorrent().getCurrentVideoFile()
138 if (!this.metadataStore[videoFile.fileUrl]) {
139 this.metadataStore[videoFile.fileUrl] = await fetch(videoFile.metadataUrl).then(res => res.json())
142 const metadata = this.metadataStore[videoFile.fileUrl]
144 let colorSpace = 'unknown'
145 let codecs = 'unknown'
147 if (metadata?.streams[0]) {
148 const stream = metadata.streams[0]
150 colorSpace = stream['color_space'] !== 'unknown'
151 ? stream['color_space']
154 codecs = stream['codec_name'] || 'avc1'
157 const resolution = videoFile?.resolution.label + videoFile?.fps
158 const buffer = this.timeRangesToString(this.player().buffered())
159 const progress = this.player_.webtorrent().getTorrent()?.progress
162 playerNetworkInfo: this.playerNetworkInfo,
171 private getListTemplate (options: {
172 playerNetworkInfo: PlayerNetworkInfo
181 const { playerNetworkInfo, progress, colorSpace, codecs, resolution, buffer, latency } = options
182 const player = this.player()
184 const videoQuality: VideoPlaybackQuality = player.getVideoPlaybackQuality()
185 const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
186 const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
187 const pr = (window.devicePixelRatio || 1).toFixed(2)
188 const frames = `${vw}x${vh}*${pr} / ${videoQuality.droppedVideoFrames} dropped of ${videoQuality.totalVideoFrames}`
190 const duration = player.duration()
192 let volume = `${Math.round(player.volume() * 100)}`
193 if (player.muted()) volume += ' (muted)'
195 const networkActivity = playerNetworkInfo.downloadSpeed
196 ? `${playerNetworkInfo.downloadSpeed} ⇓ / ${playerNetworkInfo.uploadSpeed} ⇑`
199 const totalTransferred = playerNetworkInfo.totalDownloaded
200 ? `${playerNetworkInfo.totalDownloaded} ⇓ / ${playerNetworkInfo.totalUploaded} ⇑`
202 const downloadBreakdown = playerNetworkInfo.downloadedFromServer
203 ? `${playerNetworkInfo.downloadedFromServer} from server ยท ${playerNetworkInfo.downloadedFromPeers} from peers`
206 const bufferProgress = progress !== undefined
207 ? `${(progress * 100).toFixed(1)}% (${(progress * duration).toFixed(1)}s)`
211 ${this.buildElement(player.localize('Player mode'), this.mode || 'HTTP')}
213 ${this.buildElement(player.localize('Video UUID'), this.options_.videoUUID)}
215 ${this.buildElement(player.localize('Viewport / Frames'), frames)}
217 ${this.buildElement(player.localize('Resolution'), resolution)}
219 ${this.buildElement(player.localize('Volume'), volume)}
221 ${this.buildElement(player.localize('Codecs'), codecs)}
222 ${this.buildElement(player.localize('Color'), colorSpace)}
224 ${this.buildElement(player.localize('Connection Speed'), playerNetworkInfo.averageBandwidth)}
226 ${this.buildElement(player.localize('Network Activity'), networkActivity)}
227 ${this.buildElement(player.localize('Total Transfered'), totalTransferred)}
228 ${this.buildElement(player.localize('Download Breakdown'), downloadBreakdown)}
230 ${this.buildElement(player.localize('Buffer Progress'), bufferProgress)}
231 ${this.buildElement(player.localize('Buffer State'), buffer)}
233 ${this.buildElement(player.localize('Live Latency'), latency)}
237 private getMainTemplate () {
239 <button class="vjs-stats-close" tabindex=0 aria-label="Close stats" title="Close stats">[x]</button>
240 <div class="vjs-stats-list"></div>
244 private buildElement (label: string, value?: string) {
245 if (!value) return ''
247 return `<div><div>${label}</div><span>${value}</span></div>`
250 private timeRangesToString (r: videojs.TimeRange) {
253 for (let i = 0; i < r.length; i++) {
254 const start = Math.floor(r.start(i))
255 const end = Math.floor(r.end(i))
257 result += `[${secondsToTime(start)}, ${secondsToTime(end)}] `
264 videojs.registerComponent('StatsCard', StatsCard)