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 = {}
42 constructor (player: videojs.Player, options: StatsCardOptions) {
43 super(player, options)
47 const container = super.createEl('div', {
48 className: 'vjs-stats-content',
49 innerHTML: this.getMainTemplate()
51 this.container = container
52 this.container.style.display = 'none'
54 this.closeButton = this.container.getElementsByClassName('vjs-stats-close')[0] as HTMLElement
55 this.closeButton.onclick = () => this.hide()
57 this.list = this.container.getElementsByClassName('vjs-stats-list')[0] as HTMLDivElement
59 this.player_.on('p2pInfo', (event: any, data: EventPlayerNetworkInfo) => {
60 if (!data) return // HTTP fallback
62 this.mode = data.source
64 const p2pStats = data.p2p
65 const httpStats = data.http
67 this.playerNetworkInfo.downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed).join(' ')
68 this.playerNetworkInfo.uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed).join(' ')
69 this.playerNetworkInfo.totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded).join(' ')
70 this.playerNetworkInfo.totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded).join(' ')
71 this.playerNetworkInfo.numPeers = p2pStats.numPeers
72 this.playerNetworkInfo.averageBandwidth = bytes(data.bandwidthEstimate).join(' ') + '/s'
74 if (data.source === 'p2p-media-loader') {
75 this.playerNetworkInfo.downloadedFromServer = bytes(httpStats.downloaded).join(' ')
76 this.playerNetworkInfo.downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
90 this.container.style.display = 'block'
91 this.updateInterval = setInterval(async () => {
93 const options = this.mode === 'p2p-media-loader'
94 ? await this.buildHLSOptions()
95 : await this.buildWebTorrentOptions() // Default
97 this.list.innerHTML = this.getListTemplate(options)
99 console.error('Cannot update stats.', err)
100 clearInterval(this.updateInterval)
106 clearInterval(this.updateInterval)
107 this.container.style.display = 'none'
110 private async buildHLSOptions () {
111 const p2pMediaLoader = this.player_.p2pMediaLoader()
112 const level = p2pMediaLoader.getCurrentLevel()
114 const codecs = level?.videoCodec || level?.audioCodec
115 ? `${level?.videoCodec || ''} / ${level?.audioCodec || ''}`
118 const resolution = `${level?.height}p${level?.attrs['FRAME-RATE'] || ''}`
119 const buffer = this.timeRangesToString(this.player().buffered())
124 if (this.options_.videoIsLive) {
125 latency = secondsToTime(p2pMediaLoader.getLiveLatency())
127 progress = this.player().bufferedPercent()
131 playerNetworkInfo: this.playerNetworkInfo,
140 private async buildWebTorrentOptions () {
141 const videoFile = this.player_.webtorrent().getCurrentVideoFile()
143 if (!this.metadataStore[videoFile.fileUrl]) {
144 this.metadataStore[videoFile.fileUrl] = await fetch(videoFile.metadataUrl).then(res => res.json())
147 const metadata = this.metadataStore[videoFile.fileUrl]
149 let colorSpace = 'unknown'
150 let codecs = 'unknown'
152 if (metadata?.streams[0]) {
153 const stream = metadata.streams[0]
155 colorSpace = stream['color_space'] !== 'unknown'
156 ? stream['color_space']
159 codecs = stream['codec_name'] || 'avc1'
162 const resolution = videoFile?.resolution.label + videoFile?.fps
163 const buffer = this.timeRangesToString(this.player().buffered())
164 const progress = this.player_.webtorrent().getTorrent()?.progress
167 playerNetworkInfo: this.playerNetworkInfo,
176 private getListTemplate (options: {
177 playerNetworkInfo: PlayerNetworkInfo
186 const { playerNetworkInfo, progress, colorSpace, codecs, resolution, buffer, latency } = options
187 const player = this.player()
189 const videoQuality: VideoPlaybackQuality = player.getVideoPlaybackQuality()
190 const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
191 const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
192 const pr = (window.devicePixelRatio || 1).toFixed(2)
193 const frames = `${vw}x${vh}*${pr} / ${videoQuality.droppedVideoFrames} dropped of ${videoQuality.totalVideoFrames}`
195 const duration = player.duration()
197 let volume = `${Math.round(player.volume() * 100)}`
198 if (player.muted()) volume += ' (muted)'
200 const networkActivity = playerNetworkInfo.downloadSpeed
201 ? `${playerNetworkInfo.downloadSpeed} ⇓ / ${playerNetworkInfo.uploadSpeed} ⇑`
204 const totalTransferred = playerNetworkInfo.totalDownloaded
205 ? `${playerNetworkInfo.totalDownloaded} ⇓ / ${playerNetworkInfo.totalUploaded} ⇑`
207 const downloadBreakdown = playerNetworkInfo.downloadedFromServer
208 ? `${playerNetworkInfo.downloadedFromServer} from server ยท ${playerNetworkInfo.downloadedFromPeers} from peers`
211 const bufferProgress = progress !== undefined
212 ? `${(progress * 100).toFixed(1)}% (${(progress * duration).toFixed(1)}s)`
216 ${this.buildElement(player.localize('Player mode'), this.mode || 'HTTP')}
218 ${this.buildElement(player.localize('Video UUID'), this.options_.videoUUID)}
220 ${this.buildElement(player.localize('Viewport / Frames'), frames)}
222 ${this.buildElement(player.localize('Resolution'), resolution)}
224 ${this.buildElement(player.localize('Volume'), volume)}
226 ${this.buildElement(player.localize('Codecs'), codecs)}
227 ${this.buildElement(player.localize('Color'), colorSpace)}
229 ${this.buildElement(player.localize('Connection Speed'), playerNetworkInfo.averageBandwidth)}
231 ${this.buildElement(player.localize('Network Activity'), networkActivity)}
232 ${this.buildElement(player.localize('Total Transfered'), totalTransferred)}
233 ${this.buildElement(player.localize('Download Breakdown'), downloadBreakdown)}
235 ${this.buildElement(player.localize('Buffer Progress'), bufferProgress)}
236 ${this.buildElement(player.localize('Buffer State'), buffer)}
238 ${this.buildElement(player.localize('Live Latency'), latency)}
242 private getMainTemplate () {
244 <button class="vjs-stats-close" tabindex=0 aria-label="Close stats" title="Close stats">[x]</button>
245 <div class="vjs-stats-list"></div>
249 private buildElement (label: string, value?: string) {
250 if (!value) return ''
252 return `<div><div>${label}</div><span>${value}</span></div>`
255 private timeRangesToString (r: videojs.TimeRange) {
258 for (let i = 0; i < r.length; i++) {
259 const start = Math.floor(r.start(i))
260 const end = Math.floor(r.end(i))
262 result += `[${secondsToTime(start)}, ${secondsToTime(end)}] `
269 videojs.registerComponent('StatsCard', StatsCard)