Merge branch 'develop' of github.com:Selz/plyr into develop

# Conflicts:
#	dist/plyr.js
#	dist/plyr.js.map
#	src/js/defaults.js

src/js/controls.js

@@ -73,7 +73,16 @@ const controls = {
 
         // Create the <use> to reference sprite
         const use = document.createElementNS(namespace, 'use');
-        use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `${iconPath}-${type}`);
+        const path = `${iconPath}-${type}`;
+
+        // If the new `href` attribute is supported, use that
+        // https://github.com/sampotts/plyr/issues/460
+        // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
+        if ('href' in use) {
+            use.setAttribute('href', path);
+        } else {
+            use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path);
+        }
 
         // Add <use> to <svg>
         icon.appendChild(use);
@@ -1125,8 +1134,7 @@ const controls = {
 
         // Larger overlaid play button
         if (this.config.controls.includes('play-large')) {
-            this.elements.buttons.playLarge = controls.createButton.call(this, 'play-large');
-            this.elements.container.appendChild(this.elements.buttons.playLarge);
+            this.elements.container.appendChild(controls.createButton.call(this, 'play-large'));
         }
 
         this.elements.controls = container;

src/js/defaults.js

@@ -28,9 +28,6 @@ const defaults = {
     // Aspect ratio (for embeds)
     ratio: '16:9',
 
-    // Looping
-    loop: false,
-
     // Click video to play
     clickToPlay: true,
 
@@ -57,6 +54,13 @@ const defaults = {
         options: ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'default'],
     },
 
+    // Set loops
+    loop: {
+        active: false,
+        // start: null,
+        // end: null,
+    },
+
     // Speed default and options to display
     speed: {
         default: 1,

src/js/plyr.js

@@ -170,21 +170,22 @@ class Plyr {
             case 'audio':
                 this.type = type;
 
-                if (this.media.getAttribute('crossorigin') !== null) {
+                if (this.media.hasAttribute('crossorigin')) {
                     this.config.crossorigin = true;
                 }
-                if (this.media.getAttribute('autoplay') !== null) {
+                if (this.media.hasAttribute('autoplay')) {
                     this.config.autoplay = true;
                 }
-                if (this.media.getAttribute('playsinline') !== null) {
+                if (this.media.hasAttribute('playsinline')) {
                     this.config.inline = true;
                 }
-                if (this.media.getAttribute('muted') !== null) {
+                if (this.media.hasAttribute('muted')) {
                     this.config.muted = true;
                 }
-                if (this.media.getAttribute('loop') !== null) {
+                if (this.media.hasAttribute('loop')) {
                     this.config.loop.active = true;
                 }
+
                 break;
 
             default:
@@ -889,12 +890,14 @@ class Plyr {
             // If it's a soft destroy, make minimal changes
             if (soft) {
                 utils.removeElement(this.elements.captions);
+                Array.from(this.elements.buttons.play).forEach(button => utils.removeElement(button));
                 utils.removeElement(this.elements.controls);
                 utils.removeElement(this.elements.wrapper);
 
                 // Clear for GC
                 this.elements.captions = null;
                 this.elements.controls = null;
+                this.elements.buttons.play = null;
                 this.elements.wrapper = null;
 
                 // Callback

src/js/utils.js

@@ -433,7 +433,7 @@ const utils = {
 
     // Trap focus inside container
     trapFocus() {
-        const tabbables = utils.getElements.call(this, 'input:not([disabled]), button:not([disabled])');
+        const tabbables = utils.getElements.call(this, 'button:not(:disabled), input:not(:disabled), [tabindex]');
         const first = tabbables[0];
         const last = tabbables[tabbables.length - 1];
 
@@ -441,17 +441,22 @@ const utils = {
             this.elements.container,
             'keydown',
             event => {
-                // If it is tab
-                if (event.which === 9 && this.fullscreen.active) {
-                    if (event.target === last && !event.shiftKey) {
-                        // Move focus to first element that can be tabbed if Shift isn't used
-                        event.preventDefault();
-                        first.focus();
-                    } else if (event.target === first && event.shiftKey) {
-                        // Move focus to last element that can be tabbed if Shift is used
-                        event.preventDefault();
-                        last.focus();
+                // Bail if not tab key or not fullscreen
+                if (event.key !== 'Tab' || event.keyCode !== 9 || !this.fullscreen.active) {
+                    return;
                 }
+
+                // Get the current focused element
+                const focused = utils.getFocusElement();
+
+                if (focused === last && !event.shiftKey) {
+                    // Move focus to first element that can be tabbed if Shift isn't used
+                    first.focus();
+                    event.preventDefault();
+                } else if (focused === first && event.shiftKey) {
+                    // Move focus to last element that can be tabbed if Shift is used
+                    last.focus();
+                    event.preventDefault();
                 }
             },
             false