1 files changed, 21 insertions, 0 deletions

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 () {