Fix player ratio on mobile with portrait videos

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

@@ -5,7 +5,7 @@
 @use '_miniature' as *;
 
 $video-default-height: 66vh;
-$video-theater-height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
+$video-max-height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
 
 @mixin playlist-below-player {
   width: 100% !important;
@@ -36,11 +36,11 @@ $video-theater-height: calc(100vh - #{$header-height} - #{$theater-bottom-space}
 
     #videojs-wrapper {
       width: 100%;
-      height: $video-theater-height;
+      height: $video-max-height;
     }
 
     ::ng-deep .video-js {
-      --player-height: #{$video-theater-height};
+      --player-height: #{$video-max-height};
     }
 
     my-video-watch-playlist ::ng-deep .playlist {
@@ -255,10 +255,9 @@ my-video-comments {
     .remote-server-down,
     ::ng-deep .video-js {
       --player-portrait-mode: 1;
+      --player-height: calc(100vw / var(--player-ratio)) !important;
 
-      // Can be recalculated by the player depending on video ratio
-      height: calc(100vw / var(--player-ratio)) !important;
-      max-height: $video-theater-height;
+      max-height: $video-max-height;
     }
   }
 

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

@@ -106,6 +106,10 @@ export class PeerTubePlayer {
 
     this.player.autoplay(this.getAutoPlayValue(this.currentLoadOptions.autoplay))
 
+    if (!this.player.autoplay()) {
+      this.setPoster(loadOptions.poster)
+    }
+
     this.player.trigger('video-change')
   }
 

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

@@ -131,7 +131,7 @@ class P2pMediaLoaderPlugin extends Plugin {
     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) {
+      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 })

client/src/sass/player/peertube-skin.scss

@@ -108,6 +108,7 @@ body {
 
   .vjs-poster {
     outline: 0;
+    background-size: cover;
   }
 
   @media screen and (max-width: $screen-width-750) {