1 files changed, 26 insertions, 11 deletions

diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 936fb2577..57c894ee6 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -367,19 +367,34 @@ class PeerTubePlugin extends Plugin {
 
     if (!averageDownloadSpeed) averageDownloadSpeed = this.getAndSaveActualDownloadSpeed()
 
-    // Filter videos we can play according to our screen resolution and bandwidth
-    const filteredFiles = this.videoFiles.filter(f => f.resolution.id <= this.playerElement.width)
-    .filter(f => {
-      const fileBitrate = (f.size / this.videoDuration)
-      let threshold = fileBitrate
-
-      // If this is for a higher resolution or an initial load: add a margin
-      if (!this.currentVideoFile || f.resolution.id > this.currentVideoFile.resolution.id) {
-        threshold += ((fileBitrate * this.CONSTANTS.AUTO_QUALITY_THRESHOLD_PERCENT) / 100)
+    // Limit resolution according to player height
+    const playerHeight = this.playerElement.offsetHeight as number
+
+    // We take the first resolution just above the player height
+    // Example: player height is 530px, we want the 720p file instead of 480p
+    let maxResolution = this.videoFiles[0].resolution.id
+    for (let i = this.videoFiles.length - 1; i >= 0; i--) {
+      const resolutionId = this.videoFiles[i].resolution.id
+      if (resolutionId >= playerHeight) {
+        maxResolution = resolutionId
+        break
       }
+    }
 
-      return averageDownloadSpeed > threshold
-    })
+    // Filter videos we can play according to our screen resolution and bandwidth
+    const filteredFiles = this.videoFiles
+                              .filter(f => f.resolution.id <= maxResolution)
+                              .filter(f => {
+                                const fileBitrate = (f.size / this.videoDuration)
+                                let threshold = fileBitrate
+
+                                // If this is for a higher resolution or an initial load: add a margin
+                                if (!this.currentVideoFile || f.resolution.id > this.currentVideoFile.resolution.id) {
+                                  threshold += ((fileBitrate * this.CONSTANTS.AUTO_QUALITY_THRESHOLD_PERCENT) / 100)
+                                }
+
+                                return averageDownloadSpeed > threshold
+                              })
 
     // If the download speed is too bad, return the lowest resolution we have
     if (filteredFiles.length === 0) return videoFileMinByResolution(this.videoFiles)