Fix for custom controls

src/js/captions.js

@@ -39,7 +39,7 @@ const captions = {
         // Only Vimeo and HTML5 video supported at this point
         if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {
             // Clear menu and hide
-            if (this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
+            if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
                 controls.setCaptionsMenu.call(this);
             }
 
@@ -68,7 +68,7 @@ const captions = {
         captions.show.call(this);
 
         // Set available languages in list
-        if (this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
+        if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
             controls.setCaptionsMenu.call(this);
         }
     },
@@ -124,7 +124,7 @@ const captions = {
     setCue(input) {
         // Get the track from the event if needed
         const track = utils.is.event(input) ? input.target : input;
-        const {activeCues} = track;
+        const { activeCues } = track;
         const active = activeCues.length && activeCues[0];
         const currentTrack = captions.getCurrentTrack.call(this);
 

src/js/controls.js

@@ -215,7 +215,16 @@ const controls = {
 
         utils.setAttributes(button, attributes);
 
-        this.elements.buttons[type] = button;
+        // We have multiple play buttons
+        if (type === 'play') {
+            if (!utils.is.array(this.elements.buttons[type])) {
+                this.elements.buttons[type] = [];
+            }
+
+            this.elements.buttons[type].push(button);
+        } else {
+            this.elements.buttons[type] = button;
+        }
 
         return button;
     },
@@ -893,7 +902,6 @@ const controls = {
         // Play/Pause button
         if (this.config.controls.includes('play')) {
             container.appendChild(controls.createButton.call(this, 'play'));
-            // container.appendChild(controls.createButton.call(this, 'pause'));
         }
 
         // Fast forward button
@@ -1147,9 +1155,10 @@ const controls = {
 
         // Null by default
         let container = null;
+        this.elements.controls = null;
 
-        // HTML passed as the option
-        if (utils.is.string(this.config.controls)) {
+        // HTML or Element passed as the option
+        if (utils.is.string(this.config.controls) || utils.is.element(this.config.controls)) {
             container = this.config.controls;
         } else if (utils.is.function(this.config.controls)) {
             // A custom function to build controls
@@ -1193,7 +1202,7 @@ const controls = {
         }
 
         // Find the elements if need be
-        if (utils.is.element(this.elements.controls)) {
+        if (!utils.is.element(this.elements.controls)) {
             utils.findElements.call(this);
         }
 

src/js/fullscreen.js

@@ -70,6 +70,9 @@ class Fullscreen {
             this.toggle();
         });
 
+        // Prevent double click on controls bubbling up
+        utils.on(this.player.elements.controls, 'dblclick', event => event.stopPropagation());
+
         // Update the UI
         this.update();
     }

src/js/media.js

@@ -86,7 +86,7 @@ const media = {
         }
 
         // Remove child sources
-        Array.from(this.media.querySelectorAll('source')).forEach(utils.removeElement);
+        utils.removeElement(this.media.querySelectorAll('source'));
 
         // Set blank video src attribute
         // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error

src/js/plyr.js

@@ -1042,12 +1042,8 @@ class Plyr {
             // If it's a soft destroy, make minimal changes
             if (soft) {
                 if (Object.keys(this.elements).length) {
-                    // Remove buttons
-                    if (this.elements.buttons && this.elements.buttons.play) {
-                        Array.from(this.elements.buttons.play).forEach(button => utils.removeElement(button));
-                    }
-
-                    // Remove others
+                    // Remove elements
+                    utils.removeElement(this.elements.buttons.play);
                     utils.removeElement(this.elements.captions);
                     utils.removeElement(this.elements.controls);
                     utils.removeElement(this.elements.wrapper);

src/js/ui.js

@@ -32,12 +32,6 @@ const ui = {
         if (!this.supported.ui) {
             this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);
 
-            // Remove controls
-            utils.removeElement.call(this, 'controls');
-
-            // Remove large play
-            utils.removeElement.call(this, 'buttons.play');
-
             // Restore native controls
             ui.toggleNativeControls.call(this, true);
 

src/js/utils.js

@@ -306,12 +306,15 @@ const utils = {
     // Remove an element
     removeElement(element) {
         if (!utils.is.element(element) || !utils.is.element(element.parentNode)) {
-            return null;
+            return;
+        }
+
+        if (utils.is.nodeList(element) || utils.is.array(element)) {
+            Array.from(element).forEach(utils.removeElement);
+            return;
         }
 
         element.parentNode.removeChild(element);
-
-        return element;
     },
 
     // Remove all child elements
@@ -569,7 +572,7 @@ const utils = {
         }
 
         // If a nodelist is passed, call itself on each node
-        if (utils.is.nodeList(elements)) {
+        if (utils.is.nodeList(elements) || utils.is.array(elements)) {
             // Create listener for each node
             Array.from(elements).forEach(element => {
                 if (element instanceof Node) {