v3.0.0

# 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/dist/demo.js

@@ -55,7 +55,8 @@ document.addEventListener('DOMContentLoaded', function () {
             google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'
         },
         ads: {
-            enabled: true
+            enabled: true,
+            publisherId: '918848828995742'
         }
     });
 

demo/dist/demo.min.js

@@ -1,2 +1,2 @@
-!function(){"use strict";var e,t,o,i,r,a;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{enabled:!0}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),r=window.history&&window.history.pushState;function a(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(r,n){if(r in o&&(n||r!==i)&&(i.length||r!==o.video)){switch(r){case o.video:e.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:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.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 o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=r,Array.from(t).forEach(function(e){return a(e.parentElement,"active",!1)}),a(document.querySelector('[data-source="'+r+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+r).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),r&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),r){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement(o),a=t.getElementsByTagName(o)[0],r.async=1,r.src="https://www.google-analytics.com/analytics.js",a.parentNode.insertBefore(r,a),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}();
+!function(){"use strict";var e,t,o,i,r,a;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{enabled:!0,publisherId:"918848828995742"}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),r=window.history&&window.history.pushState;function a(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(r,n){if(r in o&&(n||r!==i)&&(i.length||r!==o.video)){switch(r){case o.video:e.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:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.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 o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=r,Array.from(t).forEach(function(e){return a(e.parentElement,"active",!1)}),a(document.querySelector('[data-source="'+r+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+r).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),r&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),r){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement(o),a=t.getElementsByTagName(o)[0],r.async=1,r.src="https://www.google-analytics.com/analytics.js",a.parentNode.insertBefore(r,a),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}();
 //# sourceMappingURL=demo.min.js.map

demo/src/js/demo.js

@@ -53,6 +53,7 @@ document.addEventListener('DOMContentLoaded', () => {
         },
         ads: {
             enabled: true,
+            publisherId: '918848828995742',
         },
     });
 

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.0-beta.20/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 () {
-                        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);
+                    ui.setProgress.call(this, this.elements.display.buffer, this.buffered * 100);
 
                     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;
 }();
@@ -4565,7 +4555,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 +4566,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 +5341,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 +5358,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 +5375,7 @@ var youtube = {
                     var instance = event.target;
 
                     // Reset timer
-                    window.clearInterval(player.timers.playing);
+                    clearInterval(player.timers.playing);
 
                     // Handle events
                     // -1   Unstarted
@@ -5425,7 +5415,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 +6021,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.17
+// plyr.js v3.0.0-beta.20
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -6287,7 +6277,7 @@ var Plyr = function () {
         this.listeners.container();
 
         // Global listeners
-        this.listeners.global(true);
+        this.listeners.global();
 
         // Setup fullscreen
         this.fullscreen = new Fullscreen(this);
@@ -6547,7 +6537,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 +6628,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 +6660,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 +6674,27 @@ var Plyr = function () {
                         callback.call(_this4.elements.original);
                     }
 
-                    // Clear for GC
-                    _this4.elements = null;
+                    // Reset state
+                    _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 +6705,8 @@ var Plyr = function () {
 
                 case 'youtube:video':
                     // Clear timers
-                    window.clearInterval(this.timers.buffering);
-                    window.clearInterval(this.timers.playing);
+                    clearInterval(this.timers.buffering);
+                    clearInterval(this.timers.playing);
 
                     // Destroy YouTube API
                     if (this.embed !== null) {
@@ -6750,37 +6756,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 +6796,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 +6806,7 @@ var Plyr = function () {
     }, {
         key: 'ended',
         get: function get$$1() {
-            return this.media.ended;
+            return Boolean(this.media.ended);
         }
     }, {
         key: 'currentTime',
@@ -6833,6 +6839,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 +6871,7 @@ var Plyr = function () {
     }, {
         key: 'seeking',
         get: function get$$1() {
-            return this.media.seeking;
+            return Boolean(this.media.seeking);
         }
 
         /**
@@ -6912,7 +6943,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.volume;
+            return Number(this.media.volume);
         }
     }, {
         key: 'muted',
@@ -6941,7 +6972,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.muted;
+            return Boolean(this.media.muted);
         }
 
         /**
@@ -6961,12 +6992,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 +7042,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.playbackRate;
+            return Number(this.media.playbackRate);
         }
 
         /**
@@ -7114,7 +7145,7 @@ var Plyr = function () {
          */
         ,
         get: function get$$1() {
-            return this.media.loop;
+            return Boolean(this.media.loop);
         }
 
         /**
@@ -7183,7 +7214,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.0/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 () {
-                        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);
+                    ui.setProgress.call(this, this.elements.display.buffer, this.buffered * 100);
 
                     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;
 }();
@@ -9756,7 +9746,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 +9757,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 +10532,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 +10549,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 +10566,7 @@ var youtube = {
                     var instance = event.target;
 
                     // Reset timer
-                    window.clearInterval(player.timers.playing);
+                    clearInterval(player.timers.playing);
 
                     // Handle events
                     // -1   Unstarted
@@ -10616,7 +10606,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 +11212,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.18
+// plyr.js v3.0.0
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -11478,7 +11468,7 @@ var Plyr$1 = function () {
         this.listeners.container();
 
         // Global listeners
-        this.listeners.global(true);
+        this.listeners.global();
 
         // Setup fullscreen
         this.fullscreen = new Fullscreen(this);
@@ -11738,7 +11728,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 +11819,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 +11851,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 +11865,27 @@ var Plyr$1 = function () {
                         callback.call(_this4.elements.original);
                     }
 
-                    // Clear for GC
-                    _this4.elements = null;
+                    // Reset state
+                    _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 +11896,8 @@ var Plyr$1 = function () {
 
                 case 'youtube:video':
                     // Clear timers
-                    window.clearInterval(this.timers.buffering);
-                    window.clearInterval(this.timers.playing);
+                    clearInterval(this.timers.buffering);
+                    clearInterval(this.timers.playing);
 
                     // Destroy YouTube API
                     if (this.embed !== null) {
@@ -11941,37 +11947,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 +11987,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 +11997,7 @@ var Plyr$1 = function () {
     }, {
         key: 'ended',
         get: function get() {
-            return this.media.ended;
+            return Boolean(this.media.ended);
         }
     }, {
         key: 'currentTime',
@@ -12024,6 +12030,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 +12062,7 @@ var Plyr$1 = function () {
     }, {
         key: 'seeking',
         get: function get() {
-            return this.media.seeking;
+            return Boolean(this.media.seeking);
         }
 
         /**
@@ -12103,7 +12134,7 @@ var Plyr$1 = function () {
          */
         ,
         get: function get() {
-            return this.media.volume;
+            return Number(this.media.volume);
         }
     }, {
         key: 'muted',
@@ -12132,7 +12163,7 @@ var Plyr$1 = function () {
          */
         ,
         get: function get() {
-            return this.media.muted;
+            return Boolean(this.media.muted);
         }
 
         /**
@@ -12152,12 +12183,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 +12233,7 @@ var Plyr$1 = function () {
          */
         ,
         get: function get() {
-            return this.media.playbackRate;
+            return Number(this.media.playbackRate);
         }
 
         /**
@@ -12305,7 +12336,7 @@ var Plyr$1 = function () {
          */
         ,
         get: function get() {
-            return this.media.loop;
+            return Boolean(this.media.loop);
         }
 
         /**
@@ -12374,7 +12405,7 @@ var Plyr$1 = function () {
          */
         ,
         get: function get() {
-            return this.config.autoplay;
+            return Boolean(this.config.autoplay);
         }
     }, {
         key: 'language',
@@ -12481,7 +12512,7 @@ var Plyr$1 = function () {
 
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.0-beta.17
+// plyr.js v3.0.0-beta.20
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.0.0-beta.18",
+    "version": "3.0.0",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -17,11 +17,11 @@
         "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-config-prettier": "^2.1.0",
-        "stylelint-config-sass-guidelines": "^5.0.0",
+        "stylelint": "^9.1.3",
+        "stylelint-config-prettier": "^3.0.4",
         "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"

readme.md

@@ -1,7 +1,3 @@
----
-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.
@@ -13,13 +9,13 @@ A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo medi
 ## 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.0/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.0/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.0/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:
+
+*   [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.                                                                                                                                          |

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.0/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.0
 // 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,22 +293,22 @@ 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);
     }
 
     /**
@@ -339,21 +339,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 +434,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 +524,7 @@ class Plyr {
      * Get the current player volume
      */
     get volume() {
-        return this.media.volume;
+        return Number(this.media.volume);
     }
 
     /**
@@ -552,7 +573,7 @@ class Plyr {
      * Get current muted state
      */
     get muted() {
-        return this.media.muted;
+        return Boolean(this.media.muted);
     }
 
     /**
@@ -569,12 +590,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 +640,7 @@ class Plyr {
      * Get current playback speed
      */
     get speed() {
-        return this.media.playbackRate;
+        return Number(this.media.playbackRate);
     }
 
     /**
@@ -715,7 +740,7 @@ class Plyr {
      * Get current loop state
      */
     get loop() {
-        return this.media.loop;
+        return Boolean(this.media.loop);
     }
 
     /**
@@ -772,7 +797,7 @@ class Plyr {
      * Get the current autoplay state
      */
     get autoplay() {
-        return this.config.autoplay;
+        return Boolean(this.config.autoplay);
     }
 
     /**
@@ -951,7 +976,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 +1054,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 +1086,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 +1100,27 @@ class Plyr {
                     callback.call(this.elements.original);
                 }
 
-                // Clear for GC
-                this.elements = null;
+                // Reset state
+                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 +1131,8 @@ class Plyr {
 
             case 'youtube:video':
                 // Clear timers
-                window.clearInterval(this.timers.buffering);
-                window.clearInterval(this.timers.playing);
+                clearInterval(this.timers.buffering);
+                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.0
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

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 = (() => {
-                        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);
+                    ui.setProgress.call(this, this.elements.display.buffer, this.buffered * 100);
 
                     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;