Better audio file handling

client/src/assets/player/shared/metrics/metrics-plugin.ts

@@ -150,11 +150,11 @@ class MetricsPlugin extends Plugin {
   }
 
   private trackResolutionChange () {
-    this.player.on('engine-resolution-change', () => {
-      this.resolutionChanges++
-    })
+    this.player.on('resolution-change', (_: any, { initResolutionChange }: { initResolutionChange: boolean }) => {
+      if (initResolutionChange === true) return
+
+      debugLogger('Adding resolution change')
 
-    this.player.on('user-resolution-change', () => {
       this.resolutionChanges++
     })
   }

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

@@ -128,7 +128,14 @@ class P2pMediaLoaderPlugin extends Plugin {
 
     this.runStats()
 
-    this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engine-resolution-change'))
+    let initResolutionChange = true
+    this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => {
+      const level = this.getCurrentLevel()
+      const resolution = Math.min(level?.height || 0, level?.width || 0)
+
+      this.player.trigger('resolution-change', { resolution, initResolutionChange })
+      initResolutionChange = false
+    })
 
     this.hlsjs.on(Hlsjs.Events.MANIFEST_PARSED, (_event, data) => {
       if (Array.isArray(data.levels) && data.levels.length >= 1) {

client/src/assets/player/shared/peertube/peertube-plugin.ts

@@ -124,6 +124,10 @@ class PeerTubePlugin extends Plugin {
       })
     })
 
+    this.player.on('resolution-change', (_: any, { resolution }: { resolution: number }) => {
+      this.adaptPosterForAudioOnly(resolution)
+    })
+
     this.initOnRatioChange()
   }
 
@@ -357,6 +361,21 @@ class PeerTubePlugin extends Plugin {
 
   // ---------------------------------------------------------------------------
 
+  private adaptPosterForAudioOnly (resolution: number) {
+    debugLogger('Check if we need to adapt player for audio only', resolution)
+
+    if (resolution === 0) {
+      this.player.audioPosterMode(true)
+      this.player.poster(this.options.poster())
+      return
+    }
+
+    this.player.audioPosterMode(false)
+    this.player.poster('')
+  }
+
+  // ---------------------------------------------------------------------------
+
   private listenFullScreenChange () {
     this.player.on('fullscreenchange', () => {
       if (this.player.isFullscreen()) this.player.focus()

client/src/assets/player/shared/web-video/web-video-plugin.ts

@@ -97,10 +97,12 @@ class WebVideoPlugin extends Plugin {
       this.player.playbackRate(playbackRate)
       this.player.currentTime(currentTime)
 
-      this.adaptPosterForAudioOnly()
+      this.player.trigger('resolution-change', {
+        resolution: this.currentVideoFile?.resolution.id,
+        initResolutionChange: !options.isUserResolutionChange
+      })
 
       if (options.isUserResolutionChange) {
-        this.player.trigger('user-resolution-change')
         this.player.trigger('web-video-source-change')
 
         this.tryToPlay()
@@ -119,15 +121,6 @@ class WebVideoPlugin extends Plugin {
     return this.currentVideoFile
   }
 
-  private adaptPosterForAudioOnly () {
-    // Audio-only (resolutionId === 0) gets special treatment
-    if (this.currentVideoFile?.resolution.id === 0) {
-      this.player.audioPosterMode(true)
-    } else {
-      this.player.audioPosterMode(false)
-    }
-  }
-
   private tryToPlay () {
     debugLogger('Try to play manually the video')