v3.0.2

demo/index.html

@@ -163,25 +163,25 @@
        c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"></path>
         </svg>
         <p>If you think Plyr's good,
-            <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
+            <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
                 target="_blank" data-shr-network="twitter">tweet it</a>
         </p>
     </aside>
 
     <!-- Polyfills -->
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent" crossorigin="anonymous"></script>
 
     <!-- Plyr core script -->
-    <script src="../dist/plyr.js"></script>
+    <script src="../dist/plyr.js" crossorigin="anonymous"></script>
 
     <!-- Sharing libary (https://shr.one) -->
-    <script src="https://cdn.shr.one/1.0.1/shr.js"></script>
+    <script src="https://cdn.shr.one/1.0.1/shr.js" crossorigin="anonymous"></script>
 
     <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
-    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
+    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async crossorigin="anonymous"></script>
 
     <!-- Docs script -->
-    <script src="dist/demo.js"></script>
+    <script src="dist/demo.js" crossorigin="anonymous"></script>
 </body>
 
 </html>

demo/src/js/demo.js

@@ -4,243 +4,257 @@
 // Please see readme.md in the root or github.com/sampotts/plyr
 // ==========================================================================
 
-document.addEventListener('DOMContentLoaded', () => {
+import Raven from 'raven-js';
-    if (window.shr) {
+
-        window.shr.setup({
+(() => {
-            count: {
+    const isLive = window.location.host === 'plyr.io';
-                classname: 'button__count',
+
-            },
+    // Raven / Sentry
-        });
+    // For demo site (https://plyr.io) only
+    if (isLive) {
+        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
     }
 
-    // Setup tab focus
+    document.addEventListener('DOMContentLoaded', () => {
-    const tabClassName = 'tab-focus';
+        Raven.context(() => {
+            if (window.shr) {
+                window.shr.setup({
+                    count: {
+                        classname: 'button__count',
+                    },
+                });
+            }
 
-    // Remove class on blur
+            // Setup tab focus
-    document.addEventListener('focusout', event => {
+            const tabClassName = 'tab-focus';
-        event.target.classList.remove(tabClassName);
-    });
 
-    // Add classname to tabbed elements
+            // Remove class on blur
-    document.addEventListener('keydown', event => {
+            document.addEventListener('focusout', event => {
-        if (event.keyCode !== 9) {
+                event.target.classList.remove(tabClassName);
-            return;
+            });
-        }
 
-        // Delay the adding of classname until the focus has changed
+            // Add classname to tabbed elements
-        // This event fires before the focusin event
+            document.addEventListener('keydown', event => {
-        setTimeout(() => {
+                if (event.keyCode !== 9) {
-            document.activeElement.classList.add(tabClassName);
+                    return;
-        }, 0);
+                }
-    });
 
-    // Setup the player
+                // Delay the adding of classname until the focus has changed
-    const player = new Plyr('#player', {
+                // This event fires before the focusin event
-        debug: true,
+                setTimeout(() => {
-        title: 'View From A Blue Moon',
+                    document.activeElement.classList.add(tabClassName);
-        iconUrl: '../dist/plyr.svg',
+                }, 0);
-        keyboard: {
+            });
-            global: true,
-        },
-        tooltips: {
-            controls: true,
-        },
-        captions: {
-            active: true,
-        },
-        keys: {
-            google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
-        },
-        ads: {
-            enabled: true,
-            publisherId: '918848828995742',
-        },
-    });
 
-    // Expose for tinkering in the console
+            // Setup the player
-    window.player = player;
+            const player = new Plyr('#player', {
+                debug: true,
+                title: 'View From A Blue Moon',
+                iconUrl: '../dist/plyr.svg',
+                keyboard: {
+                    global: true,
+                },
+                tooltips: {
+                    controls: true,
+                },
+                captions: {
+                    active: true,
+                },
+                keys: {
+                    google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
+                },
+                ads: {
+                    enabled: true,
+                    publisherId: '918848828995742',
+                },
+            });
 
-    // Setup type toggle
+            // Expose for tinkering in the console
-    const buttons = document.querySelectorAll('[data-source]');
+            window.player = player;
-    const types = {
-        video: 'video',
-        audio: 'audio',
-        youtube: 'youtube',
-        vimeo: 'vimeo',
-    };
-    let currentType = window.location.hash.replace('#', '');
-    const historySupport = window.history && window.history.pushState;
 
-    // Toggle class on an element
+            // Setup type toggle
-    function toggleClass(element, className, state) {
+            const buttons = document.querySelectorAll('[data-source]');
-        if (element) {
+            const types = {
-            element.classList[state ? 'add' : 'remove'](className);
+                video: 'video',
-        }
+                audio: 'audio',
-    }
+                youtube: 'youtube',
+                vimeo: 'vimeo',
+            };
+            let currentType = window.location.hash.replace('#', '');
+            const historySupport = window.history && window.history.pushState;
 
-    // Set a new source
+            // Toggle class on an element
-    function newSource(type, init) {
+            function toggleClass(element, className, state) {
-        // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
+                if (element) {
-        if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
+                    element.classList[state ? 'add' : 'remove'](className);
-            return;
+                }
-        }
+            }
 
-        switch (type) {
+            // Set a new source
-            case types.video:
+            function newSource(type, init) {
-                player.source = {
+                // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-                    type: 'video',
+                if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
-                    title: 'View From A Blue Moon',
+                    return;
-                    sources: [{
+                }
-                        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
-                        type: 'video/mp4',
-                    }],
-                    poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
-                    tracks: [
-                        {
-                            kind: 'captions',
-                            label: 'English',
-                            srclang: 'en',
-                            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
-                            default: true,
-                        },
-                        {
-                            kind: 'captions',
-                            label: 'French',
-                            srclang: 'fr',
-                            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
-                        },
-                    ],
-                };
 
-                break;
+                switch (type) {
+                    case types.video:
+                        player.source = {
+                            type: 'video',
+                            title: 'View From A Blue Moon',
+                            sources: [{
+                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
+                                type: 'video/mp4',
+                            }],
+                            poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
+                            tracks: [
+                                {
+                                    kind: 'captions',
+                                    label: 'English',
+                                    srclang: 'en',
+                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+                                    default: true,
+                                },
+                                {
+                                    kind: 'captions',
+                                    label: 'French',
+                                    srclang: 'fr',
+                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+                                },
+                            ],
+                        };
 
-            case types.audio:
+                        break;
-                player.source = {
-                    type: 'audio',
-                    title: 'Kishi Bashi – “It All Began With A Burst”',
-                    sources: [
-                        {
-                            src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
-                            type: 'audio/mp3',
-                        },
-                        {
-                            src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
-                            type: 'audio/ogg',
-                        },
-                    ],
-                };
 
-                break;
+                    case types.audio:
+                        player.source = {
+                            type: 'audio',
+                            title: 'Kishi Bashi – “It All Began With A Burst”',
+                            sources: [
+                                {
+                                    src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+                                    type: 'audio/mp3',
+                                },
+                                {
+                                    src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+                                    type: 'audio/ogg',
+                                },
+                            ],
+                        };
 
-            case types.youtube:
+                        break;
-                player.source = {
-                    type: 'video',
-                    title: 'View From A Blue Moon',
-                    sources: [{
-                        src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
-                        provider: 'youtube',
-                    }],
-                };
 
-                break;
+                    case types.youtube:
+                        player.source = {
+                            type: 'video',
+                            title: 'View From A Blue Moon',
+                            sources: [{
+                                src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+                                provider: 'youtube',
+                            }],
+                        };
 
-            case types.vimeo:
+                        break;
-                player.source = {
-                    type: 'video',
-                    sources: [{
-                        src: 'https://vimeo.com/76979871',
-                        provider: 'vimeo',
-                    }],
-                };
 
-                break;
+                    case types.vimeo:
+                        player.source = {
+                            type: 'video',
+                            sources: [{
+                                src: 'https://vimeo.com/76979871',
+                                provider: 'vimeo',
+                            }],
+                        };
 
-            default:
+                        break;
-                break;
-        }
 
-        // Set the current type for next time
+                    default:
-        currentType = type;
+                        break;
+                }
 
-        // Remove active classes
+                // Set the current type for next time
-        Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
+                currentType = type;
 
-        // Set active on parent
+                // Remove active classes
-        toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+                Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
 
-        // Show cite
+                // Set active on parent
-        Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
+                toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
-            cite.setAttribute('hidden', '');
-        });
-        document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
-    }
 
-    // Bind to each button
+                // Show cite
-    Array.from(buttons).forEach(button => {
+                Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
-        button.addEventListener('click', () => {
+                    cite.setAttribute('hidden', '');
-            const type = button.getAttribute('data-source');
+                });
+                document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
+            }
 
-            newSource(type);
+            // Bind to each button
+            Array.from(buttons).forEach(button => {
+                button.addEventListener('click', () => {
+                    const type = button.getAttribute('data-source');
 
+                    newSource(type);
+
+                    if (historySupport) {
+                        window.history.pushState({ type }, '', `#${type}`);
+                    }
+                });
+            });
+
+            // List for backwards/forwards
+            window.addEventListener('popstate', event => {
+                if (event.state && 'type' in event.state) {
+                    newSource(event.state.type);
+                }
+            });
+
+            // On load
             if (historySupport) {
-                window.history.pushState({ type }, '', `#${type}`);
+                const video = !currentType.length;
+
+                // If there's no current type set, assume video
+                if (video) {
+                    currentType = types.video;
+                }
+
+                // Replace current history state
+                if (currentType in types) {
+                    window.history.replaceState(
+                        {
+                            type: currentType,
+                        },
+                        '',
+                        video ? '' : `#${currentType}`,
+                    );
+                }
+
+                // If it's not video, load the source
+                if (currentType !== types.video) {
+                    newSource(currentType, true);
+                }
             }
         });
     });
 
-    // List for backwards/forwards
+    // Google analytics
-    window.addEventListener('popstate', event => {
+    // For demo site (https://plyr.io) only
-        if (event.state && 'type' in event.state) {
+    /* eslint-disable */
-            newSource(event.state.type);
+    if (isLive) {
-        }
+        (function(i, s, o, g, r, a, m) {
-    });
+            i.GoogleAnalyticsObject = r;
-
+            i[r] =
-    // On load
+                i[r] ||
-    if (historySupport) {
+                function() {
-        const video = !currentType.length;
+                    (i[r].q = i[r].q || []).push(arguments);
-
+                };
-        // If there's no current type set, assume video
+            i[r].l = 1 * new Date();
-        if (video) {
+            a = s.createElement(o);
-            currentType = types.video;
+            m = s.getElementsByTagName(o)[0];
-        }
+            a.async = 1;
-
+            a.src = g;
-        // Replace current history state
+            m.parentNode.insertBefore(a, m);
-        if (currentType in types) {
+        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-            window.history.replaceState(
+        window.ga('create', 'UA-40881672-11', 'auto');
-                {
+        window.ga('send', 'pageview');
-                    type: currentType,
-                },
-                '',
-                video ? '' : `#${currentType}`,
-            );
-        }
-
-        // If it's not video, load the source
-        if (currentType !== types.video) {
-            newSource(currentType, true);
-        }
     }
-});
+    /* eslint-enable */
-
+})();
-// Google analytics
-// For demo site (https://plyr.io) only
-/* eslint-disable */
-if (window.location.host === 'plyr.io') {
-    (function(i, s, o, g, r, a, m) {
-        i.GoogleAnalyticsObject = r;
-        i[r] =
-            i[r] ||
-            function() {
-                (i[r].q = i[r].q || []).push(arguments);
-            };
-        i[r].l = 1 * new Date();
-        a = s.createElement(o);
-        m = s.getElementsByTagName(o)[0];
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m);
-    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-    window.ga('create', 'UA-40881672-11', 'auto');
-    window.ga('send', 'pageview');
-}
-/* eslint-enable */

dist/plyr.js

@@ -77,7 +77,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.0-beta.20/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.2/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -330,6 +330,305 @@ var defaults = {
     }
 };
 
+var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+
+
+
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var loadjs_umd = createCommonjsModule(function (module, exports) {
+(function(root, factory) {
+  if (typeof undefined === 'function' && undefined.amd) {
+    undefined([], factory);
+  } else {
+    module.exports = factory();
+  }
+}(commonjsGlobal, function() {
+/**
+ * Global dependencies.
+ * @global {Object} document - DOM
+ */
+
+var devnull = function() {},
+    bundleIdCache = {},
+    bundleResultCache = {},
+    bundleCallbackQueue = {};
+
+
+/**
+ * Subscribe to bundle load event.
+ * @param {string[]} bundleIds - Bundle ids
+ * @param {Function} callbackFn - The callback function
+ */
+function subscribe(bundleIds, callbackFn) {
+  // listify
+  bundleIds = bundleIds.push ? bundleIds : [bundleIds];
+
+  var depsNotFound = [],
+      i = bundleIds.length,
+      numWaiting = i,
+      fn,
+      bundleId,
+      r,
+      q;
+
+  // define callback function
+  fn = function (bundleId, pathsNotFound) {
+    if (pathsNotFound.length) depsNotFound.push(bundleId);
+
+    numWaiting--;
+    if (!numWaiting) callbackFn(depsNotFound);
+  };
+
+  // register callback
+  while (i--) {
+    bundleId = bundleIds[i];
+
+    // execute callback if in result cache
+    r = bundleResultCache[bundleId];
+    if (r) {
+      fn(bundleId, r);
+      continue;
+    }
+
+    // add to callback queue
+    q = bundleCallbackQueue[bundleId] = bundleCallbackQueue[bundleId] || [];
+    q.push(fn);
+  }
+}
+
+
+/**
+ * Publish bundle load event.
+ * @param {string} bundleId - Bundle id
+ * @param {string[]} pathsNotFound - List of files not found
+ */
+function publish(bundleId, pathsNotFound) {
+  // exit if id isn't defined
+  if (!bundleId) return;
+
+  var q = bundleCallbackQueue[bundleId];
+
+  // cache result
+  bundleResultCache[bundleId] = pathsNotFound;
+
+  // exit if queue is empty
+  if (!q) return;
+
+  // empty callback queue
+  while (q.length) {
+    q[0](bundleId, pathsNotFound);
+    q.splice(0, 1);
+  }
+}
+
+
+/**
+ * Execute callbacks.
+ * @param {Object or Function} args - The callback args
+ * @param {string[]} depsNotFound - List of dependencies not found
+ */
+function executeCallbacks(args, depsNotFound) {
+  // accept function as argument
+  if (args.call) args = {success: args};
+
+  // success and error callbacks
+  if (depsNotFound.length) (args.error || devnull)(depsNotFound);
+  else (args.success || devnull)(args);
+}
+
+
+/**
+ * Load individual file.
+ * @param {string} path - The file path
+ * @param {Function} callbackFn - The callback function
+ */
+function loadFile(path, callbackFn, args, numTries) {
+  var doc = document,
+      async = args.async,
+      maxTries = (args.numRetries || 0) + 1,
+      beforeCallbackFn = args.before || devnull,
+      isCss,
+      e;
+
+  numTries = numTries || 0;
+
+  if (/(^css!|\.css$)/.test(path)) {
+    isCss = true;
+
+    // css
+    e = doc.createElement('link');
+    e.rel = 'stylesheet';
+    e.href = path.replace(/^css!/, '');  // remove "css!" prefix
+  } else {
+    // javascript
+    e = doc.createElement('script');
+    e.src = path;
+    e.async = async === undefined ? true : async;
+  }
+
+  e.onload = e.onerror = e.onbeforeload = function (ev) {
+    var result = ev.type[0];
+
+    // Note: The following code isolates IE using `hideFocus` and treats empty
+    // stylesheets as failures to get around lack of onerror support
+    if (isCss && 'hideFocus' in e) {
+      try {
+        if (!e.sheet.cssText.length) result = 'e';
+      } catch (x) {
+        // sheets objects created from load errors don't allow access to
+        // `cssText`
+        result = 'e';
+      }
+    }
+
+    // handle retries in case of load failure
+    if (result == 'e') {
+      // increment counter
+      numTries += 1;
+
+      // exit function and try again
+      if (numTries < maxTries) {
+        return loadFile(path, callbackFn, args, numTries);
+      }
+    }
+
+    // execute callback
+    callbackFn(path, result, ev.defaultPrevented);
+  };
+
+  // add to document (unless callback returns `false`)
+  if (beforeCallbackFn(path, e) !== false) doc.head.appendChild(e);
+}
+
+
+/**
+ * Load multiple files.
+ * @param {string[]} paths - The file paths
+ * @param {Function} callbackFn - The callback function
+ */
+function loadFiles(paths, callbackFn, args) {
+  // listify paths
+  paths = paths.push ? paths : [paths];
+
+  var numWaiting = paths.length,
+      x = numWaiting,
+      pathsNotFound = [],
+      fn,
+      i;
+
+  // define callback function
+  fn = function(path, result, defaultPrevented) {
+    // handle error
+    if (result == 'e') pathsNotFound.push(path);
+
+    // handle beforeload event. If defaultPrevented then that means the load
+    // will be blocked (ex. Ghostery/ABP on Safari)
+    if (result == 'b') {
+      if (defaultPrevented) pathsNotFound.push(path);
+      else return;
+    }
+
+    numWaiting--;
+    if (!numWaiting) callbackFn(pathsNotFound);
+  };
+
+  // load scripts
+  for (i=0; i < x; i++) loadFile(paths[i], fn, args);
+}
+
+
+/**
+ * Initiate script load and register bundle.
+ * @param {(string|string[])} paths - The file paths
+ * @param {(string|Function)} [arg1] - The bundleId or success callback
+ * @param {Function} [arg2] - The success or error callback
+ * @param {Function} [arg3] - The error callback
+ */
+function loadjs(paths, arg1, arg2) {
+  var bundleId,
+      args;
+
+  // bundleId (if string)
+  if (arg1 && arg1.trim) bundleId = arg1;
+
+  // args (default is {})
+  args = (bundleId ? arg2 : arg1) || {};
+
+  // throw error if bundle is already defined
+  if (bundleId) {
+    if (bundleId in bundleIdCache) {
+      throw "LoadJS";
+    } else {
+      bundleIdCache[bundleId] = true;
+    }
+  }
+
+  // load scripts
+  loadFiles(paths, function (pathsNotFound) {
+    // execute callbacks
+    executeCallbacks(args, pathsNotFound);
+
+    // publish bundle load event
+    publish(bundleId, pathsNotFound);
+  }, args);
+}
+
+
+/**
+ * Execute callbacks when dependencies have been satisfied.
+ * @param {(string|string[])} deps - List of bundle ids
+ * @param {Object} args - success/error arguments
+ */
+loadjs.ready = function ready(deps, args) {
+  // subscribe to bundle load event
+  subscribe(deps, function (depsNotFound) {
+    // execute callbacks
+    executeCallbacks(args, depsNotFound);
+  });
+
+  return loadjs;
+};
+
+
+/**
+ * Manually satisfy bundle dependencies.
+ * @param {string} bundleId - The bundle id
+ */
+loadjs.done = function done(bundleId) {
+  publish(bundleId, []);
+};
+
+
+/**
+ * Reset loadjs dependencies statuses
+ */
+loadjs.reset = function reset() {
+  bundleIdCache = {};
+  bundleResultCache = {};
+  bundleCallbackQueue = {};
+};
+
+
+/**
+ * Determine if bundle has already been defined
+ * @param String} bundleId - The bundle id
+ */
+loadjs.isDefined = function isDefined(bundleId) {
+  return bundleId in bundleIdCache;
+};
+
+
+// export
+return loadjs;
+
+}));
+});
+
 var asyncGenerator = function () {
   function AwaitValue(value) {
     this.value = value;
@@ -693,48 +992,10 @@ var utils = {
     // Load an external script
     loadScript: function loadScript(url) {
         return new Promise(function (resolve, reject) {
-            var current = document.querySelector('script[src="' + url + '"]');
+            loadjs_umd(url, {
-
+                success: resolve,
-            // Check script is not already referenced, if so wait for load
+                error: reject
-            if (current !== null) {
+            });
-                current.callbacks = current.callbacks || [];
-                current.callbacks.push(resolve);
-                return;
-            }
-
-            // Build the element
-            var element = document.createElement('script');
-
-            // Callback queue
-            element.callbacks = element.callbacks || [];
-            element.callbacks.push(resolve);
-
-            // Error queue
-            element.errors = element.errors || [];
-            element.errors.push(reject);
-
-            // Bind callback
-            element.addEventListener('load', function (event) {
-                element.callbacks.forEach(function (cb) {
-                    return cb.call(null, event);
-                });
-                element.callbacks = null;
-            }, false);
-
-            // Bind error handling
-            element.addEventListener('error', function (event) {
-                element.errors.forEach(function (err) {
-                    return err.call(null, event);
-                });
-                element.errors = null;
-            }, false);
-
-            // Set the URL after binding callback
-            element.src = url;
-
-            // Inject
-            var first = document.getElementsByTagName('script')[0];
-            first.parentNode.insertBefore(element, first);
         });
     },
 
@@ -4306,9 +4567,13 @@ var Storage = function () {
     createClass(Storage, [{
         key: 'get',
         value: function get$$1(key) {
+            if (!Storage.supported) {
+                return null;
+            }
+
             var store = window.localStorage.getItem(this.key);
 
-            if (!Storage.supported || utils.is.empty(store)) {
+            if (utils.is.empty(store)) {
                 return null;
             }
 
@@ -4346,17 +4611,18 @@ var Storage = function () {
     }], [{
         key: 'supported',
         get: function get$$1() {
-            if (!('localStorage' in window)) {
-                return false;
-            }
-
-            var test = '___test';
-
-            // Try to use it (it might be disabled, e.g. user is in private mode)
-            // see: https://github.com/sampotts/plyr/issues/131
             try {
+                if (!('localStorage' in window)) {
+                    return false;
+                }
+
+                var test = '___test';
+
+                // Try to use it (it might be disabled, e.g. user is in private mode)
+                // see: https://github.com/sampotts/plyr/issues/131
                 window.localStorage.setItem(test, test);
                 window.localStorage.removeItem(test);
+
                 return true;
             } catch (e) {
                 return false;
@@ -6021,7 +6287,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.20
+// plyr.js v3.0.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -6305,6 +6571,10 @@ var Plyr = function () {
         value: function play() {
             var _this2 = this;
 
+            if (!utils.is.function(this.media.play)) {
+                return null;
+            }
+
             // If ads are enabled, wait for them first
             if (this.ads.enabled && !this.ads.initialized) {
                 return this.ads.managerPromise.then(function () {
@@ -6325,7 +6595,7 @@ var Plyr = function () {
     }, {
         key: 'pause',
         value: function pause() {
-            if (!this.playing) {
+            if (!this.playing || !utils.is.function(this.media.pause)) {
                 return;
             }
 
@@ -6709,7 +6979,7 @@ var Plyr = function () {
                     clearInterval(this.timers.playing);
 
                     // Destroy YouTube API
-                    if (this.embed !== null) {
+                    if (this.embed !== null && utils.is.function(this.embed.destroy)) {
                         this.embed.destroy();
                     }
 
@@ -6885,7 +7155,7 @@ var Plyr = function () {
             var fauxDuration = parseInt(this.config.duration, 10);
 
             // True duration
-            var realDuration = Number(this.media.duration);
+            var realDuration = this.media ? Number(this.media.duration) : 0;
 
             // If custom duration is funky, use regular duration
             return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration;

dist/plyr.polyfilled.js

@@ -5268,7 +5268,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.0/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.2/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -5521,6 +5521,295 @@ var defaults = {
     }
 };
 
+var loadjs_umd = createCommonjsModule(function (module, exports) {
+(function(root, factory) {
+  if (typeof undefined === 'function' && undefined.amd) {
+    undefined([], factory);
+  } else {
+    module.exports = factory();
+  }
+}(commonjsGlobal, function() {
+/**
+ * Global dependencies.
+ * @global {Object} document - DOM
+ */
+
+var devnull = function() {},
+    bundleIdCache = {},
+    bundleResultCache = {},
+    bundleCallbackQueue = {};
+
+
+/**
+ * Subscribe to bundle load event.
+ * @param {string[]} bundleIds - Bundle ids
+ * @param {Function} callbackFn - The callback function
+ */
+function subscribe(bundleIds, callbackFn) {
+  // listify
+  bundleIds = bundleIds.push ? bundleIds : [bundleIds];
+
+  var depsNotFound = [],
+      i = bundleIds.length,
+      numWaiting = i,
+      fn,
+      bundleId,
+      r,
+      q;
+
+  // define callback function
+  fn = function (bundleId, pathsNotFound) {
+    if (pathsNotFound.length) depsNotFound.push(bundleId);
+
+    numWaiting--;
+    if (!numWaiting) callbackFn(depsNotFound);
+  };
+
+  // register callback
+  while (i--) {
+    bundleId = bundleIds[i];
+
+    // execute callback if in result cache
+    r = bundleResultCache[bundleId];
+    if (r) {
+      fn(bundleId, r);
+      continue;
+    }
+
+    // add to callback queue
+    q = bundleCallbackQueue[bundleId] = bundleCallbackQueue[bundleId] || [];
+    q.push(fn);
+  }
+}
+
+
+/**
+ * Publish bundle load event.
+ * @param {string} bundleId - Bundle id
+ * @param {string[]} pathsNotFound - List of files not found
+ */
+function publish(bundleId, pathsNotFound) {
+  // exit if id isn't defined
+  if (!bundleId) return;
+
+  var q = bundleCallbackQueue[bundleId];
+
+  // cache result
+  bundleResultCache[bundleId] = pathsNotFound;
+
+  // exit if queue is empty
+  if (!q) return;
+
+  // empty callback queue
+  while (q.length) {
+    q[0](bundleId, pathsNotFound);
+    q.splice(0, 1);
+  }
+}
+
+
+/**
+ * Execute callbacks.
+ * @param {Object or Function} args - The callback args
+ * @param {string[]} depsNotFound - List of dependencies not found
+ */
+function executeCallbacks(args, depsNotFound) {
+  // accept function as argument
+  if (args.call) args = {success: args};
+
+  // success and error callbacks
+  if (depsNotFound.length) (args.error || devnull)(depsNotFound);
+  else (args.success || devnull)(args);
+}
+
+
+/**
+ * Load individual file.
+ * @param {string} path - The file path
+ * @param {Function} callbackFn - The callback function
+ */
+function loadFile(path, callbackFn, args, numTries) {
+  var doc = document,
+      async = args.async,
+      maxTries = (args.numRetries || 0) + 1,
+      beforeCallbackFn = args.before || devnull,
+      isCss,
+      e;
+
+  numTries = numTries || 0;
+
+  if (/(^css!|\.css$)/.test(path)) {
+    isCss = true;
+
+    // css
+    e = doc.createElement('link');
+    e.rel = 'stylesheet';
+    e.href = path.replace(/^css!/, '');  // remove "css!" prefix
+  } else {
+    // javascript
+    e = doc.createElement('script');
+    e.src = path;
+    e.async = async === undefined ? true : async;
+  }
+
+  e.onload = e.onerror = e.onbeforeload = function (ev) {
+    var result = ev.type[0];
+
+    // Note: The following code isolates IE using `hideFocus` and treats empty
+    // stylesheets as failures to get around lack of onerror support
+    if (isCss && 'hideFocus' in e) {
+      try {
+        if (!e.sheet.cssText.length) result = 'e';
+      } catch (x) {
+        // sheets objects created from load errors don't allow access to
+        // `cssText`
+        result = 'e';
+      }
+    }
+
+    // handle retries in case of load failure
+    if (result == 'e') {
+      // increment counter
+      numTries += 1;
+
+      // exit function and try again
+      if (numTries < maxTries) {
+        return loadFile(path, callbackFn, args, numTries);
+      }
+    }
+
+    // execute callback
+    callbackFn(path, result, ev.defaultPrevented);
+  };
+
+  // add to document (unless callback returns `false`)
+  if (beforeCallbackFn(path, e) !== false) doc.head.appendChild(e);
+}
+
+
+/**
+ * Load multiple files.
+ * @param {string[]} paths - The file paths
+ * @param {Function} callbackFn - The callback function
+ */
+function loadFiles(paths, callbackFn, args) {
+  // listify paths
+  paths = paths.push ? paths : [paths];
+
+  var numWaiting = paths.length,
+      x = numWaiting,
+      pathsNotFound = [],
+      fn,
+      i;
+
+  // define callback function
+  fn = function(path, result, defaultPrevented) {
+    // handle error
+    if (result == 'e') pathsNotFound.push(path);
+
+    // handle beforeload event. If defaultPrevented then that means the load
+    // will be blocked (ex. Ghostery/ABP on Safari)
+    if (result == 'b') {
+      if (defaultPrevented) pathsNotFound.push(path);
+      else return;
+    }
+
+    numWaiting--;
+    if (!numWaiting) callbackFn(pathsNotFound);
+  };
+
+  // load scripts
+  for (i=0; i < x; i++) loadFile(paths[i], fn, args);
+}
+
+
+/**
+ * Initiate script load and register bundle.
+ * @param {(string|string[])} paths - The file paths
+ * @param {(string|Function)} [arg1] - The bundleId or success callback
+ * @param {Function} [arg2] - The success or error callback
+ * @param {Function} [arg3] - The error callback
+ */
+function loadjs(paths, arg1, arg2) {
+  var bundleId,
+      args;
+
+  // bundleId (if string)
+  if (arg1 && arg1.trim) bundleId = arg1;
+
+  // args (default is {})
+  args = (bundleId ? arg2 : arg1) || {};
+
+  // throw error if bundle is already defined
+  if (bundleId) {
+    if (bundleId in bundleIdCache) {
+      throw "LoadJS";
+    } else {
+      bundleIdCache[bundleId] = true;
+    }
+  }
+
+  // load scripts
+  loadFiles(paths, function (pathsNotFound) {
+    // execute callbacks
+    executeCallbacks(args, pathsNotFound);
+
+    // publish bundle load event
+    publish(bundleId, pathsNotFound);
+  }, args);
+}
+
+
+/**
+ * Execute callbacks when dependencies have been satisfied.
+ * @param {(string|string[])} deps - List of bundle ids
+ * @param {Object} args - success/error arguments
+ */
+loadjs.ready = function ready(deps, args) {
+  // subscribe to bundle load event
+  subscribe(deps, function (depsNotFound) {
+    // execute callbacks
+    executeCallbacks(args, depsNotFound);
+  });
+
+  return loadjs;
+};
+
+
+/**
+ * Manually satisfy bundle dependencies.
+ * @param {string} bundleId - The bundle id
+ */
+loadjs.done = function done(bundleId) {
+  publish(bundleId, []);
+};
+
+
+/**
+ * Reset loadjs dependencies statuses
+ */
+loadjs.reset = function reset() {
+  bundleIdCache = {};
+  bundleResultCache = {};
+  bundleCallbackQueue = {};
+};
+
+
+/**
+ * Determine if bundle has already been defined
+ * @param String} bundleId - The bundle id
+ */
+loadjs.isDefined = function isDefined(bundleId) {
+  return bundleId in bundleIdCache;
+};
+
+
+// export
+return loadjs;
+
+}));
+});
+
 var asyncGenerator = function () {
   function AwaitValue(value) {
     this.value = value;
@@ -5884,48 +6173,10 @@ var utils = {
     // Load an external script
     loadScript: function loadScript(url) {
         return new Promise(function (resolve, reject) {
-            var current = document.querySelector('script[src="' + url + '"]');
+            loadjs_umd(url, {
-
+                success: resolve,
-            // Check script is not already referenced, if so wait for load
+                error: reject
-            if (current !== null) {
+            });
-                current.callbacks = current.callbacks || [];
-                current.callbacks.push(resolve);
-                return;
-            }
-
-            // Build the element
-            var element = document.createElement('script');
-
-            // Callback queue
-            element.callbacks = element.callbacks || [];
-            element.callbacks.push(resolve);
-
-            // Error queue
-            element.errors = element.errors || [];
-            element.errors.push(reject);
-
-            // Bind callback
-            element.addEventListener('load', function (event) {
-                element.callbacks.forEach(function (cb) {
-                    return cb.call(null, event);
-                });
-                element.callbacks = null;
-            }, false);
-
-            // Bind error handling
-            element.addEventListener('error', function (event) {
-                element.errors.forEach(function (err) {
-                    return err.call(null, event);
-                });
-                element.errors = null;
-            }, false);
-
-            // Set the URL after binding callback
-            element.src = url;
-
-            // Inject
-            var first = document.getElementsByTagName('script')[0];
-            first.parentNode.insertBefore(element, first);
         });
     },
 
@@ -9497,9 +9748,13 @@ var Storage = function () {
     createClass(Storage, [{
         key: 'get',
         value: function get(key) {
+            if (!Storage.supported) {
+                return null;
+            }
+
             var store = window.localStorage.getItem(this.key);
 
-            if (!Storage.supported || utils.is.empty(store)) {
+            if (utils.is.empty(store)) {
                 return null;
             }
 
@@ -9537,17 +9792,18 @@ var Storage = function () {
     }], [{
         key: 'supported',
         get: function get() {
-            if (!('localStorage' in window)) {
-                return false;
-            }
-
-            var test = '___test';
-
-            // Try to use it (it might be disabled, e.g. user is in private mode)
-            // see: https://github.com/sampotts/plyr/issues/131
             try {
+                if (!('localStorage' in window)) {
+                    return false;
+                }
+
+                var test = '___test';
+
+                // Try to use it (it might be disabled, e.g. user is in private mode)
+                // see: https://github.com/sampotts/plyr/issues/131
                 window.localStorage.setItem(test, test);
                 window.localStorage.removeItem(test);
+
                 return true;
             } catch (e) {
                 return false;
@@ -11212,7 +11468,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0
+// plyr.js v3.0.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -11496,6 +11752,10 @@ var Plyr$1 = function () {
         value: function play() {
             var _this2 = this;
 
+            if (!utils.is.function(this.media.play)) {
+                return null;
+            }
+
             // If ads are enabled, wait for them first
             if (this.ads.enabled && !this.ads.initialized) {
                 return this.ads.managerPromise.then(function () {
@@ -11516,7 +11776,7 @@ var Plyr$1 = function () {
     }, {
         key: 'pause',
         value: function pause() {
-            if (!this.playing) {
+            if (!this.playing || !utils.is.function(this.media.pause)) {
                 return;
             }
 
@@ -11900,7 +12160,7 @@ var Plyr$1 = function () {
                     clearInterval(this.timers.playing);
 
                     // Destroy YouTube API
-                    if (this.embed !== null) {
+                    if (this.embed !== null && utils.is.function(this.embed.destroy)) {
                         this.embed.destroy();
                     }
 
@@ -12076,7 +12336,7 @@ var Plyr$1 = function () {
             var fauxDuration = parseInt(this.config.duration, 10);
 
             // True duration
-            var realDuration = Number(this.media.duration);
+            var realDuration = this.media ? Number(this.media.duration) : 0;
 
             // If custom duration is funky, use regular duration
             return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration;
@@ -12512,7 +12772,7 @@ var Plyr$1 = function () {
 
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.0-beta.20
+// plyr.js v3.0.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

gulpfile.js

@@ -70,10 +70,11 @@ const paths = {
         root: path.join(root, 'demo/'),
     },
     upload: [
-        path.join(root, `dist/*${minSuffix}.js`),
+        path.join(root, `dist/*${minSuffix}.*`),
         path.join(root, 'dist/*.css'),
         path.join(root, 'dist/*.svg'),
-        path.join(root, 'demo/dist/**'),
+        path.join(root, `demo/dist/*${minSuffix}.*`),
+        path.join(root, 'demo/dist/*.css'),
     ],
 };
 
@@ -303,22 +304,26 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
         console.log(`Uploading '${version}' to ${aws.cdn.domain}...`);
 
         // Upload to CDN
-        return gulp
+        return (
-            .src(paths.upload)
+            gulp
-            .pipe(
+                .src(paths.upload)
-                rename(p => {
+                .pipe(
-                    p.basename = p.basename.replace(minSuffix, ''); // eslint-disable-line
+                    rename(p => {
-                    p.dirname = p.dirname.replace('.', version); // eslint-disable-line
+                        p.basename = p.basename.replace(minSuffix, ''); // eslint-disable-line
-                }),
+                        p.dirname = p.dirname.replace('.', version); // eslint-disable-line
-            )
+                    }),
-            .pipe(
+                )
-                size({
+                // Remove min suffix from source map URL
-                    showFiles: true,
+                .pipe(replace(/sourceMappingURL=([\w-?.]+)/, (match, p1) => `sourceMappingURL=${p1.replace(minSuffix, '')}`))
-                    gzip: true,
+                .pipe(
-                }),
+                    size({
-            )
+                        showFiles: true,
-            .pipe(replace(localPath, versionPath))
+                        gzip: true,
-            .pipe(s3(aws.cdn, options.cdn));
+                    }),
+                )
+                .pipe(replace(localPath, versionPath))
+                .pipe(s3(aws.cdn, options.cdn))
+        );
     });
 
     // Publish to demo bucket

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.0.0",
+    "version": "3.0.2",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -13,7 +13,7 @@
         "babel-plugin-external-helpers": "^6.22.0",
         "babel-preset-env": "^1.6.1",
         "del": "^3.0.0",
-        "eslint": "^4.18.2",
+        "eslint": "^4.19.0",
         "eslint-config-airbnb-base": "^12.1.0",
         "eslint-config-prettier": "^2.9.0",
         "eslint-plugin-import": "^2.9.0",
@@ -35,6 +35,8 @@
         "gulp-svgstore": "^6.1.1",
         "gulp-uglify-es": "^1.0.1",
         "gulp-util": "^3.0.8",
+        "prettier-eslint": "^8.8.1",
+        "prettier-stylelint": "^0.4.2",
         "rollup-plugin-babel": "^3.0.3",
         "rollup-plugin-commonjs": "^8.4.1",
         "rollup-plugin-node-resolve": "^3.2.0",
@@ -65,6 +67,8 @@
     "author": "Sam Potts <sam@potts.es>",
     "dependencies": {
         "babel-polyfill": "^6.26.0",
-        "custom-event-polyfill": "^0.3.0"
+        "custom-event-polyfill": "^0.3.0",
+        "loadjs": "^3.5.2",
+        "raven-js": "^3.23.3"
     }
 }

readme.md

@@ -4,7 +4,7 @@ A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo medi
 
 [Checkout the demo](https://plyr.io) - [Donate to support Plyr](#donate) - [Chat on Slack](https://bit.ly/plyr-slack)
 
-[![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png)](https://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png?v=3)](https://plyr.io)
 
 ## Features
 
@@ -124,7 +124,7 @@ See [initialising](#initialising) for more information on advanced setups.
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/3.0.0/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.0.2/plyr.js"></script>
 ```
 
 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -140,17 +140,17 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.0.2/plyr.css">
 ```
 
 ### SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.2/plyr.svg`.
 
 ## Ads
 
-Plyr has partnered up with [ai.vi](http://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy:
+Plyr has partnered up with [vi.ai](http://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy:
 
 *   [Sign up for a vi.ai account](http://vi.ai/publisher-video-monetization/?aid=plyrio)
 *   Grab your publisher ID from the code snippet
@@ -703,7 +703,7 @@ Credit to the PayPal HTML5 Video player from which Plyr's caption functionality
 
 ## Thanks
 
-[![Fastly](https://www.fastly.com/sites/all/themes/custom/fastly2016/logo.png)](https://www.fastly.com/)
+[![Fastly](https://cdn.plyr.io/static/demo/fastly-logo.png)](https://www.fastly.com/)
 
 Massive thanks to [Fastly](https://www.fastly.com/) for providing the CDN services.
 

src/js/defaults.js

@@ -56,7 +56,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.0/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.2/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0
+// plyr.js v3.0.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -315,6 +315,10 @@ class Plyr {
      * Play the media, or play the advertisement (if they are not blocked)
      */
     play() {
+        if (!utils.is.function(this.media.play)) {
+            return null;
+        }
+
         // If ads are enabled, wait for them first
         if (this.ads.enabled && !this.ads.initialized) {
             return this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
@@ -328,7 +332,7 @@ class Plyr {
      * Pause the media
      */
     pause() {
-        if (!this.playing) {
+        if (!this.playing || !utils.is.function(this.media.pause)) {
             return;
         }
 
@@ -470,7 +474,7 @@ class Plyr {
         const fauxDuration = parseInt(this.config.duration, 10);
 
         // True duration
-        const realDuration = Number(this.media.duration);
+        const realDuration = this.media ? Number(this.media.duration) : 0;
 
         // If custom duration is funky, use regular duration
         return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration;
@@ -1135,7 +1139,7 @@ class Plyr {
                 clearInterval(this.timers.playing);
 
                 // Destroy YouTube API
-                if (this.embed !== null) {
+                if (this.embed !== null && utils.is.function(this.embed.destroy)) {
                     this.embed.destroy();
                 }
 

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.0
+// plyr.js v3.0.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/storage.js

@@ -12,17 +12,18 @@ class Storage {
 
     // Check for actual support (see if we can use it)
     static get supported() {
-        if (!('localStorage' in window)) {
-            return false;
-        }
-
-        const test = '___test';
-
-        // Try to use it (it might be disabled, e.g. user is in private mode)
-        // see: https://github.com/sampotts/plyr/issues/131
         try {
+            if (!('localStorage' in window)) {
+                return false;
+            }
+
+            const test = '___test';
+
+            // Try to use it (it might be disabled, e.g. user is in private mode)
+            // see: https://github.com/sampotts/plyr/issues/131
             window.localStorage.setItem(test, test);
             window.localStorage.removeItem(test);
+
             return true;
         } catch (e) {
             return false;
@@ -30,9 +31,13 @@ class Storage {
     }
 
     get(key) {
+        if (!Storage.supported) {
+            return null;
+        }
+
         const store = window.localStorage.getItem(this.key);
 
-        if (!Storage.supported || utils.is.empty(store)) {
+        if (utils.is.empty(store)) {
             return null;
         }
 

src/js/utils.js

@@ -2,6 +2,8 @@
 // Plyr utils
 // ==========================================================================
 
+import loadjs from 'loadjs';
+
 import support from './support';
 import { providers } from './types';
 
@@ -97,11 +99,10 @@ const utils = {
                     if (responseType === 'text') {
                         try {
                             resolve(JSON.parse(request.responseText));
-                        } catch(e) {
+                        } catch (e) {
                             resolve(request.responseText);
                         }
-                    }
+                    } else {
-                    else {
                         resolve(request.response);
                     }
                 });
@@ -125,52 +126,10 @@ const utils = {
     // Load an external script
     loadScript(url) {
         return new Promise((resolve, reject) => {
-            const current = document.querySelector(`script[src="${url}"]`);
+            loadjs(url, {
-
+                success: resolve,
-            // Check script is not already referenced, if so wait for load
+                error: reject,
-            if (current !== null) {
+            });
-                current.callbacks = current.callbacks || [];
-                current.callbacks.push(resolve);
-                return;
-            }
-
-            // Build the element
-            const element = document.createElement('script');
-
-            // Callback queue
-            element.callbacks = element.callbacks || [];
-            element.callbacks.push(resolve);
-
-            // Error queue
-            element.errors = element.errors || [];
-            element.errors.push(reject);
-
-            // Bind callback
-            element.addEventListener(
-                'load',
-                event => {
-                    element.callbacks.forEach(cb => cb.call(null, event));
-                    element.callbacks = null;
-                },
-                false,
-            );
-
-            // Bind error handling
-            element.addEventListener(
-                'error',
-                event => {
-                    element.errors.forEach(err => err.call(null, event));
-                    element.errors = null;
-                },
-                false,
-            );
-
-            // Set the URL after binding callback
-            element.src = url;
-
-            // Inject
-            const first = document.getElementsByTagName('script')[0];
-            first.parentNode.insertBefore(element, first);
         });
     },
 
@@ -576,7 +535,7 @@ const utils = {
     // Toggle event listener
     toggleListener(elements, event, callback, toggle, passive, capture) {
         // Bail if no elemetns, event, or callback
-        if (utils.is.empty(elements)  || utils.is.empty(event) || !utils.is.function(callback)) {
+        if (utils.is.empty(elements) || utils.is.empty(event) || !utils.is.function(callback)) {
             return;
         }