Improve Sprite checking (fixes #827)

dist/plyr.js

@@ -1010,7 +1010,16 @@ var utils = {
         var hasId = utils.is.string(id);
         var isCached = false;
 
-        function updateSprite(data) {
+        var exists = function exists() {
+            return document.querySelectorAll('#' + id).length;
+        };
+
+        function injectSprite(data) {
+            // Check again incase of race condition
+            if (hasId && exists()) {
+                return;
+            }
+
             // Inject content
             this.innerHTML = data;
 
@@ -1018,8 +1027,8 @@ var utils = {
             document.body.insertBefore(this, document.body.childNodes[0]);
         }
 
-        // Only load once
+        // Only load once if ID set
-        if (!hasId || !document.querySelectorAll('#' + id).length) {
+        if (!hasId || !exists()) {
             // Create container
             var container = document.createElement('div');
             utils.toggleHidden(container, true);
@@ -1035,7 +1044,7 @@ var utils = {
 
                 if (isCached) {
                     var data = JSON.parse(cached);
-                    updateSprite.call(container, data.content);
+                    injectSprite.call(container, data.content);
                     return;
                 }
             }
@@ -1052,7 +1061,7 @@ var utils = {
                     }));
                 }
 
-                updateSprite.call(container, result);
+                injectSprite.call(container, result);
             }).catch(function () {});
         }
     },

dist/plyr.polyfilled.js

@@ -6191,7 +6191,16 @@ var utils = {
         var hasId = utils.is.string(id);
         var isCached = false;
 
-        function updateSprite(data) {
+        var exists = function exists() {
+            return document.querySelectorAll('#' + id).length;
+        };
+
+        function injectSprite(data) {
+            // Check again incase of race condition
+            if (hasId && exists()) {
+                return;
+            }
+
             // Inject content
             this.innerHTML = data;
 
@@ -6199,8 +6208,8 @@ var utils = {
             document.body.insertBefore(this, document.body.childNodes[0]);
         }
 
-        // Only load once
+        // Only load once if ID set
-        if (!hasId || !document.querySelectorAll('#' + id).length) {
+        if (!hasId || !exists()) {
             // Create container
             var container = document.createElement('div');
             utils.toggleHidden(container, true);
@@ -6216,7 +6225,7 @@ var utils = {
 
                 if (isCached) {
                     var data = JSON.parse(cached);
-                    updateSprite.call(container, data.content);
+                    injectSprite.call(container, data.content);
                     return;
                 }
             }
@@ -6233,7 +6242,7 @@ var utils = {
                     }));
                 }
 
-                updateSprite.call(container, result);
+                injectSprite.call(container, result);
             }).catch(function () {});
         }
     },

src/js/utils.js

@@ -143,7 +143,14 @@ const utils = {
         const hasId = utils.is.string(id);
         let isCached = false;
 
-        function updateSprite(data) {
+        const exists = () => document.querySelectorAll(`#${id}`).length;
+
+        function injectSprite(data) {
+            // Check again incase of race condition
+            if (hasId && exists()) {
+                return;
+            }
+
             // Inject content
             this.innerHTML = data;
 
@@ -151,8 +158,8 @@ const utils = {
             document.body.insertBefore(this, document.body.childNodes[0]);
         }
 
-        // Only load once
+        // Only load once if ID set
-        if (!hasId || !document.querySelectorAll(`#${id}`).length) {
+        if (!hasId || !exists()) {
             // Create container
             const container = document.createElement('div');
             utils.toggleHidden(container, true);
@@ -168,7 +175,7 @@ const utils = {
 
                 if (isCached) {
                     const data = JSON.parse(cached);
-                    updateSprite.call(container, data.content);
+                    injectSprite.call(container, data.content);
                     return;
                 }
             }
@@ -190,7 +197,7 @@ const utils = {
                         );
                     }
 
-                    updateSprite.call(container, result);
+                    injectSprite.call(container, result);
                 })
                 .catch(() => {});
         }