v3.5.9 deployed

v3.5.9

.github/FUNDING.yml

@@ -2,3 +2,4 @@
 
 github: sampotts
 patreon: plyr
+open_collective: plyr

.nvmrc

@@ -0,0 +1 @@
+v13.8.0

changelog.md

@@ -1,3 +1,8 @@
+### v3.5.9
+
+-   Fix for regression with volume control width
+-   Ensure poster image is not downloaded again for HTML5 videos
+
 ### v3.5.8
 
 -   Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS

demo/dist/demo.js

@@ -20382,7 +20382,7 @@ typeof navigator === "object" && (function () {
 	  // Sprite (for icons)
 	  loadSprite: true,
 	  iconPrefix: 'plyr',
-	  iconUrl: 'https://cdn.plyr.io/3.5.8/plyr.svg',
+	  iconUrl: 'https://cdn.plyr.io/3.5.9/plyr.svg',
 	  // Blank video (used to prevent errors on source change)
 	  blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
 	  // Quality default
@@ -21225,7 +21225,12 @@ typeof navigator === "object" && (function () {
 	    } // Set property synchronously to respect the call order
 
 
-	    this.media.setAttribute('poster', poster); // Wait until ui is ready
+	    this.media.setAttribute('poster', poster); // HTML5 uses native poster attribute
+
+	    if (this.isHTML5) {
+	      return Promise.resolve(poster);
+	    } // Wait until ui is ready
+
 
 	    return ready.call(this) // Load image
 	    .then(function () {
@@ -26178,9 +26183,6 @@ typeof navigator === "object" && (function () {
 	        captions: {
 	          active: true
 	        },
-	        keys: {
-	          google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'
-	        },
 	        ads: {
 	          enabled: env.prod || env.dev,
 	          publisherId: '918848828995742'

demo/src/js/demo.js

@@ -50,9 +50,6 @@ import toggleClass from './toggle-class';
                 captions: {
                     active: true,
                 },
-                keys: {
-                    google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
-                },
                 ads: {
                     enabled: env.prod || env.dev,
                     publisherId: '918848828995742',
@@ -67,7 +64,7 @@ import toggleClass from './toggle-class';
                 vimeo: {
                     // Prevent Vimeo blocking plyr.io demo site
                     referrerPolicy: 'no-referrer',
-                }
+                },
             });
 
             // Expose for tinkering in the console

dist/plyr.js

@@ -3660,7 +3660,7 @@ typeof navigator === "object" && (function (global, factory) {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.5.8/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.5.9/plyr.svg',
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
     // Quality default
@@ -4491,7 +4491,12 @@ typeof navigator === "object" && (function (global, factory) {
       } // Set property synchronously to respect the call order
 
 
-      this.media.setAttribute('poster', poster); // Wait until ui is ready
+      this.media.setAttribute('poster', poster); // HTML5 uses native poster attribute
+
+      if (this.isHTML5) {
+        return Promise.resolve(poster);
+      } // Wait until ui is ready
+
 
       return ready.call(this) // Load image
       .then(function () {

dist/plyr.mjs

@@ -3654,7 +3654,7 @@ var defaults$1 = {
   // Sprite (for icons)
   loadSprite: true,
   iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.5.8/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.5.9/plyr.svg',
   // Blank video (used to prevent errors on source change)
   blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
   // Quality default
@@ -4485,7 +4485,12 @@ var ui = {
     } // Set property synchronously to respect the call order
 
 
-    this.media.setAttribute('poster', poster); // Wait until ui is ready
+    this.media.setAttribute('poster', poster); // HTML5 uses native poster attribute
+
+    if (this.isHTML5) {
+      return Promise.resolve(poster);
+    } // Wait until ui is ready
+
 
     return ready.call(this) // Load image
     .then(function () {

dist/plyr.polyfilled.js

@@ -9943,7 +9943,7 @@ typeof navigator === "object" && (function (global, factory) {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.5.8/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.5.9/plyr.svg',
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
     // Quality default
@@ -10786,7 +10786,12 @@ typeof navigator === "object" && (function (global, factory) {
       } // Set property synchronously to respect the call order
 
 
-      this.media.setAttribute('poster', poster); // Wait until ui is ready
+      this.media.setAttribute('poster', poster); // HTML5 uses native poster attribute
+
+      if (this.isHTML5) {
+        return Promise.resolve(poster);
+      } // Wait until ui is ready
+
 
       return ready.call(this) // Load image
       .then(function () {

dist/plyr.polyfilled.mjs

@@ -9937,7 +9937,7 @@ var defaults$1 = {
   // Sprite (for icons)
   loadSprite: true,
   iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.5.8/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.5.9/plyr.svg',
   // Blank video (used to prevent errors on source change)
   blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
   // Quality default
@@ -10780,7 +10780,12 @@ var ui = {
     } // Set property synchronously to respect the call order
 
 
-    this.media.setAttribute('poster', poster); // Wait until ui is ready
+    this.media.setAttribute('poster', poster); // HTML5 uses native poster attribute
+
+    if (this.isHTML5) {
+      return Promise.resolve(poster);
+    } // Wait until ui is ready
+
 
     return ready.call(this) // Load image
     .then(function () {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.5.8",
+    "version": "3.5.9",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",

readme.md

@@ -130,13 +130,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.8/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.5.9/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.5.8/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.5.9/plyr.polyfilled.js"></script>
 ```
 
 ## CSS
@@ -150,13 +150,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.8/plyr.css" />
+<link rel="stylesheet" href="https://cdn.plyr.io/3.5.9/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.8/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.9/plyr.svg`.
 
 # Ads
 

src/js/config/defaults.js

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

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.5.8
+// plyr.js v3.5.9
 // 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.8
+// plyr.js v3.5.9
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/ui.js

@@ -172,6 +172,11 @@ const ui = {
         // Set property synchronously to respect the call order
         this.media.setAttribute('poster', poster);
 
+        // HTML5 uses native poster attribute
+        if (this.isHTML5) {
+            return Promise.resolve(poster);
+        }
+
         // Wait until ui is ready
         return (
             ready

src/sass/components/progress.scss

@@ -67,15 +67,6 @@ $plyr-progress-offset: $plyr-range-thumb-height;
     }
 }
 
-.plyr--video .plyr__progress__buffer {
-    box-shadow: 0 1px 1px rgba(#000, 0.15);
-    color: $plyr-video-progress-buffered-bg;
-}
-
-.plyr--audio .plyr__progress__buffer {
-    color: $plyr-audio-progress-buffered-bg;
-}
-
 // Loading state
 .plyr--loading .plyr__progress__buffer {
     animation: plyr-progress 1s linear infinite;

src/sass/components/volume.scss

@@ -5,7 +5,10 @@
 .plyr__volume {
     align-items: center;
     display: flex;
+    max-width: 110px;
+    min-width: 80px;
     position: relative;
+    width: 20%;
 
     input[type='range'] {
         margin-left: ($plyr-control-spacing / 2);
@@ -13,12 +16,4 @@
         position: relative;
         z-index: 2;
     }
-
-    @media (min-width: $plyr-bp-sm) {
-        max-width: 90px;
-    }
-
-    @media (min-width: $plyr-bp-md) {
-        max-width: 110px;
-    }
 }

src/sass/types/audio.scss

@@ -54,3 +54,8 @@
         }
     }
 }
+
+// Progress
+.plyr--audio .plyr__progress__buffer {
+    color: $plyr-audio-progress-buffered-bg;
+}

src/sass/types/video.scss

@@ -152,6 +152,7 @@ $embed-padding: ((100 / 16) * 9);
     }
 }
 
-.plyr--video .plyr__time {
+// Progress
-    text-shadow: 0 1px 1px rgba(#000, 0.15);
+.plyr--video .plyr__progress__buffer {
+    color: $plyr-video-progress-buffered-bg;
 }