Use server video ratio if available

client/src/app/+videos/+video-watch/video-watch.component.ts

@@ -778,6 +778,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       videoShortUUID: video.shortUUID,
       videoUUID: video.uuid,
 
+      videoRatio: video.aspectRatio,
+
       previousVideo: {
         enabled: this.playlist && this.videoWatchPlaylist.hasPreviousVideo(),
 

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

@@ -375,6 +375,8 @@ export class PeerTubePlayer {
         videoUUID: () => this.currentLoadOptions.videoUUID,
         subtitle: () => this.currentLoadOptions.subtitle,
 
+        videoRatio: () => this.currentLoadOptions.videoRatio,
+
         poster: () => this.currentLoadOptions.poster,
 
         autoPlayerRatio: this.options.autoPlayerRatio

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

@@ -225,18 +225,31 @@ class PeerTubePlugin extends Plugin {
 
     const defaultRatio = getComputedStyle(this.player.el()).getPropertyValue(this.options.autoPlayerRatio.cssRatioVariable)
 
+    if (this.options.videoRatio()) {
+      this.adaptPlayerFromRatio({ ratio: this.options.videoRatio(), defaultRatio })
+    }
+
     this.player.on('video-ratio-changed', (_event, data: { ratio: number }) => {
+      this.adaptPlayerFromRatio({ ratio: data.ratio, defaultRatio })
+    })
+  }
+
+  private adaptPlayerFromRatio (options: {
+    ratio: number
+    defaultRatio: string
+  }) {
+    const { ratio, defaultRatio } = options
+
     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 = isNaN(data.ratio) || (!portraitMode && data.ratio < 1)
+    const currentRatio = isNaN(ratio) || (!portraitMode && ratio < 1)
       ? defaultRatio
-        : data.ratio
+      : ratio
 
     el.style.setProperty('--player-ratio', currentRatio + '')
-    })
   }
 
   // ---------------------------------------------------------------------------

client/src/assets/player/types/peertube-player-options.ts

@@ -77,6 +77,7 @@ export type PeerTubePlayerLoadOptions = {
   videoShortUUID: string
 
   duration: number
+  videoRatio: number
 
   requiresUserAuth: boolean
   videoFileToken: () => string

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

@@ -129,6 +129,8 @@ type PeerTubePluginOptions = {
   videoUUID: () => string
   subtitle: () => string
 
+  videoRatio: () => number
+
   poster: () => string
 }
 

client/src/standalone/videos/shared/player-options-builder.ts

@@ -290,6 +290,7 @@ export class PlayerOptionsBuilder {
       videoUUID: video.uuid,
 
       duration: video.duration,
+      videoRatio: video.aspectRatio,
 
       poster: window.location.origin + video.previewPath,