Automatically adapt player ratio

7 files changed, 53 insertions, 4 deletions

diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index 4da681a08..111b4645b 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -364,7 +364,9 @@ export class PeerTubePlayer {
         videoUUID: () => this.currentLoadOptions.videoUUID,
         subtitle: () => this.currentLoadOptions.subtitle,
 
-        poster: () => this.currentLoadOptions.poster
+        poster: () => this.currentLoadOptions.poster,
+
+        autoPlayerRatio: this.options.autoPlayerRatio
       },
       metrics: {
         mode: () => this.currentLoadOptions.mode,
diff --git a/client/src/assets/player/shared/metrics/metrics-plugin.ts b/client/src/assets/player/shared/metrics/metrics-plugin.ts
index 0ad16338c..a581d7931 100644
--- a/client/src/assets/player/shared/metrics/metrics-plugin.ts
+++ b/client/src/assets/player/shared/metrics/metrics-plugin.ts
@@ -140,10 +140,10 @@ class MetricsPlugin extends Plugin {
 
   private trackBytes () {
     this.player.on('network-info', (_event, data: PlayerNetworkInfo) => {
-      this.downloadedBytesHTTP += Math.round(data.http.downloaded - (this.lastPlayerNetworkInfo?.http.downloaded || 0))
-      this.downloadedBytesP2P += Math.round((data.p2p?.downloaded || 0) - (this.lastPlayerNetworkInfo?.p2p?.downloaded || 0))
+      this.downloadedBytesHTTP += Math.max(Math.round(data.http.downloaded - (this.lastPlayerNetworkInfo?.http.downloaded || 0)), 0)
+      this.downloadedBytesP2P += Math.max(Math.round((data.p2p?.downloaded || 0) - (this.lastPlayerNetworkInfo?.p2p?.downloaded || 0)), 0)
 
-      this.uploadedBytesP2P += Math.round((data.p2p?.uploaded || 0) - (this.lastPlayerNetworkInfo?.p2p?.uploaded || 0))
+      this.uploadedBytesP2P += Math.max(Math.round((data.p2p?.uploaded || 0) - (this.lastPlayerNetworkInfo?.p2p?.uploaded || 0)), 0)
 
       this.p2pPeers = data.p2p?.peersP2POnly
       this.p2pEnabled = !!data.p2p
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 1e47fe486..ee617ce8a 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
@@ -119,6 +119,14 @@ class P2pMediaLoaderPlugin extends Plugin {
     this.runStats()
 
     this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engine-resolution-change'))
+
+    this.hlsjs.on(Hlsjs.Events.MANIFEST_PARSED, (_event, data) => {
+      if (Array.isArray(data.levels) && data.levels.length > 1) {
+        const level = data.levels[0]
+
+        this.player.trigger('video-ratio-changed', { ratio: level.width / level.height })
+      }
+    })
   }
 
   private runStats () {
diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts
index cf866723c..7aeae2670 100644
--- a/client/src/assets/player/shared/peertube/peertube-plugin.ts
+++ b/client/src/assets/player/shared/peertube/peertube-plugin.ts
@@ -115,6 +115,8 @@ class PeerTubePlugin extends Plugin {
         this.hideFatalError()
       })
     })
+
+    this.initOnRatioChange()
   }
 
   dispose () {
@@ -210,6 +212,25 @@ class PeerTubePlugin extends Plugin {
     this.runUserViewing()
   }
 
+  private initOnRatioChange () {
+    if (!this.options.autoPlayerRatio) return
+
+    const defaultRatio = getComputedStyle(this.player.el()).getPropertyValue(this.options.autoPlayerRatio.cssRatioVariable)
+
+    this.player.on('video-ratio-changed', (_event, data: { ratio: number }) => {
+      const el = this.player.el() as HTMLElement
+
+      // In portrait screen mode, we allow player with bigger height size than width
+      const portraitMode = getComputedStyle(el).getPropertyValue(this.options.autoPlayerRatio.cssPlayerPortraitModeVariable) === '1'
+
+      const currentRatio = !portraitMode && data.ratio < 1
+        ? defaultRatio
+        : data.ratio
+
+      el.style.setProperty('--player-ratio', currentRatio + '')
+    })
+  }
+
   // ---------------------------------------------------------------------------
 
   private runUserViewing () {
diff --git a/client/src/assets/player/shared/web-video/web-video-plugin.ts b/client/src/assets/player/shared/web-video/web-video-plugin.ts
index 18d911108..8f4db0680 100644
--- a/client/src/assets/player/shared/web-video/web-video-plugin.ts
+++ b/client/src/assets/player/shared/web-video/web-video-plugin.ts
@@ -19,6 +19,7 @@ class WebVideoPlugin extends Plugin {
 
   private onErrorHandler: () => void
   private onPlayHandler: () => void
+  private onLoadedMetadata: () => void
 
   constructor (player: videojs.Player, options?: WebVideoPluginOptions) {
     super(player, options)
@@ -28,6 +29,12 @@ class WebVideoPlugin extends Plugin {
 
     this.updateVideoFile({ videoFile: this.pickAverageVideoFile(), isUserResolutionChange: false })
 
+    this.onLoadedMetadata = () => {
+      player.trigger('video-ratio-changed', { ratio: this.player.videoWidth() / this.player.videoHeight() })
+    }
+
+    player.on('loadedmetadata', this.onLoadedMetadata)
+
     player.ready(() => {
       this.buildQualities()
 
@@ -43,6 +50,7 @@ class WebVideoPlugin extends Plugin {
   dispose () {
     clearInterval(this.networkInfoInterval)
 
+    if (this.onLoadedMetadata) this.player.off('loadedmetadata', this.onLoadedMetadata)
     if (this.onErrorHandler) this.player.off('error', this.onErrorHandler)
     if (this.onPlayHandler) this.player.off('canplay', this.onPlayHandler)
 
diff --git a/client/src/assets/player/types/peertube-player-options.ts b/client/src/assets/player/types/peertube-player-options.ts
index 352f7d8dd..6fb2f7913 100644
--- a/client/src/assets/player/types/peertube-player-options.ts
+++ b/client/src/assets/player/types/peertube-player-options.ts
@@ -38,6 +38,11 @@ export type PeerTubePlayerContructorOptions = {
   language: string
 
   pluginsManager: PluginsManager
+
+  autoPlayerRatio?: {
+    cssRatioVariable: string
+    cssPlayerPortraitModeVariable: string
+  }
 }
 
 export type PeerTubePlayerLoadOptions = {
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index dae9e14c8..27fbda31d 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/client/src/assets/player/types/peertube-videojs-typings.ts
@@ -104,6 +104,11 @@ type VideoJSStoryboard = {
 }
 
 type PeerTubePluginOptions = {
+  autoPlayerRatio: {
+    cssRatioVariable: string
+    cssPlayerPortraitModeVariable: string
+  }
+
   hasAutoplay: () => videojs.Autoplay
 
   videoViewUrl: () => string