Style tweaks for preview plugin

1 files changed, 43 insertions, 43 deletions

diff --git a/dist/plyr.polyfilled.js b/dist/plyr.polyfilled.js
index d7e37d71..44848f8c 100644
--- a/dist/plyr.polyfilled.js
+++ b/dist/plyr.polyfilled.js
@@ -6505,10 +6505,12 @@ typeof navigator === "object" && (function (global, factory) {
       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'
       }
     },
     // Embed attributes
@@ -9747,7 +9749,7 @@ typeof navigator === "object" && (function (global, factory) {
   function () {
     /**
      * PreviewThumbnails constructor.
-     * @param {object} player
+     * @param {Plyr} player
      * @return {PreviewThumbnails}
      */
     function PreviewThumbnails(player) {
@@ -9760,7 +9762,7 @@ typeof navigator === "object" && (function (global, factory) {
       this.loadedImages = [];
       this.elements = {
         thumb: {},
-        scrubber: {}
+        scrubbing: {}
       };
 
       if (this.enabled) {
@@ -9899,13 +9901,13 @@ typeof navigator === "object" && (function (global, factory) {
         }); // 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', function () {
-          _this4.hideThumbContainer(true);
+          _this4.toggleThumbContainer(false, true);
         });
         this.player.on('play', function () {
-          _this4.hideThumbContainer(true);
+          _this4.toggleThumbContainer(false, true);
         });
         this.player.on('seeked', function () {
-          _this4.hideThumbContainer(false);
+          _this4.toggleThumbContainer(false);
         }); // Show scrubbing preview
 
         on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) {
@@ -9914,9 +9916,9 @@ typeof navigator === "object" && (function (global, factory) {
             _this4.mouseDown = true; // Wait until media has a duration
 
             if (_this4.player.media.duration) {
-              _this4.showScrubbingContainer();
+              _this4.toggleScrubbingContainer(true);
 
-              _this4.hideThumbContainer(true); // Download and show image
+              _this4.toggleThumbContainer(false, true); // Download and show image
 
 
               _this4.showImageAtCurrentTime();
@@ -9931,13 +9933,13 @@ typeof navigator === "object" && (function (global, factory) {
 
           if (Math.ceil(_this4.timeAtLastTimeupdate) === Math.ceil(_this4.player.media.currentTime)) {
             // The video was already seeked/loaded at the chosen time - hide immediately
-            _this4.hideScrubbingContainer();
+            _this4.toggleScrubbingContainer(false);
           } else {
             // The video hasn't seeked yet. Wait for that
             once.call(_this4.player, _this4.player.media, 'timeupdate', function () {
               // Re-check mousedown - we might have already started scrubbing again
               if (!_this4.mouseDown) {
-                _this4.hideScrubbingContainer();
+                _this4.toggleScrubbingContainer(false);
               }
             });
           }
@@ -9969,10 +9971,10 @@ typeof navigator === "object" && (function (global, factory) {
 
         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);
       }
     }, {
       key: "showImageAtCurrentTime",
@@ -9982,7 +9984,7 @@ typeof navigator === "object" && (function (global, factory) {
         if (this.mouseDown) {
           this.setScrubbingContainerSize();
         } else {
-          this.showThumbContainer();
+          this.toggleThumbContainer(true);
           this.setThumbContainerSizeAndPos();
         } // Find the desired thumbnail index
 
@@ -10180,34 +10182,31 @@ typeof navigator === "object" && (function (global, factory) {
         }
       }
     }, {
-      key: "showThumbContainer",
-      value: function showThumbContainer() {
-        this.elements.thumb.container.style.opacity = 1;
+      key: "toggleThumbContainer",
+      value: function toggleThumbContainer() {
+        var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        var clearShowing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        var className = this.player.config.classNames.previewThumbnails.thumbContainerShown;
+        this.elements.thumb.container.classList.toggle(className, toggle);
+
+        if (!toggle && clearShowing) {
+          this.showingThumb = null;
+          this.showingThumbFilename = null;
+        }
       }
     }, {
-      key: "hideThumbContainer",
-      value: function hideThumbContainer() {
-        var clearShowing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-        this.elements.thumb.container.style.opacity = 0;
+      key: "toggleScrubbingContainer",
+      value: function toggleScrubbingContainer() {
+        var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        var className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;
+        this.elements.scrubbing.container.classList.toggle(className, toggle);
 
-        if (clearShowing) {
+        if (!toggle) {
           this.showingThumb = null;
           this.showingThumbFilename = null;
         }
       }
     }, {
-      key: "showScrubbingContainer",
-      value: function showScrubbingContainer() {
-        this.elements.scrubber.container.style.opacity = 1;
-      }
-    }, {
-      key: "hideScrubbingContainer",
-      value: function hideScrubbingContainer() {
-        this.elements.scrubber.container.style.opacity = 0;
-        this.showingThumb = null;
-        this.showingThumbFilename = null;
-      }
-    }, {
       key: "determineContainerAutoSizing",
       value: function determineContainerAutoSizing() {
         if (this.elements.thumb.imageContainer.clientHeight > 20) {
@@ -10253,9 +10252,9 @@ typeof navigator === "object" && (function (global, factory) {
     }, {
       key: "setScrubbingContainerSize",
       value: function setScrubbingContainerSize() {
-        this.elements.scrubber.container.style.width = "".concat(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.width = "".concat(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 = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px");
+        this.elements.scrubbing.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px");
       } // Sprites need to be offset to the correct location
 
     }, {
@@ -10266,11 +10265,11 @@ typeof navigator === "object" && (function (global, factory) {
         } // Find difference between height and preview container height
 
 
-        var heightMulti = this.thumbContainerHeight / frame.h;
-        previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * heightMulti), "px");
-        previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * heightMulti), "px");
-        previewImage.style.left = "-".concat(Math.ceil(frame.x * heightMulti), "px");
-        previewImage.style.top = "-".concat(frame.y * heightMulti, "px"); // TODO: might need to round this one up too
+        var multiplier = this.thumbContainerHeight / frame.h;
+        previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * multiplier), "px");
+        previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * multiplier), "px");
+        previewImage.style.left = "-".concat(frame.x * multiplier, "px");
+        previewImage.style.top = "-".concat(frame.y * multiplier, "px");
       }
     }, {
       key: "enabled",
@@ -10281,7 +10280,7 @@ typeof navigator === "object" && (function (global, factory) {
       key: "currentImageContainer",
       get: function get() {
         if (this.mouseDown) {
-          return this.elements.scrubber.container;
+          return this.elements.scrubbing.container;
         }
 
         return this.elements.thumb.imageContainer;
@@ -10304,7 +10303,8 @@ typeof navigator === "object" && (function (global, factory) {
       key: "thumbContainerHeight",
       get: function get() {
         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);