Fix for local storage issue

# Conflicts:
#	readme.md

.stylelintrc.json

@@ -1,6 +1,6 @@
 {
     "plugins": ["stylelint-selector-bem-pattern", "stylelint-scss"],
-    "extends": ["stylelint-config-sass-guidelines", "stylelint-config-recommended", "stylelint-config-prettier"],
+    "extends": ["stylelint-config-recommended", "stylelint-config-sass-guidelines", "stylelint-config-prettier"],
     "rules": {
         "selector-class-pattern": null,
         "selector-no-qualifying-type": [

demo/index.html

@@ -163,7 +163,7 @@
        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>
@@ -181,7 +181,7 @@
     <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></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,242 +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,
-        },
-    });
 
-    // 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.17/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.1/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -326,7 +326,7 @@ var defaults = {
     // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
     ads: {
         enabled: false,
-        publisherId: '918848828995742'
+        publisherId: ''
     }
 };
 
@@ -1260,6 +1260,7 @@ var utils = {
         if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {
             return 0;
         }
+
         return (current / max * 100).toFixed(2);
     },
 
@@ -1511,13 +1512,9 @@ var support = {
                 break;
 
             case 'youtube:video':
-                api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
-                break;
-
             case 'vimeo:video':
                 api = true;
-                ui = support.rangeInput && !browser.isIPhone;
+                ui = support.rangeInput && (!browser.isIPhone || playsInline);
                 break;
 
             default:
@@ -2179,7 +2176,7 @@ var ui = {
         var _this = this;
 
         // Re-attach media element listeners
-        // TODO: Use event bubbling
+        // TODO: Use event bubbling?
         this.listeners.media();
 
         // Don't setup interface if no support
@@ -2398,8 +2395,6 @@ var ui = {
 
     // Update <progress> elements
     updateProgress: function updateProgress(event) {
-        var _this4 = this;
-
         if (!this.supported.ui || !utils.is.event(event)) {
             return;
         }
@@ -2423,22 +2418,7 @@ var ui = {
                 // Check buffer status
                 case 'playing':
                 case 'progress':
-                    value = function () {
+                    ui.setProgress.call(this, this.elements.display.buffer, this.buffered * 100);
-                        var buffered = _this4.media.buffered;
-
-
-                        if (buffered && buffered.length) {
-                            // HTML5
-                            return utils.getPercentage(buffered.end(0), _this4.duration);
-                        } else if (utils.is.number(buffered)) {
-                            // YouTube returns between 0 and 1
-                            return buffered * 100;
-                        }
-
-                        return 0;
-                    }();
-
-                    ui.setProgress.call(this, this.elements.display.buffer, value);
 
                     break;
 
@@ -3883,7 +3863,9 @@ var Listeners = function () {
 
     }, {
         key: 'global',
-        value: function global(toggle) {
+        value: function global() {
+            var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
             // Keyboard shortcuts
             if (this.player.config.keyboard.global) {
                 utils.toggleListener(window, 'keydown keyup', this.handleKey, toggle, false);
@@ -4294,6 +4276,14 @@ var Listeners = function () {
                 });
             }, false);
         }
+
+        // Reset on destroy
+
+    }, {
+        key: 'clear',
+        value: function clear() {
+            this.global(false);
+        }
     }]);
     return Listeners;
 }();
@@ -4316,9 +4306,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;
             }
 
@@ -4356,17 +4350,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;
@@ -4565,7 +4560,7 @@ var Ads = function () {
             var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
             if (!start) {
-                window.clearInterval(this.countdownTimer);
+                clearInterval(this.countdownTimer);
                 this.elements.container.removeAttribute('data-badge-text');
                 return;
             }
@@ -4576,7 +4571,7 @@ var Ads = function () {
                 _this5.elements.container.setAttribute('data-badge-text', label);
             };
 
-            this.countdownTimer = window.setInterval(update, 100);
+            this.countdownTimer = setInterval(update, 100);
         }
 
         /**
@@ -5351,10 +5346,10 @@ var youtube = {
                     utils.dispatchEvent.call(player, player.media, 'durationchange');
 
                     // Reset timer
-                    window.clearInterval(player.timers.buffering);
+                    clearInterval(player.timers.buffering);
 
                     // Setup buffering
-                    player.timers.buffering = window.setInterval(function () {
+                    player.timers.buffering = setInterval(function () {
                         // Get loaded % from YouTube
                         player.media.buffered = instance.getVideoLoadedFraction();
 
@@ -5368,7 +5363,7 @@ var youtube = {
 
                         // Bail if we're at 100%
                         if (player.media.buffered === 1) {
-                            window.clearInterval(player.timers.buffering);
+                            clearInterval(player.timers.buffering);
 
                             // Trigger event
                             utils.dispatchEvent.call(player, player.media, 'canplaythrough');
@@ -5385,7 +5380,7 @@ var youtube = {
                     var instance = event.target;
 
                     // Reset timer
-                    window.clearInterval(player.timers.playing);
+                    clearInterval(player.timers.playing);
 
                     // Handle events
                     // -1   Unstarted
@@ -5425,7 +5420,7 @@ var youtube = {
                             utils.dispatchEvent.call(player, player.media, 'playing');
 
                             // Poll to get playback progress
-                            player.timers.playing = window.setInterval(function () {
+                            player.timers.playing = setInterval(function () {
                                 utils.dispatchEvent.call(player, player.media, 'timeupdate');
                             }, 50);
 
@@ -6031,7 +6026,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.17
+// plyr.js v3.0.1
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -6287,7 +6282,7 @@ var Plyr = function () {
         this.listeners.container();
 
         // Global listeners
-        this.listeners.global(true);
+        this.listeners.global();
 
         // Setup fullscreen
         this.fullscreen = new Fullscreen(this);
@@ -6315,6 +6310,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 () {
@@ -6335,7 +6334,7 @@ var Plyr = function () {
     }, {
         key: 'pause',
         value: function pause() {
-            if (!this.playing) {
+            if (!this.playing || !utils.is.function(this.media.pause)) {
                 return;
             }
 
@@ -6547,7 +6546,7 @@ var Plyr = function () {
             }
 
             // Clear timer on every call
-            window.clearTimeout(this.timers.controls);
+            clearTimeout(this.timers.controls);
 
             // If the mouse is not over the controls, set a timeout to hide them
             if (show || this.paused || this.loading) {
@@ -6638,6 +6637,10 @@ var Plyr = function () {
 
             var soft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
+            if (!this.ready) {
+                return;
+            }
+
             var done = function done() {
                 // Reset overflow (incase destroyed while in fullscreen)
                 document.body.style.overflow = '';
@@ -6666,12 +6669,12 @@ var Plyr = function () {
                         callback();
                     }
                 } else {
+                    // Unbind listeners
+                    _this4.listeners.clear();
+
                     // Replace the container with the original element provided
                     utils.replaceElement(_this4.elements.original, _this4.elements.container);
 
-                    // Unbind global listeners
-                    _this4.listeners.global(false);
-
                     // Event
                     utils.dispatchEvent.call(_this4, _this4.elements.original, 'destroyed', true);
 
@@ -6680,15 +6683,27 @@ var Plyr = function () {
                         callback.call(_this4.elements.original);
                     }
 
-                    // Clear for GC
+                    // Reset state
-                    _this4.elements = null;
+                    _this4.ready = false;
+
+                    // Clear for garbage collection
+                    setTimeout(function () {
+                        _this4.elements = null;
+                        _this4.media = null;
+                    }, 200);
                 }
             };
 
+            // Stop playback
+            this.stop();
+
             // Type specific stuff
             switch (this.provider + ':' + this.type) {
                 case 'html5:video':
                 case 'html5:audio':
+                    // Clear timeout
+                    clearTimeout(this.timers.loading);
+
                     // Restore native video controls
                     ui.toggleNativeControls.call(this, true);
 
@@ -6699,8 +6714,8 @@ var Plyr = function () {
 
                 case 'youtube:video':
                     // Clear timers
-                    window.clearInterval(this.timers.buffering);
+                    clearInterval(this.timers.buffering);
-                    window.clearInterval(this.timers.playing);
+                    clearInterval(this.timers.playing);
 
                     // Destroy YouTube API
                     if (this.embed !== null) {
@@ -6750,37 +6765,37 @@ var Plyr = function () {
     }, {
         key: 'isHTML5',
         get: function get$$1() {
-            return this.provider === providers.html5;
+            return Boolean(this.provider === providers.html5);
         }
     }, {
         key: 'isEmbed',
         get: function get$$1() {
-            return this.isYouTube || this.isVimeo;
+            return Boolean(this.isYouTube || this.isVimeo);
         }
     }, {
         key: 'isYouTube',
         get: function get$$1() {
-            return this.provider === providers.youtube;
+            return Boolean(this.provider === providers.youtube);
         }
     }, {
         key: 'isVimeo',
         get: function get$$1() {
-            return this.provider === providers.vimeo;
+            return Boolean(this.provider === providers.vimeo);
         }
     }, {
         key: 'isVideo',
         get: function get$$1() {
-            return this.type === types.video;
+            return Boolean(this.type === types.video);
         }
     }, {
         key: 'isAudio',
         get: function get$$1() {
-            return this.type === types.audio;
+            return Boolean(this.type === types.audio);
         }
     }, {
         key: 'paused',
         get: function get$$1() {
-            return this.media.paused;
+            return Boolean(this.media.paused);
         }
 
         /**
@@ -6790,7 +6805,7 @@ var Plyr = function () {
     }, {
         key: 'playing',
         get: function get$$1() {
-            return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true);
+            return Boolean(!this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
         }
 
         /**
@@ -6800,7 +6815,7 @@ var Plyr = function () {
     }, {
         key: 'ended',
         get: function get$$1() {
-            return this.media.ended;
+            return Boolean(this.media.ended);
         }
     }, {
         key: 'currentTime',
@@ -6833,6 +6848,31 @@ var Plyr = function () {
             return Number(this.media.currentTime);
         }
 
+        /**
+         * Get buffered
+         */
+
+    }, {
+        key: 'buffered',
+        get: function get$$1() {
+            var buffered = this.media.buffered;
+
+            // YouTube / Vimeo return a float between 0-1
+
+            if (utils.is.number(buffered)) {
+                return buffered;
+            }
+
+            // HTML5
+            // TODO: Handle buffered chunks of the media
+            // (i.e. seek to another section buffers only that section)
+            if (buffered && buffered.length && this.duration > 0) {
+                return buffered.end(0) / this.duration;
+            }
+
+            return 0;
+        }
+
         /**
          * Get seeking status
          */
@@ -6840,7 +6880,7 @@ var Plyr = function () {
     }, {
         key: 'seeking',
         get: function get$$1() {
-            return this.media.seeking;
+            return Boolean(this.media.seeking);
         }
 
         /**
@@ -6912,7 +6952,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.volume;
+            return Number(this.media.volume);
         }
     }, {
         key: 'muted',
@@ -6941,7 +6981,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.muted;
+            return Boolean(this.media.muted);
         }
 
         /**
@@ -6961,12 +7001,12 @@ var Plyr = function () {
             }
 
             // Get audio tracks
-            return this.media.mozHasAudio || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
+            return Boolean(this.media.mozHasAudio) || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
         }
 
         /**
          * Set playback speed
-         * @param {decimal} speed - the speed of playback (0.5-2.0)
+         * @param {number} speed - the speed of playback (0.5-2.0)
          */
 
     }, {
@@ -7011,7 +7051,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.playbackRate;
+            return Number(this.media.playbackRate);
         }
 
         /**
@@ -7114,7 +7154,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.loop;
+            return Boolean(this.media.loop);
         }
 
         /**
@@ -7183,7 +7223,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.config.autoplay;
+            return Boolean(this.config.autoplay);
         }
     }, {
         key: 'language',

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-beta.18/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.1/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -5517,7 +5517,7 @@ var defaults = {
     // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
     ads: {
         enabled: false,
-        publisherId: '918848828995742'
+        publisherId: ''
     }
 };
 
@@ -6451,6 +6451,7 @@ var utils = {
         if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {
             return 0;
         }
+
         return (current / max * 100).toFixed(2);
     },
 
@@ -6702,13 +6703,9 @@ var support = {
                 break;
 
             case 'youtube:video':
-                api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
-                break;
-
             case 'vimeo:video':
                 api = true;
-                ui = support.rangeInput && !browser.isIPhone;
+                ui = support.rangeInput && (!browser.isIPhone || playsInline);
                 break;
 
             default:
@@ -7370,7 +7367,7 @@ var ui = {
         var _this = this;
 
         // Re-attach media element listeners
-        // TODO: Use event bubbling
+        // TODO: Use event bubbling?
         this.listeners.media();
 
         // Don't setup interface if no support
@@ -7589,8 +7586,6 @@ var ui = {
 
     // Update <progress> elements
     updateProgress: function updateProgress(event) {
-        var _this4 = this;
-
         if (!this.supported.ui || !utils.is.event(event)) {
             return;
         }
@@ -7614,22 +7609,7 @@ var ui = {
                 // Check buffer status
                 case 'playing':
                 case 'progress':
-                    value = function () {
+                    ui.setProgress.call(this, this.elements.display.buffer, this.buffered * 100);
-                        var buffered = _this4.media.buffered;
-
-
-                        if (buffered && buffered.length) {
-                            // HTML5
-                            return utils.getPercentage(buffered.end(0), _this4.duration);
-                        } else if (utils.is.number(buffered)) {
-                            // YouTube returns between 0 and 1
-                            return buffered * 100;
-                        }
-
-                        return 0;
-                    }();
-
-                    ui.setProgress.call(this, this.elements.display.buffer, value);
 
                     break;
 
@@ -9074,7 +9054,9 @@ var Listeners = function () {
 
     }, {
         key: 'global',
-        value: function global(toggle) {
+        value: function global() {
+            var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
             // Keyboard shortcuts
             if (this.player.config.keyboard.global) {
                 utils.toggleListener(window, 'keydown keyup', this.handleKey, toggle, false);
@@ -9485,6 +9467,14 @@ var Listeners = function () {
                 });
             }, false);
         }
+
+        // Reset on destroy
+
+    }, {
+        key: 'clear',
+        value: function clear() {
+            this.global(false);
+        }
     }]);
     return Listeners;
 }();
@@ -9507,9 +9497,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;
             }
 
@@ -9547,17 +9541,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;
@@ -9756,7 +9751,7 @@ var Ads = function () {
             var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
             if (!start) {
-                window.clearInterval(this.countdownTimer);
+                clearInterval(this.countdownTimer);
                 this.elements.container.removeAttribute('data-badge-text');
                 return;
             }
@@ -9767,7 +9762,7 @@ var Ads = function () {
                 _this5.elements.container.setAttribute('data-badge-text', label);
             };
 
-            this.countdownTimer = window.setInterval(update, 100);
+            this.countdownTimer = setInterval(update, 100);
         }
 
         /**
@@ -10542,10 +10537,10 @@ var youtube = {
                     utils.dispatchEvent.call(player, player.media, 'durationchange');
 
                     // Reset timer
-                    window.clearInterval(player.timers.buffering);
+                    clearInterval(player.timers.buffering);
 
                     // Setup buffering
-                    player.timers.buffering = window.setInterval(function () {
+                    player.timers.buffering = setInterval(function () {
                         // Get loaded % from YouTube
                         player.media.buffered = instance.getVideoLoadedFraction();
 
@@ -10559,7 +10554,7 @@ var youtube = {
 
                         // Bail if we're at 100%
                         if (player.media.buffered === 1) {
-                            window.clearInterval(player.timers.buffering);
+                            clearInterval(player.timers.buffering);
 
                             // Trigger event
                             utils.dispatchEvent.call(player, player.media, 'canplaythrough');
@@ -10576,7 +10571,7 @@ var youtube = {
                     var instance = event.target;
 
                     // Reset timer
-                    window.clearInterval(player.timers.playing);
+                    clearInterval(player.timers.playing);
 
                     // Handle events
                     // -1   Unstarted
@@ -10616,7 +10611,7 @@ var youtube = {
                             utils.dispatchEvent.call(player, player.media, 'playing');
 
                             // Poll to get playback progress
-                            player.timers.playing = window.setInterval(function () {
+                            player.timers.playing = setInterval(function () {
                                 utils.dispatchEvent.call(player, player.media, 'timeupdate');
                             }, 50);
 
@@ -11222,7 +11217,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.18
+// plyr.js v3.0.1
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -11478,7 +11473,7 @@ var Plyr$1 = function () {
         this.listeners.container();
 
         // Global listeners
-        this.listeners.global(true);
+        this.listeners.global();
 
         // Setup fullscreen
         this.fullscreen = new Fullscreen(this);
@@ -11506,6 +11501,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 () {
@@ -11526,7 +11525,7 @@ var Plyr$1 = function () {
     }, {
         key: 'pause',
         value: function pause() {
-            if (!this.playing) {
+            if (!this.playing || !utils.is.function(this.media.pause)) {
                 return;
             }
 
@@ -11738,7 +11737,7 @@ var Plyr$1 = function () {
             }
 
             // Clear timer on every call
-            window.clearTimeout(this.timers.controls);
+            clearTimeout(this.timers.controls);
 
             // If the mouse is not over the controls, set a timeout to hide them
             if (show || this.paused || this.loading) {
@@ -11829,6 +11828,10 @@ var Plyr$1 = function () {
 
             var soft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
+            if (!this.ready) {
+                return;
+            }
+
             var done = function done() {
                 // Reset overflow (incase destroyed while in fullscreen)
                 document.body.style.overflow = '';
@@ -11857,12 +11860,12 @@ var Plyr$1 = function () {
                         callback();
                     }
                 } else {
+                    // Unbind listeners
+                    _this4.listeners.clear();
+
                     // Replace the container with the original element provided
                     utils.replaceElement(_this4.elements.original, _this4.elements.container);
 
-                    // Unbind global listeners
-                    _this4.listeners.global(false);
-
                     // Event
                     utils.dispatchEvent.call(_this4, _this4.elements.original, 'destroyed', true);
 
@@ -11871,15 +11874,27 @@ var Plyr$1 = function () {
                         callback.call(_this4.elements.original);
                     }
 
-                    // Clear for GC
+                    // Reset state
-                    _this4.elements = null;
+                    _this4.ready = false;
+
+                    // Clear for garbage collection
+                    setTimeout(function () {
+                        _this4.elements = null;
+                        _this4.media = null;
+                    }, 200);
                 }
             };
 
+            // Stop playback
+            this.stop();
+
             // Type specific stuff
             switch (this.provider + ':' + this.type) {
                 case 'html5:video':
                 case 'html5:audio':
+                    // Clear timeout
+                    clearTimeout(this.timers.loading);
+
                     // Restore native video controls
                     ui.toggleNativeControls.call(this, true);
 
@@ -11890,8 +11905,8 @@ var Plyr$1 = function () {
 
                 case 'youtube:video':
                     // Clear timers
-                    window.clearInterval(this.timers.buffering);
+                    clearInterval(this.timers.buffering);
-                    window.clearInterval(this.timers.playing);
+                    clearInterval(this.timers.playing);
 
                     // Destroy YouTube API
                     if (this.embed !== null) {
@@ -11941,37 +11956,37 @@ var Plyr$1 = function () {
     }, {
         key: 'isHTML5',
         get: function get() {
-            return this.provider === providers.html5;
+            return Boolean(this.provider === providers.html5);
         }
     }, {
         key: 'isEmbed',
         get: function get() {
-            return this.isYouTube || this.isVimeo;
+            return Boolean(this.isYouTube || this.isVimeo);
         }
     }, {
         key: 'isYouTube',
         get: function get() {
-            return this.provider === providers.youtube;
+            return Boolean(this.provider === providers.youtube);
         }
     }, {
         key: 'isVimeo',
         get: function get() {
-            return this.provider === providers.vimeo;
+            return Boolean(this.provider === providers.vimeo);
         }
     }, {
         key: 'isVideo',
         get: function get() {
-            return this.type === types.video;
+            return Boolean(this.type === types.video);
         }
     }, {
         key: 'isAudio',
         get: function get() {
-            return this.type === types.audio;
+            return Boolean(this.type === types.audio);
         }
     }, {
         key: 'paused',
         get: function get() {
-            return this.media.paused;
+            return Boolean(this.media.paused);
         }
 
         /**
@@ -11981,7 +11996,7 @@ var Plyr$1 = function () {
     }, {
         key: 'playing',
         get: function get() {
-            return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true);
+            return Boolean(!this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
         }
 
         /**
@@ -11991,7 +12006,7 @@ var Plyr$1 = function () {
     }, {
         key: 'ended',
         get: function get() {
-            return this.media.ended;
+            return Boolean(this.media.ended);
         }
     }, {
         key: 'currentTime',
@@ -12024,6 +12039,31 @@ var Plyr$1 = function () {
             return Number(this.media.currentTime);
         }
 
+        /**
+         * Get buffered
+         */
+
+    }, {
+        key: 'buffered',
+        get: function get() {
+            var buffered = this.media.buffered;
+
+            // YouTube / Vimeo return a float between 0-1
+
+            if (utils.is.number(buffered)) {
+                return buffered;
+            }
+
+            // HTML5
+            // TODO: Handle buffered chunks of the media
+            // (i.e. seek to another section buffers only that section)
+            if (buffered && buffered.length && this.duration > 0) {
+                return buffered.end(0) / this.duration;
+            }
+
+            return 0;
+        }
+
         /**
          * Get seeking status
          */
@@ -12031,7 +12071,7 @@ var Plyr$1 = function () {
     }, {
         key: 'seeking',
         get: function get() {
-            return this.media.seeking;
+            return Boolean(this.media.seeking);
         }
 
         /**
@@ -12103,7 +12143,7 @@ var Plyr$1 = function () {
          */
         ,
         get: function get() {
-            return this.media.volume;
+            return Number(this.media.volume);
         }
     }, {
         key: 'muted',
@@ -12132,7 +12172,7 @@ var Plyr$1 = function () {
          */
         ,
         get: function get() {
-            return this.media.muted;
+            return Boolean(this.media.muted);
         }
 
         /**
@@ -12152,12 +12192,12 @@ var Plyr$1 = function () {
             }
 
             // Get audio tracks
-            return this.media.mozHasAudio || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
+            return Boolean(this.media.mozHasAudio) || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
         }
 
         /**
          * Set playback speed
-         * @param {decimal} speed - the speed of playback (0.5-2.0)
+         * @param {number} speed - the speed of playback (0.5-2.0)
          */
 
     }, {
@@ -12202,7 +12242,7 @@ var Plyr$1 = function () {
          */
         ,
         get: function get() {
-            return this.media.playbackRate;
+            return Number(this.media.playbackRate);
         }
 
         /**
@@ -12305,7 +12345,7 @@ var Plyr$1 = function () {
          */
         ,
         get: function get() {
-            return this.media.loop;
+            return Boolean(this.media.loop);
         }
 
         /**
@@ -12374,7 +12414,7 @@ var Plyr$1 = function () {
          */
         ,
         get: function get() {
-            return this.config.autoplay;
+            return Boolean(this.config.autoplay);
         }
     }, {
         key: 'language',
@@ -12481,7 +12521,7 @@ var Plyr$1 = function () {
 
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.0-beta.17
+// plyr.js v3.0.1
 // 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-beta.18",
+    "version": "3.0.1",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -13,15 +13,15 @@
         "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",
-        "git-branch": "^1.0.0",
+        "git-branch": "^2.0.1",
         "gulp": "^3.9.1",
         "gulp-autoprefixer": "^5.0.0",
         "gulp-better-rollup": "^3.0.0",
-        "gulp-clean-css": "^3.9.2",
+        "gulp-clean-css": "^3.9.3",
         "gulp-concat": "^2.6.1",
         "gulp-filter": "^5.1.0",
         "gulp-open": "^3.0.0",
@@ -36,13 +36,13 @@
         "gulp-uglify-es": "^1.0.1",
         "gulp-util": "^3.0.8",
         "rollup-plugin-babel": "^3.0.3",
-        "rollup-plugin-commonjs": "^9.0.0",
+        "rollup-plugin-commonjs": "^8.4.1",
         "rollup-plugin-node-resolve": "^3.2.0",
         "run-sequence": "^2.2.1",
-        "stylelint": "^9.1.1",
+        "stylelint": "^9.1.3",
-        "stylelint-config-prettier": "^2.1.0",
+        "stylelint-config-prettier": "^3.0.4",
-        "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-config-recommended": "^2.1.0",
+        "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-order": "^0.8.1",
         "stylelint-scss": "^2.5.0",
         "stylelint-selector-bem-pattern": "^2.0.0"
@@ -65,6 +65,7 @@
     "author": "Sam Potts <sam@potts.es>",
     "dependencies": {
         "babel-polyfill": "^6.26.0",
-        "custom-event-polyfill": "^0.3.0"
+        "custom-event-polyfill": "^0.3.0",
+        "raven-js": "^3.23.3"
     }
 }

readme.md

@@ -1,25 +1,21 @@
----
-Beware: This version is currently in beta and not production-ready
----
-
 # Plyr
 
 A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.
 
 [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
 
 *   **Accessible** - full support for VTT captions and screen readers
-*   **Lightweight** - just 18KB minified and gzipped
 *   **[Customisable](#html)** - make the player look how you want with the markup you want
 *   **Semantic** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
     `<span>` or `<a href="#">` button hacks
 *   **Responsive** - works with any screen size
 *   **HTML Video & Audio** - support for both formats
 *   **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
+*   **[Monetization](#ads)** - make money from your videos
 *   **[Streaming](#streaming)** - support for hls.js, Shaka and dash.js streaming playback
 *   **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
 *   **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
@@ -128,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-beta.18/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.0.1/plyr.js"></script>
 ```
 
 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -144,13 +140,23 @@ 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-beta.18/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.0.1/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-beta.18/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.1/plyr.svg`.
+
+## Ads
+
+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
+*   Enable ads in the [config options](#options) and enter your publisher ID
+
+Any questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues.
 
 ## Advanced
 
@@ -284,6 +290,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
 | `speed`              | Object                     | `{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }`                                                                 | `selected`: The default speed for playback. `options`: Options to display in the menu. Most browsers will refuse to play slower than 0.5.                                                                                                                                                                                                                              |
 | `quality`            | Object                     | `{ default: 'default', options: ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'default'] }`      | Currently only supported by YouTube. `default` is the default quality level, determined by YouTube. `options` are the options to display.                                                                                                                                                                                                                              |
 | `loop`               | Object                     | `{ active: false }`                                                                                                            | `active`: Whether to loop the current video. If the `loop` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true This is an object to support future functionality.                                                                                                                                                         |
+| `ads`                | Object                     | `{ enabled: false, publisherId: '' }`                                                                                          | `enabled`: Whether to enable vi.ai ads. `publisherId`: Your unique vi.ai publisher ID.                                                                                                                                                                                                                                                                                 |
 
 1.  Vimeo only
 
@@ -366,6 +373,7 @@ player.fullscreen.active; // false;
 | `paused`             | ✓      | -      | Returns a boolean indicating if the current player is paused.                                                                                                                        |
 | `playing`            | ✓      | -      | Returns a boolean indicating if the current player is playing.                                                                                                                       |
 | `ended`              | ✓      | -      | Returns a boolean indicating if the current player has finished playback.                                                                                                            |
+| `buffered`           | ✓      | -      | Returns a float between 0 and 1 indicating how much of the media is buffered                                                                                                         |
 | `currentTime`        | ✓      | ✓      | Gets or sets the currentTime for the player. The setter accepts a float in seconds.                                                                                                  |
 | `seeking`            | ✓      | -      | Returns a boolean indicating if the current player is seeking.                                                                                                                       |
 | `duration`           | ✓      | -      | Returns the duration for the current media.                                                                                                                                          |
@@ -695,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-beta.18/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.1/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -376,7 +376,7 @@ const defaults = {
     // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
     ads: {
         enabled: false,
-        publisherId: '918848828995742',
+        publisherId: '',
     },
 };
 

src/js/listeners.js

@@ -188,7 +188,7 @@ class Listeners {
     }
 
     // Global window & document listeners
-    global(toggle) {
+    global(toggle = true) {
         // Keyboard shortcuts
         if (this.player.config.keyboard.global) {
             utils.toggleListener(window, 'keydown keyup', this.handleKey, toggle, false);
@@ -585,6 +585,11 @@ class Listeners {
             false,
         );
     }
+
+    // Reset on destroy
+    clear() {
+        this.global(false);
+    }
 }
 
 export default Listeners;

src/js/plugins/ads.js

@@ -171,7 +171,7 @@ class Ads {
      */
     pollCountdown(start = false) {
         if (!start) {
-            window.clearInterval(this.countdownTimer);
+            clearInterval(this.countdownTimer);
             this.elements.container.removeAttribute('data-badge-text');
             return;
         }
@@ -182,7 +182,7 @@ class Ads {
             this.elements.container.setAttribute('data-badge-text', label);
         };
 
-        this.countdownTimer = window.setInterval(update, 100);
+        this.countdownTimer = setInterval(update, 100);
     }
 
     /**

src/js/plugins/youtube.js

@@ -305,10 +305,10 @@ const youtube = {
                     utils.dispatchEvent.call(player, player.media, 'durationchange');
 
                     // Reset timer
-                    window.clearInterval(player.timers.buffering);
+                    clearInterval(player.timers.buffering);
 
                     // Setup buffering
-                    player.timers.buffering = window.setInterval(() => {
+                    player.timers.buffering = setInterval(() => {
                         // Get loaded % from YouTube
                         player.media.buffered = instance.getVideoLoadedFraction();
 
@@ -322,7 +322,7 @@ const youtube = {
 
                         // Bail if we're at 100%
                         if (player.media.buffered === 1) {
-                            window.clearInterval(player.timers.buffering);
+                            clearInterval(player.timers.buffering);
 
                             // Trigger event
                             utils.dispatchEvent.call(player, player.media, 'canplaythrough');
@@ -337,7 +337,7 @@ const youtube = {
                     const instance = event.target;
 
                     // Reset timer
-                    window.clearInterval(player.timers.playing);
+                    clearInterval(player.timers.playing);
 
                     // Handle events
                     // -1   Unstarted
@@ -377,7 +377,7 @@ const youtube = {
                             utils.dispatchEvent.call(player, player.media, 'playing');
 
                             // Poll to get playback progress
-                            player.timers.playing = window.setInterval(() => {
+                            player.timers.playing = setInterval(() => {
                                 utils.dispatchEvent.call(player, player.media, 'timeupdate');
                             }, 50);
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.18
+// plyr.js v3.0.1
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -276,7 +276,7 @@ class Plyr {
         this.listeners.container();
 
         // Global listeners
-        this.listeners.global(true);
+        this.listeners.global();
 
         // Setup fullscreen
         this.fullscreen = new Fullscreen(this);
@@ -293,28 +293,32 @@ class Plyr {
      * Types and provider helpers
      */
     get isHTML5() {
-        return this.provider === providers.html5;
+        return Boolean(this.provider === providers.html5);
     }
     get isEmbed() {
-        return this.isYouTube || this.isVimeo;
+        return Boolean(this.isYouTube || this.isVimeo);
     }
     get isYouTube() {
-        return this.provider === providers.youtube;
+        return Boolean(this.provider === providers.youtube);
     }
     get isVimeo() {
-        return this.provider === providers.vimeo;
+        return Boolean(this.provider === providers.vimeo);
     }
     get isVideo() {
-        return this.type === types.video;
+        return Boolean(this.type === types.video);
     }
     get isAudio() {
-        return this.type === types.audio;
+        return Boolean(this.type === types.audio);
     }
 
     /**
      * 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;
         }
 
@@ -339,21 +343,21 @@ class Plyr {
      * Get paused state
      */
     get paused() {
-        return this.media.paused;
+        return Boolean(this.media.paused);
     }
 
     /**
      * Get playing state
      */
     get playing() {
-        return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true);
+        return Boolean(!this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
     }
 
     /**
      * Get ended state
      */
     get ended() {
-        return this.media.ended;
+        return Boolean(this.media.ended);
     }
 
     /**
@@ -434,11 +438,32 @@ class Plyr {
         return Number(this.media.currentTime);
     }
 
+    /**
+     * Get buffered
+     */
+    get buffered() {
+        const { buffered } = this.media;
+
+        // YouTube / Vimeo return a float between 0-1
+        if (utils.is.number(buffered)) {
+            return buffered;
+        }
+
+        // HTML5
+        // TODO: Handle buffered chunks of the media
+        // (i.e. seek to another section buffers only that section)
+        if (buffered && buffered.length && this.duration > 0) {
+            return buffered.end(0) / this.duration;
+        }
+
+        return 0;
+    }
+
     /**
      * Get seeking status
      */
     get seeking() {
-        return this.media.seeking;
+        return Boolean(this.media.seeking);
     }
 
     /**
@@ -503,7 +528,7 @@ class Plyr {
      * Get the current player volume
      */
     get volume() {
-        return this.media.volume;
+        return Number(this.media.volume);
     }
 
     /**
@@ -552,7 +577,7 @@ class Plyr {
      * Get current muted state
      */
     get muted() {
-        return this.media.muted;
+        return Boolean(this.media.muted);
     }
 
     /**
@@ -569,12 +594,16 @@ class Plyr {
         }
 
         // Get audio tracks
-        return this.media.mozHasAudio || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
+        return (
+            Boolean(this.media.mozHasAudio) ||
+            Boolean(this.media.webkitAudioDecodedByteCount) ||
+            Boolean(this.media.audioTracks && this.media.audioTracks.length)
+        );
     }
 
     /**
      * Set playback speed
-     * @param {decimal} speed - the speed of playback (0.5-2.0)
+     * @param {number} speed - the speed of playback (0.5-2.0)
      */
     set speed(input) {
         let speed = null;
@@ -615,7 +644,7 @@ class Plyr {
      * Get current playback speed
      */
     get speed() {
-        return this.media.playbackRate;
+        return Number(this.media.playbackRate);
     }
 
     /**
@@ -715,7 +744,7 @@ class Plyr {
      * Get current loop state
      */
     get loop() {
-        return this.media.loop;
+        return Boolean(this.media.loop);
     }
 
     /**
@@ -772,7 +801,7 @@ class Plyr {
      * Get the current autoplay state
      */
     get autoplay() {
-        return this.config.autoplay;
+        return Boolean(this.config.autoplay);
     }
 
     /**
@@ -951,7 +980,7 @@ class Plyr {
         }
 
         // Clear timer on every call
-        window.clearTimeout(this.timers.controls);
+        clearTimeout(this.timers.controls);
 
         // If the mouse is not over the controls, set a timeout to hide them
         if (show || this.paused || this.loading) {
@@ -1029,6 +1058,10 @@ class Plyr {
      * @param {boolean} soft - Whether it's a soft destroy (for source changes etc)
      */
     destroy(callback, soft = false) {
+        if (!this.ready) {
+            return;
+        }
+
         const done = () => {
             // Reset overflow (incase destroyed while in fullscreen)
             document.body.style.overflow = '';
@@ -1057,12 +1090,12 @@ class Plyr {
                     callback();
                 }
             } else {
+                // Unbind listeners
+                this.listeners.clear();
+
                 // Replace the container with the original element provided
                 utils.replaceElement(this.elements.original, this.elements.container);
 
-                // Unbind global listeners
-                this.listeners.global(false);
-
                 // Event
                 utils.dispatchEvent.call(this, this.elements.original, 'destroyed', true);
 
@@ -1071,15 +1104,27 @@ class Plyr {
                     callback.call(this.elements.original);
                 }
 
-                // Clear for GC
+                // Reset state
-                this.elements = null;
+                this.ready = false;
+
+                // Clear for garbage collection
+                setTimeout(() => {
+                    this.elements = null;
+                    this.media = null;
+                }, 200);
             }
         };
 
+        // Stop playback
+        this.stop();
+
         // Type specific stuff
         switch (`${this.provider}:${this.type}`) {
             case 'html5:video':
             case 'html5:audio':
+                // Clear timeout
+                clearTimeout(this.timers.loading);
+
                 // Restore native video controls
                 ui.toggleNativeControls.call(this, true);
 
@@ -1090,8 +1135,8 @@ class Plyr {
 
             case 'youtube:video':
                 // Clear timers
-                window.clearInterval(this.timers.buffering);
+                clearInterval(this.timers.buffering);
-                window.clearInterval(this.timers.playing);
+                clearInterval(this.timers.playing);
 
                 // Destroy YouTube API
                 if (this.embed !== null) {

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.0-beta.18
+// plyr.js v3.0.1
 // 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/support.js

@@ -30,13 +30,9 @@ const support = {
                 break;
 
             case 'youtube:video':
-                api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
-                break;
-
             case 'vimeo:video':
                 api = true;
-                ui = support.rangeInput && !browser.isIPhone;
+                ui = support.rangeInput && (!browser.isIPhone || playsInline);
                 break;
 
             default:

src/js/ui.js

@@ -5,7 +5,6 @@
 import utils from './utils';
 import captions from './captions';
 import controls from './controls';
-import listeners from './listeners';
 
 const ui = {
     addStyleHook() {
@@ -25,7 +24,7 @@ const ui = {
     // Setup the UI
     build() {
         // Re-attach media element listeners
-        // TODO: Use event bubbling
+        // TODO: Use event bubbling?
         this.listeners.media();
 
         // Don't setup interface if no support
@@ -256,21 +255,7 @@ const ui = {
                 // Check buffer status
                 case 'playing':
                 case 'progress':
-                    value = (() => {
+                    ui.setProgress.call(this, this.elements.display.buffer, this.buffered * 100);
-                        const { buffered } = this.media;
-
-                        if (buffered && buffered.length) {
-                            // HTML5
-                            return utils.getPercentage(buffered.end(0), this.duration);
-                        } else if (utils.is.number(buffered)) {
-                            // YouTube returns between 0 and 1
-                            return buffered * 100;
-                        }
-
-                        return 0;
-                    })();
-
-                    ui.setProgress.call(this, this.elements.display.buffer, value);
 
                     break;
 

src/js/utils.js

@@ -671,6 +671,7 @@ const utils = {
         if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {
             return 0;
         }
+
         return (current / max * 100).toFixed(2);
     },
 

src/sass/base.scss

@@ -8,6 +8,7 @@
 
     direction: ltr;
     font-family: $plyr-font-family;
+    font-variant-numeric: tabular-nums; // Force monosace-esque number widths
     font-weight: $plyr-font-weight-regular;
     line-height: $plyr-line-height;
     max-width: 100%;

src/sass/plugins/ads.scss

@@ -3,22 +3,25 @@
 // ==========================================================================
 
 .plyr__ads {
+    border-radius: inherit;
     bottom: 0;
     cursor: pointer;
     left: 0;
+    overflow: hidden;
     position: absolute;
     right: 0;
     top: 0;
-    z-index: -1; // Hide it.
+    z-index: -1; // Hide it by default
 
     // Make sure the inner container is big enough for the ad creative.
     > div,
     > div iframe {
+        height: 100%;
         position: absolute;
         width: 100%;
-        height: 100%;
     }
 
+    // The countdown label
     &::after {
         background: rgba($plyr-color-gunmetal, 0.8);
         border-radius: 2px;