v3.3.23

changelog.md

@@ -1,3 +1,9 @@
+# v3.3.23
+
+-   Add support for YouTube's hl param (thanks @renaudleo)
+-   Fix for captions positioning when no controls (thanks @friday and @mjfwebb)
+-   Fix for WebKit redraw loop on the `<input type="range">` elements
+
 # v3.3.22
 
 -   Travis & CI improvements (thanks @friday)

dist/plyr.js

@@ -2762,12 +2762,9 @@ typeof navigator === "object" && (function (global, factory) {
                 target = this.elements.container;
             }
 
-            // Inject controls HTML
+            // Inject controls HTML (needs to be before captions, hence "afterbegin")
-            if (is.element(container)) {
+            var insertMethod = is.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML';
-                target.appendChild(container);
+            target[insertMethod]('afterbegin', container);
-            } else if (container) {
-                target.insertAdjacentHTML('beforeend', container);
-            }
 
             // Find the elements if need be
             if (!is.element(this.elements.controls)) {
@@ -5782,6 +5779,7 @@ typeof navigator === "object" && (function (global, factory) {
                 videoId: videoId,
                 playerVars: {
                     autoplay: player.config.autoplay ? 1 : 0, // Autoplay
+                    hl: player.config.hl, // iframe interface language
                     controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
                     rel: 0, // No related vids
                     showinfo: 0, // Hide info
@@ -5832,6 +5830,10 @@ typeof navigator === "object" && (function (global, factory) {
                         triggerEvent.call(player, player.media, 'ratechange');
                     },
                     onReady: function onReady(event) {
+                        // Bail if onReady has already been called. See issue #1108
+                        if (is.function(player.media.play)) {
+                            return;
+                        }
                         // Get the instance
                         var instance = event.target;
 
@@ -7087,7 +7089,7 @@ typeof navigator === "object" && (function (global, factory) {
                         this.elements.container.className = '';
 
                         // Get attributes from URL and set config
-                        if (url.searchParams.length) {
+                        if (url.search.length) {
                             var truthy = ['1', 'true'];
 
                             if (truthy.includes(url.searchParams.get('autoplay'))) {
@@ -7101,6 +7103,7 @@ typeof navigator === "object" && (function (global, factory) {
                             // YouTube requires the playsinline in the URL
                             if (this.isYouTube) {
                                 this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
+                                this.config.hl = url.searchParams.get('hl');
                             } else {
                                 this.config.playsinline = true;
                             }

dist/plyr.polyfilled.js

@@ -8148,12 +8148,9 @@ typeof navigator === "object" && (function (global, factory) {
 	            target = this.elements.container;
 	        }
 
-	        // Inject controls HTML
+	        // Inject controls HTML (needs to be before captions, hence "afterbegin")
-	        if (is$1.element(container)) {
+	        var insertMethod = is$1.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML';
-	            target.appendChild(container);
+	        target[insertMethod]('afterbegin', container);
-	        } else if (container) {
-	            target.insertAdjacentHTML('beforeend', container);
-	        }
 
 	        // Find the elements if need be
 	        if (!is$1.element(this.elements.controls)) {
@@ -11162,6 +11159,7 @@ typeof navigator === "object" && (function (global, factory) {
 	            videoId: videoId,
 	            playerVars: {
 	                autoplay: player.config.autoplay ? 1 : 0, // Autoplay
+	                hl: player.config.hl, // iframe interface language
 	                controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
 	                rel: 0, // No related vids
 	                showinfo: 0, // Hide info
@@ -11212,6 +11210,10 @@ typeof navigator === "object" && (function (global, factory) {
 	                    triggerEvent.call(player, player.media, 'ratechange');
 	                },
 	                onReady: function onReady(event) {
+	                    // Bail if onReady has already been called. See issue #1108
+	                    if (is$1.function(player.media.play)) {
+	                        return;
+	                    }
 	                    // Get the instance
 	                    var instance = event.target;
 
@@ -12467,7 +12469,7 @@ typeof navigator === "object" && (function (global, factory) {
 	                    this.elements.container.className = '';
 
 	                    // Get attributes from URL and set config
-	                    if (url.searchParams.length) {
+	                    if (url.search.length) {
 	                        var truthy = ['1', 'true'];
 
 	                        if (truthy.includes(url.searchParams.get('autoplay'))) {
@@ -12481,6 +12483,7 @@ typeof navigator === "object" && (function (global, factory) {
 	                        // YouTube requires the playsinline in the URL
 	                        if (this.isYouTube) {
 	                            this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
+	                            this.config.hl = url.searchParams.get('hl');
 	                        } else {
 	                            this.config.playsinline = true;
 	                        }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.3.22",
+    "version": "3.3.23",
     "description":
         "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
@@ -42,7 +42,7 @@
         "babel-plugin-external-helpers": "^6.22.0",
         "babel-preset-env": "^1.7.0",
         "del": "^3.0.0",
-        "eslint": "^5.1.0",
+        "eslint": "^5.2.0",
         "eslint-config-airbnb-base": "^13.0.0",
         "eslint-config-prettier": "^2.9.0",
         "eslint-plugin-import": "^2.13.0",
@@ -57,7 +57,7 @@
         "gulp-header": "^2.0.5",
         "gulp-open": "^3.0.1",
         "gulp-postcss": "^7.0.1",
-        "gulp-rename": "^1.3.0",
+        "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-s3": "^0.11.0",
         "gulp-sass": "^4.0.1",
@@ -73,23 +73,23 @@
         "remark-cli": "^5.0.0",
         "remark-validate-links": "^7.0.0",
         "rollup-plugin-babel": "^3.0.7",
-        "rollup-plugin-commonjs": "^9.1.3",
+        "rollup-plugin-commonjs": "^9.1.4",
         "rollup-plugin-node-resolve": "^3.3.0",
         "run-sequence": "^2.2.1",
-        "stylelint": "^9.3.0",
+        "stylelint": "^9.4.0",
         "stylelint-config-prettier": "^3.3.0",
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^3.1.3",
+        "stylelint-scss": "^3.2.0",
         "stylelint-selector-bem-pattern": "^2.0.0",
         "through2": "^2.0.3"
     },
     "dependencies": {
         "babel-polyfill": "^6.26.0",
-        "custom-event-polyfill": "^0.3.0",
+        "custom-event-polyfill": "^1.0.6",
         "loadjs": "^3.5.4",
-        "raven-js": "^3.26.3",
+        "raven-js": "^3.26.4",
         "url-polyfill": "^1.0.13"
     }
 }