From dbd0a3bcac2fd30841f7f6753d98aeba0820ff7c Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 8 Nov 2023 15:56:56 +0100
Subject: [PATCH] Fix player ratio on mobile with portrait videos

---
 .../+videos/+video-watch/video-watch.component.scss   | 11 +++++------
 client/src/assets/player/peertube-player.ts           |  4 ++++
 .../p2p-media-loader/p2p-media-loader-plugin.ts       |  2 +-
 client/src/sass/player/peertube-skin.scss             |  1 +
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index e535ecb9c..70bd588db 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/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;
     }
   }
 
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index 857b9bd62..6f0d30e1d 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/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')
   }
 
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 7a8824274..d5e650e90 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
@@ -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 })
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 6610512e2..09466b5ad 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/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) {