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 <[email protected]>",

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,20 +5,15 @@
 .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);
  margin-right: ($plyr-control-spacing / 2);
  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 {
- text-shadow: 0 1px 1px rgba(#000, 0.15);
+// Progress
+.plyr--video .plyr__progress__buffer {
+ color: $plyr-video-progress-buffered-bg;
 }