Style tweaks for preview plugin

3 files changed, 52 insertions, 39 deletions

diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js
index d0521afd..14019ca2 100644
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@@ -377,10 +377,12 @@ const defaults = {
         previewThumbnails: {
             // Tooltip thumbs
             thumbContainer: 'plyr__preview-thumb',
+            thumbContainerShown: 'plyr__preview-thumb--is-shown',
             imageContainer: 'plyr__preview-thumb__image-container',
             timeContainer: 'plyr__preview-thumb__time-container',
-            // Scrubber
-            scrubbingContainer: 'plyr__preview-scrubber',
+            // Scrubbing
+            scrubbingContainer: 'plyr__preview-scrubbing',
+            scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown',
         },
     },
 
diff --git a/src/js/plugins/previewThumbnails.js b/src/js/plugins/previewThumbnails.js
index 973e377c..053875c7 100644
--- a/src/js/plugins/previewThumbnails.js
+++ b/src/js/plugins/previewThumbnails.js
@@ -66,7 +66,7 @@ const parseVtt = vttDataString => {
 class PreviewThumbnails {
     /**
      * PreviewThumbnails constructor.
-     * @param {object} player
+     * @param {Plyr} player
      * @return {PreviewThumbnails}
      */
     constructor(player) {
@@ -78,7 +78,7 @@ class PreviewThumbnails {
 
         this.elements = {
             thumb: {},
-            scrubber: {},
+            scrubbing: {},
         };
 
         if (this.enabled) {
@@ -210,13 +210,13 @@ class PreviewThumbnails {
 
         // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering
         on.call(this.player, this.player.elements.progress, 'mouseleave click', () => {
-            this.hideThumbContainer(true);
+            this.toggleThumbContainer(false, true);
         });
         this.player.on('play', () => {
-            this.hideThumbContainer(true);
+            this.toggleThumbContainer(false, true);
         });
         this.player.on('seeked', () => {
-            this.hideThumbContainer(false);
+            this.toggleThumbContainer(false);
         });
 
         // Show scrubbing preview
@@ -226,8 +226,8 @@ class PreviewThumbnails {
                 this.mouseDown = true;
                 // Wait until media has a duration
                 if (this.player.media.duration) {
-                    this.showScrubbingContainer();
-                    this.hideThumbContainer(true);
+                    this.toggleScrubbingContainer(true);
+                    this.toggleThumbContainer(false, true);
 
                     // Download and show image
                     this.showImageAtCurrentTime();
@@ -243,13 +243,13 @@ class PreviewThumbnails {
             // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview
             if (Math.ceil(this.timeAtLastTimeupdate) === Math.ceil(this.player.media.currentTime)) {
                 // The video was already seeked/loaded at the chosen time - hide immediately
-                this.hideScrubbingContainer();
+                this.toggleScrubbingContainer(false);
             } else {
                 // The video hasn't seeked yet. Wait for that
                 once.call(this.player, this.player.media, 'timeupdate', () => {
                     // Re-check mousedown - we might have already started scrubbing again
                     if (!this.mouseDown) {
-                        this.hideScrubbingContainer();
+                        this.toggleScrubbingContainer(false);
                     }
                 });
             }
@@ -285,18 +285,18 @@ class PreviewThumbnails {
         this.player.elements.progress.appendChild(this.elements.thumb.container);
 
         // Create HTML element: plyr__preview-scrubbing-container
-        this.elements.scrubber.container = createElement('div', {
+        this.elements.scrubbing.container = createElement('div', {
             class: this.player.config.classNames.previewThumbnails.scrubbingContainer,
         });
 
-        this.player.elements.wrapper.appendChild(this.elements.scrubber.container);
+        this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
     }
 
     showImageAtCurrentTime() {
         if (this.mouseDown) {
             this.setScrubbingContainerSize();
         } else {
-            this.showThumbContainer();
+            this.toggleThumbContainer(true);
             this.setThumbContainerSizeAndPos();
         }
 
@@ -486,7 +486,7 @@ class PreviewThumbnails {
 
     get currentImageContainer() {
         if (this.mouseDown) {
-            return this.elements.scrubber.container;
+            return this.elements.scrubbing.container;
         }
 
         return this.elements.thumb.imageContainer;
@@ -506,7 +506,8 @@ class PreviewThumbnails {
 
     get thumbContainerHeight() {
         if (this.mouseDown) {
-            return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio); // Can't use media.clientHeight - html5 video goes big and does black bars above and below
+            // 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);
         }
 
         return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -528,27 +529,24 @@ class PreviewThumbnails {
         }
     }
 
-    showThumbContainer() {
-        this.elements.thumb.container.style.opacity = 1;
-    }
-
-    hideThumbContainer(clearShowing = false) {
-        this.elements.thumb.container.style.opacity = 0;
+    toggleThumbContainer(toggle = false, clearShowing = false) {
+        const className = this.player.config.classNames.previewThumbnails.thumbContainerShown;
+        this.elements.thumb.container.classList.toggle(className, toggle);
 
-        if (clearShowing) {
+        if (!toggle && clearShowing) {
             this.showingThumb = null;
             this.showingThumbFilename = null;
         }
     }
 
-    showScrubbingContainer() {
-        this.elements.scrubber.container.style.opacity = 1;
-    }
+    toggleScrubbingContainer(toggle = false) {
+        const className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;
+        this.elements.scrubbing.container.classList.toggle(className, toggle);
 
-    hideScrubbingContainer() {
-        this.elements.scrubber.container.style.opacity = 0;
-        this.showingThumb = null;
-        this.showingThumbFilename = null;
+        if (!toggle) {
+            this.showingThumb = null;
+            this.showingThumbFilename = null;
+        }
     }
 
     determineContainerAutoSizing() {
@@ -594,9 +592,9 @@ class PreviewThumbnails {
 
     // Can't use 100% width, in case the video is a different aspect ratio to the video container
     setScrubbingContainerSize() {
-        this.elements.scrubber.container.style.width = `${this.player.media.clientWidth}px`;
+        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.scrubber.container.style.height = `${this.player.media.clientWidth / this.thumbAspectRatio}px`;
+        this.elements.scrubbing.container.style.height = `${this.player.media.clientWidth / this.thumbAspectRatio}px`;
     }
 
     // Sprites need to be offset to the correct location
@@ -606,12 +604,12 @@ class PreviewThumbnails {
         }
 
         // Find difference between height and preview container height
-        const heightMulti = this.thumbContainerHeight / frame.h;
+        const multiplier = this.thumbContainerHeight / frame.h;
 
-        previewImage.style.height = `${Math.floor(previewImage.naturalHeight * heightMulti)}px`;
-        previewImage.style.width = `${Math.floor(previewImage.naturalWidth * heightMulti)}px`;
-        previewImage.style.left = `-${Math.ceil(frame.x * heightMulti)}px`;
-        previewImage.style.top = `-${frame.y * heightMulti}px`; // TODO: might need to round this one up too
+        previewImage.style.height = `${Math.floor(previewImage.naturalHeight * multiplier)}px`;
+        previewImage.style.width = `${Math.floor(previewImage.naturalWidth * multiplier)}px`;
+        previewImage.style.left = `-${frame.x * multiplier}px`;
+        previewImage.style.top = `-${frame.y * multiplier}px`;
     }
 }
 
diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss
index b62e1021..8fb0132d 100644
--- a/src/sass/plugins/previewThumbnails.scss
+++ b/src/sass/plugins/previewThumbnails.scss
@@ -12,9 +12,16 @@
     padding: 3px;
     pointer-events: none;
     position: absolute;
-    transition: opacity 0.2s 0.1s ease;
+    transform: translate(0, 10px) scale(0.8);
+    transform-origin: 50% 100%;
+    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
     z-index: 2;
 
+    &--is-shown {
+        opacity: 1;
+        transform: translate(0, 0) scale(1);
+    }
+
     // The background triangle
     &::before {
         border-left: $plyr-tooltip-arrow-size solid transparent;
@@ -31,6 +38,7 @@
     }
 
     &__image-container {
+        background: $plyr-color-heather;
         border-radius: 2px;
         overflow: hidden;
         position: relative;
@@ -66,12 +74,13 @@
     }
 }
 
-.plyr__preview-scrubber {
+.plyr__preview-scrubbing {
     bottom: 0;
     filter: blur(1px);
     height: 100%;
     left: 0;
     margin: auto; // Required when video is different dimensions to container (e.g., fullscreen)
+    opacity: 0;
     overflow: hidden;
     position: absolute;
     right: 0;
@@ -90,4 +99,8 @@
         top: 0;
         width: 100%;
     }
+
+    &--is-shown {
+        opacity: 1;
+    }
 }