Single instance only

demo/index.html

@@ -51,7 +51,7 @@
                 </ul>
             </nav>
             <section>
-                <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin playsinline>
+                <video controls crossorigin playsinline poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
                     <!-- Video files -->
                     <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
 

demo/src/js/lib/sprite.js

@@ -0,0 +1,89 @@
+// ==========================================================================
+// SVG sprite loading and caching
+// This file should be at the top of the body to avoid a flash
+// Usage: loadSprite('https://cdn.com/path/to/sprite.svg', 'sprite-id');
+// The second argument is optional but prevents loading twice
+// ==========================================================================
+
+(function() {
+    window.loadSprite = function(url, id) {
+        if (typeof url !== "string") {
+            return;
+        }
+
+        var body = document.body;
+        var prefix = "cache-";
+        var hasId = typeof id === "string";
+        var isCached = false;
+
+        // Check for *actual* storage support
+        var cacheSupported = (function() {
+            if (!hasId) {
+                return false;
+            }
+            var test = '___test';
+            try {
+                localStorage.setItem(test, test);
+                localStorage.removeItem(test);
+                return true;
+            } catch (e) {
+                return false;
+            }
+        })();
+
+        function updateSprite(container, data) {
+            // Inject content
+            container.innerHTML = data;
+
+            // Inject the SVG to the body
+            body.insertBefore(container, body.childNodes[0]);
+        }
+
+        // Only load once
+        if (!hasId || document.querySelectorAll("#" + id).length === 0) {
+            // Create container
+            var container = document.createElement("div");
+            container.setAttribute("hidden", "");
+
+            if (hasId) {
+                container.setAttribute("id", id);
+            }
+
+            // Check in cache
+            if (cacheSupported) {
+                var cached = localStorage.getItem(prefix + id);
+                isCached = cached !== null;
+
+                if (isCached) {
+                    var data = JSON.parse(cached);
+                    updateSprite(container, data.content);
+                }
+            }
+
+            // ReSharper disable once InconsistentNaming
+            var xhr = new XMLHttpRequest();
+
+            // XHR for Chrome/Firefox/Opera/Safari
+            if ("withCredentials" in xhr) {
+                xhr.open("GET", url, true);
+            }
+            // Not supported
+            else {
+                return;
+            }
+
+            // Once loaded, inject to container and body
+            xhr.onload = function() {
+                if (cacheSupported) {
+                    localStorage.setItem(prefix + id, JSON.stringify({
+                        content: xhr.responseText
+                    }));
+                }
+
+                updateSprite(container, xhr.responseText);
+            };
+
+            xhr.send();
+        }
+    }
+})();

demo/src/js/main.js

@@ -4,16 +4,18 @@
 // Please see readme.md in the root or github.com/selz/plyr
 // ==========================================================================
 
-/*global plyr*/
+/*global Plyr*/
 
 // General functions
 (function() {
-    //document.body.addEventListener('ready', function(event) { console.log(event); });
+    document.body.addEventListener('ready', function(event) {
+        console.log(event);
+    });
 
     // Setup the player
-    var instances = plyr.setup({
+    var player = new Plyr('#player', {
         debug: true,
-        title: 'Video demo',
+        title: 'View From A Blue Moon',
         iconUrl: '../dist/plyr.svg',
         tooltips: {
             controls: true
@@ -35,25 +37,22 @@
             'airplay'
         ]
     });
-    plyr.loadSprite('dist/demo.svg');
-
-    // Plyr returns an array regardless
-    var player = instances[0];
+    window.loadSprite('dist/demo.svg', 'demo-sprite');
 
     // Setup type toggle
-    var buttons = document.querySelectorAll('[data-source]'),
-        types = {
-            video: 'video',
-            audio: 'audio',
-            youtube: 'youtube',
-            vimeo: 'vimeo'
-        },
-        currentType = window.location.hash.replace('#', ''),
-        historySupport = (window.history && window.history.pushState);
+    var buttons = document.querySelectorAll('[data-source]');
+    var types = {
+        video: 'video',
+        audio: 'audio',
+        youtube: 'youtube',
+        vimeo: 'vimeo'
+    };
+    var currentType = window.location.hash.replace('#', '');
+    var historySupport = (window.history && window.history.pushState);
 
     // Bind to each button
-    for (var i = buttons.length - 1; i >= 0; i--) {
-        buttons[i].addEventListener('click', function() {
+    [].forEach.call(buttons, function(button) {
+        button.addEventListener('click', function() {
             var type = this.getAttribute('data-source');
 
             newSource(type);
@@ -64,7 +63,7 @@
                 }, '', '#' + type);
             }
         });
-    }
+    });
 
     // List for backwards/forwards
     window.addEventListener('popstate', function(event) {
@@ -199,6 +198,6 @@ if (document.domain.indexOf('plyr.io') > -1) {
         a.src = g;
         m.parentNode.insertBefore(a, m)
     })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-    ga('create', 'UA-40881672-11', 'auto');
-    ga('send', 'pageview');
+    window.ga('create', 'UA-40881672-11', 'auto');
+    window.ga('send', 'pageview');
 }