Merge pull request #1691 from sampotts/develop

v3.5.9

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/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.polyfilled.js

@@ -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

@@ -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>",

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;
 }