Single instance only

bundles.json

@@ -17,6 +17,7 @@
         "js": {
             "demo.js": [
                 "demo/src/js/lib/classlist.js",
+                "demo/src/js/lib/sprite.js",
                 "demo/src/js/main.js"
             ]
         }

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');
+    window.loadSprite('dist/demo.svg', 'demo-sprite');
-
-    // Plyr returns an array regardless
-    var player = instances[0];
 
     // Setup type toggle
-    var buttons = document.querySelectorAll('[data-source]'),
+    var buttons = document.querySelectorAll('[data-source]');
-        types = {
+    var types = {
         video: 'video',
         audio: 'audio',
         youtube: 'youtube',
         vimeo: 'vimeo'
-        },
+    };
-        currentType = window.location.hash.replace('#', ''),
+    var currentType = window.location.hash.replace('#', '');
-        historySupport = (window.history && window.history.pushState);
+    var historySupport = (window.history && window.history.pushState);
 
     // Bind to each button
-    for (var i = buttons.length - 1; i >= 0; i--) {
+    [].forEach.call(buttons, function(button) {
-        buttons[i].addEventListener('click', function() {
+        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');
+    window.ga('create', 'UA-40881672-11', 'auto');
-    ga('send', 'pageview');
+    window.ga('send', 'pageview');
 }

notes.md

@@ -1,21 +1,26 @@
 ### Todo
 
 #### To build
-[x] Get list of subtitles/captions available (HTML5)
+[x] Get list of subtitles/captions available (HTML5, Vimeo)
 [x] Add preferred quality option into config
 [ ] Update quality options on YouTube play (can't get up front?!)
 [ ] Update speed options on YouTube load
-[ ] Get quality options for HTML5 somehow (multi source?)
+[ ] Finish and test PiP (need MacOS Sierra)
-[ ] Finish and test PiP (need Sierra VM)
+[ ] Finish and test AirPlay (need MacOS Sierra)
-[ ] Finish and test AirPlay (need Sierra VM)
-[ ] Download button - grab first <source> or src attribute (or maybe use currentSrc?) for HTML5 and links for embedded players
 [ ] Controls hide/show events
 [ ] Test custom controls still works
+[ ] Tidy up small UI for iOS inline
+[ ] Finish new loop setup and UI
+[ ] Toggle settings menu
+
+#### Later
+[ ] Get quality options for HTML5 somehow (multi source?)
+[ ] Download button - grab first <source> or src attribute (or maybe use currentSrc?) for HTML5 and links for embedded players
 
 #### Bugs
 [ ] Fix audio setup bug when calling `.setup()` again
 [ ] Fix events on unsupported devices (iOS, old IE)
-[ ] Fix YouTube rights blocking (origin perhaps?)
+[x] Fix YouTube rights blocking (origin perhaps?)
 
 # Notes
 - No quality HTML5 support (yet)
@@ -25,11 +30,13 @@
 - No PiP or AirPlay for Vimeo/YouTube
 - Settings won't be supported for custom controls (coming soon, need to work on templating)
 - Added `playsinline` support for iOS 10
+- Embed setup now accepts an <iframe> as the target element for true progressive enhancement
 
 #### Breaking changes
 - New config options for loop
 - Selectors changes (new `input` and `display` object) - DOCUMENT
 - Custom HTML option now `controls` which accepts a string (HTML), a function (your own template engine) or array (use built in controls)
+- .setup() is removed in favour of a constructor
 
 ## Added
 - Seek i8n label

readme.md

@@ -783,15 +783,10 @@ These events also bubble up the DOM. The event target will be the container elem
     </tr>
   </thead>
   <tbody>
-    <tr>
-      <td><code>setup</code></td>
-      <td></td>
-      <td>When an initial setup has completed</td>
-    </tr>
     <tr>
       <td><code>ready</code></td>
       <td></td>
-      <td>Triggered when the instance is ready for API use and external APIs are ready (in the case of YouTube and Vimeo).</td>
+      <td>Triggered when the instance is ready for API calls.</td>
     </tr>
   	<tr>
   		<td><code>canplay</code></td>
@@ -1057,9 +1052,6 @@ If a User Agent is disabled but supports `<video>` and `<audio>` natively, it wi
 
 Any unsupported browsers will display links to download the media if the correct html is used.
 
-### Checking for support
-There's an API method for checking support. You can call `plyr.supported()` and optionally pass a type to it, e.g. `plyr.supported("video")`. It will return an object with two keys; `basic` meaning there's basic support for that media type (or both if no type is passed) and `full` meaning there's full support for plyr.
-
 ## Issues
 If you find anything weird with Plyr, please let us know using the GitHub issues tracker.