add stats videojs plugin

client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts

@@ -1,10 +1,10 @@
+import * as Hlsjs from 'hls.js/dist/hls.light.js'
+import { Events, Segment } from 'p2p-media-loader-core'
+import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
 import videojs from 'video.js'
 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
-import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
-import { Events, Segment } from 'p2p-media-loader-core'
 import { timeToInt } from '../utils'
 import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
-import * as Hlsjs from 'hls.js/dist/hls.light.js'
 
 registerConfigPlugin(videojs)
 registerSourceHandler(videojs)
@@ -36,6 +36,9 @@ class P2pMediaLoaderPlugin extends Plugin {
 
   private networkInfoInterval: any
 
+  private hlsjsCurrentLevel: number
+  private hlsjsLevels: Hlsjs.Level[]
+
   constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) {
     super(player)
 
@@ -84,6 +87,16 @@ class P2pMediaLoaderPlugin extends Plugin {
     clearInterval(this.networkInfoInterval)
   }
 
+  getCurrentLevel () {
+    return this.hlsjsLevels.find(l => l.level === this.hlsjsCurrentLevel)
+  }
+
+  getLiveLatency () {
+    return undefined as number
+    // FIXME: Use latency when hls >= V1
+    // return this.hlsjs.latency
+  }
+
   getHLSJS () {
     return this.hlsjs
   }
@@ -140,6 +153,14 @@ class P2pMediaLoaderPlugin extends Plugin {
     this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
     this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
 
+    this.hlsjs.on(Hlsjs.Events.MANIFEST_PARSED, (_e, manifest) => {
+      this.hlsjsCurrentLevel = manifest.firstLevel
+      this.hlsjsLevels = manifest.levels
+    })
+    this.hlsjs.on(Hlsjs.Events.LEVEL_LOADED, (_e, level) => {
+      this.hlsjsCurrentLevel = level.levelId || (level as any).id
+    })
+
     this.networkInfoInterval = setInterval(() => {
       const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
       const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
@@ -166,7 +187,8 @@ class P2pMediaLoaderPlugin extends Plugin {
           numPeers: this.statsP2PBytes.numPeers,
           downloaded: this.statsP2PBytes.totalDownload,
           uploaded: this.statsP2PBytes.totalUpload
-        }
+        },
+        bandwidthEstimate: (this.hlsjs as any).bandwidthEstimate / 8
       } as PlayerNetworkInfo)
     }, this.CONSTANTS.INFO_SCHEDULER)
   }

client/src/assets/player/peertube-player-local-storage.ts

@@ -45,6 +45,7 @@ function saveTheaterInStore (enabled: boolean) {
 }
 
 function saveAverageBandwidth (value: number) {
+  /** used to choose the most fitting resolution */
   return setLocalStorage('average-bandwidth', value.toString())
 }
 

client/src/assets/player/peertube-player-manager.ts

@@ -4,6 +4,8 @@ import 'videojs-contextmenu-pt'
 import 'videojs-contrib-quality-levels'
 import './upnext/end-card'
 import './upnext/upnext-plugin'
+import './stats/stats-card'
+import './stats/stats-plugin'
 import './bezels/bezels-plugin'
 import './peertube-plugin'
 import './videojs-components/next-previous-video-button'
@@ -170,6 +172,11 @@ export class PeertubePlayerManager {
         self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle)
 
         player.bezels()
+        player.stats({
+          videoUUID: options.common.videoUUID,
+          videoIsLive: options.common.isLive,
+          mode
+        })
 
         return res(player)
       })
@@ -538,6 +545,14 @@ export class PeertubePlayerManager {
         })
       }
 
+      items.push({
+        icon: 'info',
+        label: player.localize('Stats for nerds'),
+        listener: () => {
+          player.stats().show()
+        }
+      })
+
       return items.map(i => ({
         ...i,
         label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label

client/src/assets/player/peertube-videojs-typings.ts

@@ -7,7 +7,9 @@ import { PlayerMode } from './peertube-player-manager'
 import { PeerTubePlugin } from './peertube-plugin'
 import { PlaylistPlugin } from './playlist/playlist-plugin'
 import { EndCardOptions } from './upnext/end-card'
+import { StatsCardOptions } from './stats/stats-card'
 import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
+import { StatsForNerdsPlugin } from './stats/stats-plugin'
 
 declare module 'video.js' {
 
@@ -36,6 +38,8 @@ declare module 'video.js' {
 
     bezels (): void
 
+    stats (options?: StatsCardOptions): StatsForNerdsPlugin
+
     qualityLevels (): QualityLevels
 
     textTracks (): TextTrackList & {
@@ -195,6 +199,9 @@ type PlayerNetworkInfo = {
     uploaded: number
     numPeers: number
   }
+
+  // In bytes
+  bandwidthEstimate: number
 }
 
 type PlaylistItemOptions = {