Fixed issue where the preview thumbnail was present while scrubbing

changelog.md

@@ -1,3 +1,7 @@
+## v3.5.2
+
+-   Fixed issue where the preview thumbnail was present while scrubbing
+
 ## v3.5.1
 
 -   Fixed build issues with babel and browserslist

demo/dist/demo.js

@@ -7371,7 +7371,7 @@ typeof navigator === "object" && (function () {
 	  // Sprite (for icons)
 	  loadSprite: true,
 	  iconPrefix: 'plyr',
-	  iconUrl: 'https://cdn.plyr.io/3.5.1/plyr.svg',
+	  iconUrl: 'https://cdn.plyr.io/3.5.2/plyr.svg',
 	  // Blank video (used to prevent errors on source change)
 	  blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
 	  // Quality default
@@ -11063,7 +11063,6 @@ typeof navigator === "object" && (function () {
 	      if (this.mouseDown) {
 	        this.setScrubbingContainerSize();
 	      } else {
-	        this.toggleThumbContainer(true);
 	        this.setThumbContainerSizeAndPos();
 	      } // Find the desired thumbnail index
 	      // TODO: Handle a video longer than the thumbs where thumbNum is null
@@ -11073,8 +11072,12 @@ typeof navigator === "object" && (function () {
 	        return _this6.seekTime >= frame.startTime && _this6.seekTime <= frame.endTime;
 	      });
 	      var hasThumb = thumbNum >= 0;
-	      var qualityIndex = 0;
-	      this.toggleThumbContainer(hasThumb); // No matching thumb found
+	      var qualityIndex = 0; // Show the thumb container if we're not scrubbing
+
+	      if (!this.mouseDown) {
+	        this.toggleThumbContainer(hasThumb);
+	      } // No matching thumb found
+
 
 	      if (!hasThumb) {
 	        return;

dist/plyr.js

@@ -3521,7 +3521,7 @@ typeof navigator === "object" && (function (global, factory) {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.5.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.5.2/plyr.svg',
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
     // Quality default
@@ -7219,7 +7219,6 @@ typeof navigator === "object" && (function (global, factory) {
         if (this.mouseDown) {
           this.setScrubbingContainerSize();
         } else {
-          this.toggleThumbContainer(true);
           this.setThumbContainerSizeAndPos();
         } // Find the desired thumbnail index
         // TODO: Handle a video longer than the thumbs where thumbNum is null
@@ -7229,8 +7228,12 @@ typeof navigator === "object" && (function (global, factory) {
           return _this6.seekTime >= frame.startTime && _this6.seekTime <= frame.endTime;
         });
         var hasThumb = thumbNum >= 0;
-        var qualityIndex = 0;
-        this.toggleThumbContainer(hasThumb); // No matching thumb found
+        var qualityIndex = 0; // Show the thumb container if we're not scrubbing
+
+        if (!this.mouseDown) {
+          this.toggleThumbContainer(hasThumb);
+        } // No matching thumb found
+
 
         if (!hasThumb) {
           return;

dist/plyr.mjs

@@ -3515,7 +3515,7 @@ var defaults$1 = {
   // Sprite (for icons)
   loadSprite: true,
   iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.5.1/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.5.2/plyr.svg',
   // Blank video (used to prevent errors on source change)
   blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
   // Quality default
@@ -7213,7 +7213,6 @@ function () {
       if (this.mouseDown) {
         this.setScrubbingContainerSize();
       } else {
-        this.toggleThumbContainer(true);
         this.setThumbContainerSizeAndPos();
       } // Find the desired thumbnail index
       // TODO: Handle a video longer than the thumbs where thumbNum is null
@@ -7223,8 +7222,12 @@ function () {
         return _this6.seekTime >= frame.startTime && _this6.seekTime <= frame.endTime;
       });
       var hasThumb = thumbNum >= 0;
-      var qualityIndex = 0;
-      this.toggleThumbContainer(hasThumb); // No matching thumb found
+      var qualityIndex = 0; // Show the thumb container if we're not scrubbing
+
+      if (!this.mouseDown) {
+        this.toggleThumbContainer(hasThumb);
+      } // No matching thumb found
+
 
       if (!hasThumb) {
         return;

dist/plyr.polyfilled.js

@@ -6909,7 +6909,7 @@ typeof navigator === "object" && (function (global, factory) {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.5.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.5.2/plyr.svg',
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
     // Quality default
@@ -10621,7 +10621,6 @@ typeof navigator === "object" && (function (global, factory) {
         if (this.mouseDown) {
           this.setScrubbingContainerSize();
         } else {
-          this.toggleThumbContainer(true);
           this.setThumbContainerSizeAndPos();
         } // Find the desired thumbnail index
         // TODO: Handle a video longer than the thumbs where thumbNum is null
@@ -10631,8 +10630,12 @@ typeof navigator === "object" && (function (global, factory) {
           return _this6.seekTime >= frame.startTime && _this6.seekTime <= frame.endTime;
         });
         var hasThumb = thumbNum >= 0;
-        var qualityIndex = 0;
-        this.toggleThumbContainer(hasThumb); // No matching thumb found
+        var qualityIndex = 0; // Show the thumb container if we're not scrubbing
+
+        if (!this.mouseDown) {
+          this.toggleThumbContainer(hasThumb);
+        } // No matching thumb found
+
 
         if (!hasThumb) {
           return;

dist/plyr.polyfilled.mjs

@@ -6903,7 +6903,7 @@ var defaults$1 = {
   // Sprite (for icons)
   loadSprite: true,
   iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.5.1/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.5.2/plyr.svg',
   // Blank video (used to prevent errors on source change)
   blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
   // Quality default
@@ -10615,7 +10615,6 @@ function () {
       if (this.mouseDown) {
         this.setScrubbingContainerSize();
       } else {
-        this.toggleThumbContainer(true);
         this.setThumbContainerSizeAndPos();
       } // Find the desired thumbnail index
       // TODO: Handle a video longer than the thumbs where thumbNum is null
@@ -10625,8 +10624,12 @@ function () {
         return _this6.seekTime >= frame.startTime && _this6.seekTime <= frame.endTime;
       });
       var hasThumb = thumbNum >= 0;
-      var qualityIndex = 0;
-      this.toggleThumbContainer(hasThumb); // No matching thumb found
+      var qualityIndex = 0; // Show the thumb container if we're not scrubbing
+
+      if (!this.mouseDown) {
+        this.toggleThumbContainer(hasThumb);
+      } // No matching thumb found
+
 
       if (!hasThumb) {
         return;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.5.1",
+    "version": "3.5.2",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",
@@ -72,10 +72,10 @@
         "remark-cli": "^6.0.1",
         "remark-validate-links": "^8.0.0",
         "rollup-plugin-babel": "^4.3.2",
-        "rollup-plugin-commonjs": "^9.2.0",
+        "rollup-plugin-commonjs": "^9.2.1",
         "rollup-plugin-node-resolve": "^4.0.1",
         "stylelint": "^9.10.1",
-        "stylelint-config-prettier": "^4.0.0",
+        "stylelint-config-prettier": "^5.0.0",
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.3.0",
         "stylelint-order": "^2.0.0",

plyr.code-workspace

@@ -5,30 +5,24 @@
         }
     ],
     "settings": {
-        // Exclude from the editor
-        "files.exclude": {
-            "**/node_modules": true
-        },
-        // Exclude from search
-        "search.exclude": {
-            "dist/": true,
-            "demo/dist/": true
-        },
         // Linting
         "stylelint.enable": true,
         "css.validate": false,
         "scss.validate": false,
         "javascript.validate.enable": false,
+
         // Prettier
         "prettier.eslintIntegration": true,
         "prettier.stylelintIntegration": true,
+
         // Formatting
         "editor.tabSize": 4,
         "editor.insertSpaces": true,
         "editor.formatOnSave": true,
         "editor.codeActionsOnSave": {
             "source.organizeImports": true
         },
+
         // Trim on save
         "files.trimTrailingWhitespace": true
     }

readme.md

@@ -123,13 +123,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
 
 ```html
-<script src="https://cdn.plyr.io/3.5.1/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.5.2/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.5.1/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.5.2/plyr.polyfilled.js"></script>
 ```
 
 ## CSS
@@ -143,13 +143,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.5.1/plyr.css" />
+<link rel="stylesheet" href="https://cdn.plyr.io/3.5.2/plyr.css" />
 ```
 
 ## SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.1/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.2/plyr.svg`.
 
 # Ads
 

src/js/config/defaults.js

@@ -60,7 +60,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.5.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.5.2/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

src/js/plugins/previewThumbnails.js

@@ -220,6 +220,7 @@ class PreviewThumbnails {
         // Only act on left mouse button (0), or touch device (event.button is false)
         if (event.button === false || event.button === 0) {
             this.mouseDown = true;
+
             // Wait until media has a duration
             if (this.player.media.duration) {
                 this.toggleScrubbingContainer(true);
@@ -307,7 +308,6 @@ class PreviewThumbnails {
         if (this.mouseDown) {
             this.setScrubbingContainerSize();
         } else {
-            this.toggleThumbContainer(true);
             this.setThumbContainerSizeAndPos();
         }
 
@@ -319,7 +319,10 @@ class PreviewThumbnails {
         const hasThumb = thumbNum >= 0;
         let qualityIndex = 0;
 
-        this.toggleThumbContainer(hasThumb);
+        // Show the thumb container if we're not scrubbing
+        if (!this.mouseDown) {
+            this.toggleThumbContainer(hasThumb);
+        }
 
         // No matching thumb found
         if (!hasThumb) {

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.5.1
+// plyr.js v3.5.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.5.1
+// plyr.js v3.5.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================