Add more live latency info in stats for nerds
This commit is contained in:
parent
a12d94f30d
commit
04bd31bc18
|
@ -87,16 +87,26 @@ class P2pMediaLoaderPlugin extends Plugin {
|
||||||
super.dispose()
|
super.dispose()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
getCurrentLevel () {
|
getCurrentLevel () {
|
||||||
if (!this.hlsjs) return undefined
|
if (!this.hlsjs) return undefined
|
||||||
|
|
||||||
return this.hlsjs.levels[this.hlsjs.currentLevel]
|
return this.hlsjs.levels[this.hlsjs.currentLevel]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
getLiveLatency () {
|
getLiveLatency () {
|
||||||
return Math.round(this.hlsjs.latency)
|
return Math.round(this.hlsjs.latency)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getLiveLatencyFromEdge () {
|
||||||
|
return Math.round(this.hlsjs.latency - this.hlsjs.targetLatency)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
getHLSJS () {
|
getHLSJS () {
|
||||||
return this.hlsjs
|
return this.hlsjs
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { PeerTubePlayerLoadOptions, WebVideoPluginOptions } from '../../types'
|
import { PeerTubePlayerLoadOptions, WebVideoPluginOptions } from '../../types'
|
||||||
|
|
||||||
type ConstructorOptions = Pick<PeerTubePlayerLoadOptions, 'videoFileToken' | 'webVideo' | 'hls' | 'startTime'>
|
type ConstructorOptions = Pick<PeerTubePlayerLoadOptions, 'videoFileToken' | 'webVideo' | 'hls'>
|
||||||
|
|
||||||
export class WebVideoOptionsBuilder {
|
export class WebVideoOptionsBuilder {
|
||||||
|
|
||||||
|
|
|
@ -163,9 +163,11 @@ class StatsCard extends Component {
|
||||||
|
|
||||||
let progress: number
|
let progress: number
|
||||||
let latency: string
|
let latency: string
|
||||||
|
let latencyFromEdge: string
|
||||||
|
|
||||||
if (this.options_.videoIsLive) {
|
if (this.options_.videoIsLive) {
|
||||||
latency = secondsToTime(p2pMediaLoader.getLiveLatency())
|
latency = secondsToTime(p2pMediaLoader.getLiveLatency())
|
||||||
|
latencyFromEdge = secondsToTime(p2pMediaLoader.getLiveLatencyFromEdge())
|
||||||
} else {
|
} else {
|
||||||
progress = this.player().bufferedPercent()
|
progress = this.player().bufferedPercent()
|
||||||
}
|
}
|
||||||
|
@ -176,6 +178,7 @@ class StatsCard extends Component {
|
||||||
codecs,
|
codecs,
|
||||||
buffer,
|
buffer,
|
||||||
latency,
|
latency,
|
||||||
|
latencyFromEdge,
|
||||||
progress
|
progress
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -261,9 +264,10 @@ class StatsCard extends Component {
|
||||||
buffer: string
|
buffer: string
|
||||||
|
|
||||||
latency?: string
|
latency?: string
|
||||||
|
latencyFromEdge?: string
|
||||||
colorSpace?: string
|
colorSpace?: string
|
||||||
}) {
|
}) {
|
||||||
const { playerNetworkInfo, progress, colorSpace, codecs, resolution, buffer, latency } = options
|
const { playerNetworkInfo, progress, colorSpace, codecs, resolution, buffer, latency, latencyFromEdge } = options
|
||||||
const { downloadedFromServer, downloadedFromPeers } = playerNetworkInfo
|
const { downloadedFromServer, downloadedFromPeers } = playerNetworkInfo
|
||||||
|
|
||||||
const player = this.player()
|
const player = this.player()
|
||||||
|
@ -311,16 +315,18 @@ class StatsCard extends Component {
|
||||||
this.setInfoValue(this.volume, volume)
|
this.setInfoValue(this.volume, volume)
|
||||||
this.setInfoValue(this.codecs, codecs)
|
this.setInfoValue(this.codecs, codecs)
|
||||||
this.setInfoValue(this.color, colorSpace)
|
this.setInfoValue(this.color, colorSpace)
|
||||||
|
this.setInfoValue(this.transferred, totalTransferred)
|
||||||
this.setInfoValue(this.connection, playerNetworkInfo.averageBandwidth)
|
this.setInfoValue(this.connection, playerNetworkInfo.averageBandwidth)
|
||||||
|
|
||||||
this.setInfoValue(this.network, networkActivity)
|
this.setInfoValue(this.network, networkActivity)
|
||||||
this.setInfoValue(this.transferred, totalTransferred)
|
|
||||||
this.setInfoValue(this.download, downloadBreakdown)
|
this.setInfoValue(this.download, downloadBreakdown)
|
||||||
|
|
||||||
this.setInfoValue(this.bufferProgress, bufferProgress)
|
this.setInfoValue(this.bufferProgress, bufferProgress)
|
||||||
this.setInfoValue(this.bufferState, buffer)
|
this.setInfoValue(this.bufferState, buffer)
|
||||||
|
|
||||||
this.setInfoValue(this.liveLatency, latency)
|
if (latency && latencyFromEdge) {
|
||||||
|
this.setInfoValue(this.liveLatency, player.localize('{1} (from edge: {2})', [ latency, latencyFromEdge ]))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private setInfoValue (el: InfoElement, value: string) {
|
private setInfoValue (el: InfoElement, value: string) {
|
||||||
|
|
|
@ -75,7 +75,8 @@ const playerKeys = {
|
||||||
'Incorrect password, please enter a correct password': 'Incorrect password, please enter a correct password',
|
'Incorrect password, please enter a correct password': 'Incorrect password, please enter a correct password',
|
||||||
'Cancel': 'Cancel',
|
'Cancel': 'Cancel',
|
||||||
'Up Next': 'Up Next',
|
'Up Next': 'Up Next',
|
||||||
'Autoplay is suspended': 'Autoplay is suspended'
|
'Autoplay is suspended': 'Autoplay is suspended',
|
||||||
|
'{1} (from edge: {2})': '{1} (from edge: {2})'
|
||||||
}
|
}
|
||||||
Object.assign(playerKeys, videojs)
|
Object.assign(playerKeys, videojs)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue