Add playback metric endpoint sent to OTEL

13 files changed, 173 insertions, 21 deletions

diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 8d9c08ab3..9ae6f9f12 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -628,6 +628,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           : null,
         authorizationHeader: this.authService.getRequestHeaderValue(),
 
+        metricsUrl: environment.apiUrl + '/api/v1/metrics/playback',
+
         embedUrl: video.embedUrl,
         embedTitle: video.name,
         instanceName: this.serverConfig.instance.name,
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index b9077dcae..0d4acc3d9 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -22,6 +22,7 @@ import './shared/playlist/playlist-plugin'
 import './shared/mobile/peertube-mobile-plugin'
 import './shared/mobile/peertube-mobile-buttons'
 import './shared/hotkeys/peertube-hotkeys-plugin'
+import './shared/metrics/metrics-plugin'
 import videojs from 'video.js'
 import { logger } from '@root-helpers/logger'
 import { PluginsManager } from '@root-helpers/plugins-manager'
diff --git a/client/src/assets/player/shared/control-bar/p2p-info-button.ts b/client/src/assets/player/shared/control-bar/p2p-info-button.ts
index 36517e125..1979654ad 100644
--- a/client/src/assets/player/shared/control-bar/p2p-info-button.ts
+++ b/client/src/assets/player/shared/control-bar/p2p-info-button.ts
@@ -87,9 +87,9 @@ class P2pInfoButton extends Button {
       const httpStats = data.http
 
       const downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed)
-      const uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed)
+      const uploadSpeed = bytes(p2pStats.uploadSpeed)
       const totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded)
-      const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded)
+      const totalUploaded = bytes(p2pStats.uploaded)
       const numPeers = p2pStats.numPeers
 
       subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n'
diff --git a/client/src/assets/player/shared/manager-options/manager-options-builder.ts b/client/src/assets/player/shared/manager-options/manager-options-builder.ts
index bc70bb12f..07678493d 100644
--- a/client/src/assets/player/shared/manager-options/manager-options-builder.ts
+++ b/client/src/assets/player/shared/manager-options/manager-options-builder.ts
@@ -44,6 +44,14 @@ export class ManagerOptionsBuilder {
           'isLive',
           'videoUUID'
         ])
+      },
+      metrics: {
+        mode: this.mode,
+
+        ...pick(commonOptions, [
+          'metricsUrl',
+          'videoUUID'
+        ])
       }
     }
 
diff --git a/client/src/assets/player/shared/metrics/index.ts b/client/src/assets/player/shared/metrics/index.ts
new file mode 100644
index 000000000..85d75cdc7
--- /dev/null
+++ b/client/src/assets/player/shared/metrics/index.ts
@@ -0,0 +1 @@
+export * from './metrics-plugin'
diff --git a/client/src/assets/player/shared/metrics/metrics-plugin.ts b/client/src/assets/player/shared/metrics/metrics-plugin.ts
new file mode 100644
index 000000000..1b2349eba
--- /dev/null
+++ b/client/src/assets/player/shared/metrics/metrics-plugin.ts
@@ -0,0 +1,128 @@
+import videojs from 'video.js'
+import { PlaybackMetricCreate } from '../../../../../../shared/models'
+import { MetricsPluginOptions, PlayerMode, PlayerNetworkInfo } from '../../types'
+
+const Plugin = videojs.getPlugin('plugin')
+
+class MetricsPlugin extends Plugin {
+  private readonly metricsUrl: string
+  private readonly videoUUID: string
+  private readonly mode: PlayerMode
+
+  private downloadedBytesP2P = 0
+  private downloadedBytesHTTP = 0
+  private uploadedBytesP2P = 0
+
+  private resolutionChanges = 0
+  private errors = 0
+
+  private lastPlayerNetworkInfo: PlayerNetworkInfo
+
+  private metricsInterval: any
+
+  private readonly CONSTANTS = {
+    METRICS_INTERVAL: 15000
+  }
+
+  constructor (player: videojs.Player, options: MetricsPluginOptions) {
+    super(player)
+
+    this.metricsUrl = options.metricsUrl
+    this.videoUUID = options.videoUUID
+    this.mode = options.mode
+
+    this.player.one('play', () => {
+      this.runMetricsInterval()
+
+      this.trackBytes()
+      this.trackResolutionChange()
+      this.trackErrors()
+    })
+  }
+
+  dispose () {
+    if (this.metricsInterval) clearInterval(this.metricsInterval)
+  }
+
+  private runMetricsInterval () {
+    this.metricsInterval = setInterval(() => {
+      let resolution: number
+      let fps: number
+
+      if (this.mode === 'p2p-media-loader') {
+        const level = this.player.p2pMediaLoader().getCurrentLevel()
+        if (!level) return
+
+        resolution = Math.min(level.height || 0, level.width || 0)
+
+        const framerate = level?.attrs['FRAME-RATE']
+        fps = framerate
+          ? parseInt(framerate, 10)
+          : undefined
+      } else { // webtorrent
+        const videoFile = this.player.webtorrent().getCurrentVideoFile()
+        if (!videoFile) return
+
+        resolution = videoFile.resolution.id
+        fps = videoFile.fps
+      }
+
+      const body: PlaybackMetricCreate = {
+        resolution,
+        fps,
+
+        playerMode: this.mode,
+
+        resolutionChanges: this.resolutionChanges,
+
+        errors: this.errors,
+
+        downloadedBytesP2P: this.downloadedBytesP2P,
+        downloadedBytesHTTP: this.downloadedBytesHTTP,
+
+        uploadedBytesP2P: this.uploadedBytesP2P,
+
+        videoId: this.videoUUID
+      }
+
+      this.resolutionChanges = 0
+
+      this.downloadedBytesP2P = 0
+      this.downloadedBytesHTTP = 0
+
+      this.uploadedBytesP2P = 0
+
+      this.errors = 0
+
+      const headers = new Headers({ 'Content-type': 'application/json; charset=UTF-8' })
+
+      return fetch(this.metricsUrl, { method: 'POST', body: JSON.stringify(body), headers })
+    }, this.CONSTANTS.METRICS_INTERVAL)
+  }
+
+  private trackBytes () {
+    this.player.on('p2pInfo', (_event, data: PlayerNetworkInfo) => {
+      this.downloadedBytesHTTP += data.http.downloaded - (this.lastPlayerNetworkInfo?.http.downloaded || 0)
+      this.downloadedBytesP2P += data.p2p.downloaded - (this.lastPlayerNetworkInfo?.p2p.downloaded || 0)
+
+      this.uploadedBytesP2P += data.p2p.uploaded - (this.lastPlayerNetworkInfo?.p2p.uploaded || 0)
+
+      this.lastPlayerNetworkInfo = data
+    })
+  }
+
+  private trackResolutionChange () {
+    this.player.on('engineResolutionChange', () => {
+      this.resolutionChanges++
+    })
+  }
+
+  private trackErrors () {
+    this.player.on('error', () => {
+      this.errors++
+    })
+  }
+}
+
+videojs.registerPlugin('metrics', MetricsPlugin)
+export { MetricsPlugin }
diff --git a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
index e5f099dea..54d87aea5 100644
--- a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -2,10 +2,10 @@ import Hlsjs from 'hls.js'
 import videojs from 'video.js'
 import { Events, Segment } from '@peertube/p2p-media-loader-core'
 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from '@peertube/p2p-media-loader-hlsjs'
+import { logger } from '@root-helpers/logger'
 import { timeToInt } from '@shared/core-utils'
 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../../types'
 import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
-import { logger } from '@root-helpers/logger'
 
 registerConfigPlugin(videojs)
 registerSourceHandler(videojs)
@@ -29,9 +29,7 @@ class P2pMediaLoaderPlugin extends Plugin {
   }
   private statsHTTPBytes = {
     pendingDownload: [] as number[],
-    pendingUpload: [] as number[],
-    totalDownload: 0,
-    totalUpload: 0
+    totalDownload: 0
   }
   private startTime: number
 
@@ -123,6 +121,8 @@ class P2pMediaLoaderPlugin extends Plugin {
     this.statsP2PBytes.numPeers = 1 + this.options.redundancyUrlManager.countBaseUrls()
 
     this.runStats()
+
+    this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engineResolutionChange'))
   }
 
   private runStats () {
@@ -134,10 +134,13 @@ class P2pMediaLoaderPlugin extends Plugin {
     })
 
     this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, _segment, bytes: number) => {
-      const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
+      if (method !== 'p2p') {
+        logger.error(`Received upload from unknown method ${method}`)
+        return
+      }
 
-      elem.pendingUpload.push(bytes)
-      elem.totalUpload += bytes
+      this.statsP2PBytes.pendingUpload.push(bytes)
+      this.statsP2PBytes.totalUpload += bytes
     })
 
     this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
@@ -148,20 +151,16 @@ class P2pMediaLoaderPlugin extends Plugin {
       const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
 
       const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload)
-      const httpUploadSpeed = this.arraySum(this.statsHTTPBytes.pendingUpload)
 
       this.statsP2PBytes.pendingDownload = []
       this.statsP2PBytes.pendingUpload = []
       this.statsHTTPBytes.pendingDownload = []
-      this.statsHTTPBytes.pendingUpload = []
 
       return this.player.trigger('p2pInfo', {
         source: 'p2p-media-loader',
         http: {
           downloadSpeed: httpDownloadSpeed,
-          uploadSpeed: httpUploadSpeed,
-          downloaded: this.statsHTTPBytes.totalDownload,
-          uploaded: this.statsHTTPBytes.totalUpload
+          downloaded: this.statsHTTPBytes.totalDownload
         },
         p2p: {
           downloadSpeed: p2pDownloadSpeed,
diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts
index 69a7b2d65..83c32415e 100644
--- a/client/src/assets/player/shared/peertube/peertube-plugin.ts
+++ b/client/src/assets/player/shared/peertube/peertube-plugin.ts
@@ -144,6 +144,8 @@ class PeerTubePlugin extends Plugin {
     this.listenFullScreenChange()
   }
 
+  // ---------------------------------------------------------------------------
+
   private runUserViewing () {
     let lastCurrentTime = this.startTime
     let lastViewEvent: VideoViewEvent
@@ -205,6 +207,8 @@ class PeerTubePlugin extends Plugin {
     return fetch(this.videoViewUrl, { method: 'POST', body: JSON.stringify(body), headers })
   }
 
+  // ---------------------------------------------------------------------------
+
   private listenFullScreenChange () {
     this.player.on('fullscreenchange', () => {
       if (this.player.isFullscreen()) this.player.focus()
diff --git a/client/src/assets/player/shared/stats/stats-card.ts b/client/src/assets/player/shared/stats/stats-card.ts
index b65adcfca..1199d3285 100644
--- a/client/src/assets/player/shared/stats/stats-card.ts
+++ b/client/src/assets/player/shared/stats/stats-card.ts
@@ -95,9 +95,9 @@ class StatsCard extends Component {
       const httpStats = data.http
 
       this.playerNetworkInfo.downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed).join(' ')
-      this.playerNetworkInfo.uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed).join(' ')
+      this.playerNetworkInfo.uploadSpeed = bytes(p2pStats.uploadSpeed).join(' ')
       this.playerNetworkInfo.totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded).join(' ')
-      this.playerNetworkInfo.totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded).join(' ')
+      this.playerNetworkInfo.totalUploaded = bytes(p2pStats.uploaded).join(' ')
       this.playerNetworkInfo.numPeers = p2pStats.numPeers
       this.playerNetworkInfo.averageBandwidth = bytes(data.bandwidthEstimate).join(' ') + '/s'
 
diff --git a/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
index 9fd5f593e..fa3f48a9a 100644
--- a/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
@@ -204,6 +204,8 @@ class WebTorrentPlugin extends Plugin {
     }
 
     this.updateVideoFile(newVideoFile, options)
+
+    this.player.trigger('engineResolutionChange')
   }
 
   flushVideoFile (videoFile: VideoFile, destroyRenderer = true) {
@@ -506,9 +508,7 @@ class WebTorrentPlugin extends Plugin {
         source: 'webtorrent',
         http: {
           downloadSpeed: 0,
-          uploadSpeed: 0,
-          downloaded: 0,
-          uploaded: 0
+          downloaded: 0
         },
         p2p: {
           downloadSpeed: this.torrent.downloadSpeed,
diff --git a/client/src/assets/player/types/manager-options.ts b/client/src/assets/player/types/manager-options.ts
index cadce739d..b4d9374c3 100644
--- a/client/src/assets/player/types/manager-options.ts
+++ b/client/src/assets/player/types/manager-options.ts
@@ -59,6 +59,8 @@ export interface CommonOptions extends CustomizationOptions {
   videoViewUrl: string
   authorizationHeader?: string
 
+  metricsUrl: string
+
   embedUrl: string
   embedTitle: string
 
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index 115afb614..6df94992c 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/client/src/assets/player/types/peertube-videojs-typings.ts
@@ -109,6 +109,12 @@ type PeerTubePluginOptions = {
   videoUUID: string
 }
 
+type MetricsPluginOptions = {
+  mode: PlayerMode
+  metricsUrl: string
+  videoUUID: string
+}
+
 type PlaylistPluginOptions = {
   elements: VideoPlaylistElement[]
 
@@ -165,6 +171,7 @@ type VideoJSPluginOptions = {
   playlist?: PlaylistPluginOptions
 
   peertube: PeerTubePluginOptions
+  metrics: MetricsPluginOptions
 
   webtorrent?: WebtorrentPluginOptions
 
@@ -197,9 +204,7 @@ type PlayerNetworkInfo = {
 
   http: {
     downloadSpeed: number
-    uploadSpeed: number
     downloaded: number
-    uploaded: number
   }
 
   p2p: {
@@ -227,6 +232,7 @@ export {
   ResolutionUpdateData,
   AutoResolutionUpdateData,
   PlaylistPluginOptions,
+  MetricsPluginOptions,
   VideoJSCaption,
   PeerTubePluginOptions,
   WebtorrentPluginOptions,
diff --git a/client/src/standalone/videos/shared/player-manager-options.ts b/client/src/standalone/videos/shared/player-manager-options.ts
index 9cebdcd10..eed821994 100644
--- a/client/src/standalone/videos/shared/player-manager-options.ts
+++ b/client/src/standalone/videos/shared/player-manager-options.ts
@@ -203,6 +203,7 @@ export class PlayerManagerOptions {
         videoCaptions,
         inactivityTimeout: 2500,
         videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),
+        metricsUrl: window.location.origin + '/api/v1/metrics/playback',
 
         videoShortUUID: video.shortUUID,
         videoUUID: video.uuid,