Merge branch 'develop' of github.com:sampotts/plyr into develop

2 files changed, 37 insertions, 5 deletions

diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js
index 6cd09ef2..86eeebc8 100644
--- a/src/js/plugins/preview-thumbnails.js
+++ b/src/js/plugins/preview-thumbnails.js
@@ -104,7 +104,7 @@ class PreviewThumbnails {
     }
 
     load() {
-        // Togglethe regular seek tooltip
+        // Toggle the regular seek tooltip
         if (this.player.elements.display.seekTooltip) {
             this.player.elements.display.seekTooltip.hidden = this.enabled;
         }
@@ -328,6 +328,15 @@ class PreviewThumbnails {
         this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
     }
 
+    destroy() {
+        if (this.elements.thumb.container) {
+            this.elements.thumb.container.remove();
+        }
+        if (this.elements.scrubbing.container) {
+            this.elements.scrubbing.container.remove();
+        }
+    }
+
     showImageAtCurrentTime() {
         if (this.mouseDown) {
             this.setScrubbingContainerSize();
@@ -561,6 +570,11 @@ class PreviewThumbnails {
             return height;
         }
 
+        // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
+        if (this.sizeSpecifiedInCSS) {
+            return this.elements.thumb.imageContainer.clientHeight;
+        }
+
         return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
     }
 
@@ -601,7 +615,7 @@ class PreviewThumbnails {
     }
 
     determineContainerAutoSizing() {
-        if (this.elements.thumb.imageContainer.clientHeight > 20) {
+        if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
             // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
             this.sizeSpecifiedInCSS = true;
         }
@@ -613,6 +627,12 @@ class PreviewThumbnails {
             const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
             this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
             this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
+        } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
+            const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
+            this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
+        } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
+            const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
+            this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
         }
 
         this.setThumbContainerPos();
diff --git a/src/js/source.js b/src/js/source.js
index 0173cc9e..bc39cc9d 100644
--- a/src/js/source.js
+++ b/src/js/source.js
@@ -5,6 +5,7 @@
 import { providers } from './config/types';
 import html5 from './html5';
 import media from './media';
+import PreviewThumbnails from './plugins/preview-thumbnails';
 import support from './support';
 import ui from './ui';
 import { createElement, insertElement, removeElement } from './utils/elements';
@@ -130,9 +131,20 @@ const source = {
                     this.media.load();
                 }
 
-                // Reload thumbnails
-                if (this.previewThumbnails) {
-                    this.previewThumbnails.load();
+                // Update previewThumbnails config & reload plugin
+                if (!is.empty(input.previewThumbnails)) {
+                    Object.assign(this.config.previewThumbnails, input.previewThumbnails);
+
+                    // cleanup previewThumbnails plugin if it was loaded
+                    if (this.previewThumbnails && this.previewThumbnails.loaded) {
+                        this.previewThumbnails.destroy();
+                        this.previewThumbnails = null;
+                    }
+
+                    // create new instance if it is still enabled
+                    if (this.config.previewThumbnails.enabled) {
+                        this.previewThumbnails = new PreviewThumbnails(this);
+                    }
                 }
 
                 // Update the fullscreen support