Merge pull request #1136 from sampotts/develop

v3.3.23

changelog.md

@@ -1,3 +1,10 @@
+# v3.3.23
+
+-   Add support for YouTube's hl param (thanks @renaudleo)
+-   Fix for captions positioning when no controls (thanks @friday and @mjfwebb)
+-   Fix #1108: Make sure youtube.onReady doesn't run twice (thanks @friday)
+-   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"
     }
 }

readme.md

@@ -80,7 +80,7 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
 </audio>
 ```
 
-For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default `<iframe>` embeds. Below are some examples. The `plyr__video-embed` classname will make the embed responsive. You can add the `autoplay`, `loop` and `playsinline` (YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the `origin` should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.
+For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default `<iframe>` embeds. Below are some examples. The `plyr__video-embed` classname will make the embed responsive. You can add the `autoplay`, `loop`, `hl` (YouTube only) and `playsinline` (YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the `origin` should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.
 
 #### YouTube embed
 

src/js/controls.js

@@ -1455,12 +1455,9 @@ const controls = {
             target = this.elements.container;
         }
 
-        // Inject controls HTML
+        // Inject controls HTML (needs to be before captions, hence "afterbegin")
-        if (is.element(container)) {
+        const 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)) {

src/js/plugins/youtube.js

@@ -188,6 +188,7 @@ const youtube = {
             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
@@ -239,6 +240,10 @@ const youtube = {
                     triggerEvent.call(player, player.media, 'ratechange');
                 },
                 onReady(event) {
+                    // Bail if onReady has already been called. See issue #1108
+                    if (is.function(player.media.play)) {
+                        return;
+                    }
                     // Get the instance
                     const instance = event.target;
 

src/js/plyr.js

@@ -171,7 +171,7 @@ class Plyr {
                     this.elements.container.className = '';
 
                     // Get attributes from URL and set config
-                    if (url.searchParams.length) {
+                    if (url.search.length) {
                         const truthy = ['1', 'true'];
 
                         if (truthy.includes(url.searchParams.get('autoplay'))) {
@@ -185,6 +185,7 @@ class Plyr {
                         // 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;
                         }

src/sass/components/controls.scss

@@ -109,3 +109,11 @@
 .plyr--fullscreen-enabled [data-plyr='fullscreen'] {
     display: inline-block;
 }
+
+.plyr__controls:empty {
+    display: none;
+    
+    ~ .plyr__captions {
+        transform: translateY(0);
+    }
+}

src/sass/lib/mixins.scss

@@ -28,7 +28,6 @@
     border: 0;
     border-radius: ($plyr-range-track-height / 2);
     height: $plyr-range-track-height;
-    transition: all 0.3s ease;
     user-select: none;
 }