From bfcb7133cb682e801a4b46003853b3aa631afbbb Mon Sep 17 00:00:00 2001
From: Shravan Rajinikanth <mail@shrav.me>
Date: Sun, 19 Jan 2020 06:05:12 -0800
Subject: [PATCH] Fixed Plyr container not resizing responsively

---
 src/js/plugins/preview-thumbnails.js | 29 +++++++++++++++++++++-------
 src/sass/base.scss                   |  3 ++-
 src/sass/components/video.scss       |  1 +
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js
index 61021d643..930c055d7 100644
--- a/src/js/plugins/preview-thumbnails.js
+++ b/src/js/plugins/preview-thumbnails.js
@@ -540,8 +540,8 @@ class PreviewThumbnails {
 
     get thumbContainerHeight() {
         if (this.mouseDown) {
-            // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
-            return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
+            const { height } = fitRatio(this.thumbAspectRatio, { width: this.player.media.clientWidth, height: this.player.media.clientHeight });
+            return height;
         }
 
         return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -624,9 +624,9 @@ class PreviewThumbnails {
 
     // Can't use 100% width, in case the video is a different aspect ratio to the video container
     setScrubbingContainerSize() {
-        this.elements.scrubbing.container.style.width = `${this.player.media.clientWidth}px`;
-        // Can't use media.clientHeight - html5 video goes big and does black bars above and below
-        this.elements.scrubbing.container.style.height = `${this.player.media.clientWidth / this.thumbAspectRatio}px`;
+        const { width, height } = fitRatio(this.thumbAspectRatio, { width: this.player.media.clientWidth, height: this.player.media.clientHeight });
+        this.elements.scrubbing.container.style.width = `${width}px`;
+        this.elements.scrubbing.container.style.height = `${height}px`;
     }
 
     // Sprites need to be offset to the correct location
@@ -639,14 +639,29 @@ class PreviewThumbnails {
         const multiplier = this.thumbContainerHeight / frame.h;
 
         // eslint-disable-next-line no-param-reassign
-        previewImage.style.height = `${Math.floor(previewImage.naturalHeight * multiplier)}px`;
+        previewImage.style.height = `${previewImage.naturalHeight * multiplier}px`;
         // eslint-disable-next-line no-param-reassign
-        previewImage.style.width = `${Math.floor(previewImage.naturalWidth * multiplier)}px`;
+        previewImage.style.width = `${previewImage.naturalWidth * multiplier}px`;
         // eslint-disable-next-line no-param-reassign
         previewImage.style.left = `-${frame.x * multiplier}px`;
         // eslint-disable-next-line no-param-reassign
         previewImage.style.top = `-${frame.y * multiplier}px`;
     }
+
+    fitRatio(ratio, outer) {
+        const targetRatio = outer.width / outer.height;
+
+        const result = {};
+        if (ratio > targetRatio) {
+            result.width = outer.width;
+            result.height = (1 / ratio) * outer.width;
+        } else {
+            result.height = outer.height;
+            result.width = ratio * outer.height;
+        }
+
+        return result;
+    }
 }
 
 export default PreviewThumbnails;
diff --git a/src/sass/base.scss b/src/sass/base.scss
index 9bb9d98ac..21757d295 100644
--- a/src/sass/base.scss
+++ b/src/sass/base.scss
@@ -10,6 +10,7 @@
     font-family: $plyr-font-family;
     font-variant-numeric: tabular-nums; // Force monosace-esque number widths
     font-weight: $plyr-font-weight-regular;
+    height: 100%;
     line-height: $plyr-line-height;
     max-width: 100%;
     min-width: 200px;
@@ -21,7 +22,7 @@
     video,
     audio {
         border-radius: inherit;
-        height: auto;
+        height: 100%;
         vertical-align: middle;
         width: 100%;
     }
diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
index fdcf4f2df..06b2848d6 100644
--- a/src/sass/components/video.scss
+++ b/src/sass/components/video.scss
@@ -15,6 +15,7 @@
 .plyr__video-wrapper {
     background: #000;
     border-radius: inherit;
+    height: 100%;
     overflow: hidden;
     position: relative;
     // Require z-index to force border-radius