v3.3.5

changelog.md

@@ -1,3 +1,16 @@
+# v3.3.5
+
+*   Removed `.load()` call as it breaks HLS (see #870)
+
+# v3.3.4
+
+*   Fix for controls sometimes not showing while video is playing
+*   Fixed logic for show home tab on option select
+
+# v3.3.3
+
+*   Reverted change to show home tab on option select due to usability regression
+
 # v3.3.2
 
 *   Fix for ads running in audio

dist/plyr.js

@@ -1850,7 +1850,7 @@ var ui = {
 
 
     // Check playing state
-    checkPlaying: function checkPlaying() {
+    checkPlaying: function checkPlaying(event) {
         // Class hooks
         utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
         utils.toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
@@ -1859,6 +1859,11 @@ var ui = {
         // Set ARIA state
         utils.toggleState(this.elements.buttons.play, this.playing);
 
+        // Only update controls on non timeupdate events
+        if (utils.is.event(event) && event.type === 'timeupdate') {
+            return;
+        }
+
         // Toggle controls
         this.toggleControls(!this.playing);
     },
@@ -3742,7 +3747,7 @@ var defaults$1 = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.3.2/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.3.5/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -6444,7 +6449,7 @@ var Ads = function () {
     }, {
         key: 'enabled',
         get: function get$$1() {
-            return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && utils.is.string(this.publisherId) && this.publisherId.length;
+            return this.player.isVideo && this.player.config.ads.enabled && !utils.is.empty(this.publisherId);
         }
     }, {
         key: 'tagUrl',
@@ -7037,7 +7042,8 @@ var Plyr = function () {
         key: 'stop',
         value: function stop() {
             if (this.isHTML5) {
-                this.media.load();
+                this.pause();
+                this.restart();
             } else if (utils.is.function(this.media.stop)) {
                 this.media.stop();
             }

dist/plyr.polyfilled.js

@@ -6884,7 +6884,7 @@ var ui = {
 
 
     // Check playing state
-    checkPlaying: function checkPlaying() {
+    checkPlaying: function checkPlaying(event) {
         // Class hooks
         utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
         utils.toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
@@ -6893,6 +6893,11 @@ var ui = {
         // Set ARIA state
         utils.toggleState(this.elements.buttons.play, this.playing);
 
+        // Only update controls on non timeupdate events
+        if (utils.is.event(event) && event.type === 'timeupdate') {
+            return;
+        }
+
         // Toggle controls
         this.toggleControls(!this.playing);
     },
@@ -8776,7 +8781,7 @@ var defaults$1 = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.3.2/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.3.5/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -11478,7 +11483,7 @@ var Ads = function () {
     }, {
         key: 'enabled',
         get: function get() {
-            return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && utils.is.string(this.publisherId) && this.publisherId.length;
+            return this.player.isVideo && this.player.config.ads.enabled && !utils.is.empty(this.publisherId);
         }
     }, {
         key: 'tagUrl',
@@ -12071,7 +12076,8 @@ var Plyr = function () {
         key: 'stop',
         value: function stop() {
             if (this.isHTML5) {
-                this.media.load();
+                this.pause();
+                this.restart();
             } else if (utils.is.function(this.media.stop)) {
                 this.media.stop();
             }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.3.2",
+    "version": "3.3.5",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",

readme.md

@@ -128,7 +128,7 @@ See [initialising](#initialising) for more information on advanced setups.
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/3.3.2/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.3.5/plyr.js"></script>
 ```
 
 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -144,13 +144,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.3.2/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.3.5/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.3.2/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.5/plyr.svg`.
 
 ## Ads
 

src/js/defaults.js

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

src/js/plugins/ads.js

@@ -44,7 +44,7 @@ class Ads {
     }
 
     get enabled() {
-        return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && utils.is.string(this.publisherId) && this.publisherId.length;
+        return this.player.isVideo && this.player.config.ads.enabled && !utils.is.empty(this.publisherId);
     }
 
     /**

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.3.2
+// plyr.js v3.3.5
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -396,7 +396,8 @@ class Plyr {
      */
     stop() {
         if (this.isHTML5) {
-            this.media.load();
+            this.pause();
+            this.restart();
         } else if (utils.is.function(this.media.stop)) {
             this.media.stop();
         }

src/js/plyr.polyfilled.js

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

src/js/ui.js

@@ -158,7 +158,7 @@ const ui = {
     },
 
     // Check playing state
-    checkPlaying() {
+    checkPlaying(event) {
         // Class hooks
         utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
         utils.toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
@@ -167,6 +167,11 @@ const ui = {
         // Set ARIA state
         utils.toggleState(this.elements.buttons.play, this.playing);
 
+        // Only update controls on non timeupdate events
+        if (utils.is.event(event) && event.type === 'timeupdate') {
+            return;
+        }
+
         // Toggle controls
         this.toggleControls(!this.playing);
     },