1 files changed, 18 insertions, 105 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index bed09827..ffd2a1e3 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -971,119 +971,32 @@ class Plyr {
 
     /**
      * Toggle the player controls
-     * @param {boolean} toggle - Whether to show the controls
+     * @param {boolean} [toggle] - Whether to show the controls
      */
     toggleControls(toggle) {
-        // We need controls of course...
-        if (!utils.is.element(this.elements.controls)) {
-            return;
-        }
-
-        // Don't hide if no UI support or it's audio
-        if (!this.supported.ui || this.isAudio) {
-            return;
-        }
-
-        let delay = 0;
-        let show = toggle;
-        let isEnterFullscreen = false;
-
-        // Get toggle state if not set
-        if (!utils.is.boolean(toggle)) {
-            if (utils.is.event(toggle)) {
-                // Is the enter fullscreen event
-                isEnterFullscreen = toggle.type === 'enterfullscreen';
-
-                // Events that show the controls
-                const showEvents = [
-                    'touchstart',
-                    'touchmove',
-                    'mouseenter',
-                    'mousemove',
-                    'focusin',
-                ];
-
-                // Events that delay hiding
-                const delayEvents = [
-                    'touchmove',
-                    'touchend',
-                    'mousemove',
-                ];
-
-                // Whether to show controls
-                show = showEvents.includes(toggle.type);
-
-                // Delay hiding on move events
-                if (delayEvents.includes(toggle.type)) {
-                    delay = 2000;
-                }
-
-                // Delay a little more for keyboard users
-                if (!this.touch && toggle.type === 'focusin') {
-                    delay = 3000;
-                    utils.toggleClass(this.elements.controls, this.config.classNames.noTransition, true);
-                }
-            } else {
-                show = utils.hasClass(this.elements.container, this.config.classNames.hideControls);
-            }
-        }
+        // Don't toggle if missing UI support or if it's audio
+        if (this.supported.ui && !this.isAudio) {
+            // Get state before change
+            const isHidden = utils.hasClass(this.elements.container, this.config.classNames.hideControls);
 
-        // Clear timer on every call
-        clearTimeout(this.timers.controls);
+            // Negate the argument if not undefined since adding the class to hides the controls
+            const force = typeof toggle === 'undefined' ? undefined : !toggle;
 
-        // If the mouse is not over the controls, set a timeout to hide them
-        if (show || this.paused || this.loading) {
-            // Check if controls toggled
-            const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, false);
-
-            // Trigger event
-            if (toggled) {
-                utils.dispatchEvent.call(this, this.media, 'controlsshown');
-            }
+            // Apply and get updated state
+            const hiding = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, force);
 
-            // Always show controls when paused or if touch
-            if (this.paused || this.loading) {
-                return;
+            // Close menu
+            if (hiding && this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) {
+                controls.toggleMenu.call(this, false);
             }
-
-            // Delay for hiding on touch
-            if (this.touch) {
-                delay = 3000;
+            // Trigger event on change
+            if (hiding !== isHidden) {
+                const eventName = hiding ? 'controlshidden' : 'controlsshown';
+                utils.dispatchEvent.call(this, this.media, eventName);
             }
+            return !hiding;
         }
-
-        // If toggle is false or if we're playing (regardless of toggle),
-        // then set the timer to hide the controls
-        if (!show || this.playing) {
-            this.timers.controls = setTimeout(() => {
-                // We need controls of course...
-                if (!utils.is.element(this.elements.controls)) {
-                    return;
-                }
-
-                // If the mouse is over the controls (and not entering fullscreen), bail
-                if ((this.elements.controls.pressed || this.elements.controls.hover) && !isEnterFullscreen) {
-                    return;
-                }
-
-                // Restore transition behaviour
-                if (!utils.hasClass(this.elements.container, this.config.classNames.hideControls)) {
-                    utils.toggleClass(this.elements.controls, this.config.classNames.noTransition, false);
-                }
-
-                // Set hideControls class
-                const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, this.config.hideControls);
-
-                // Trigger event and close menu
-                if (toggled) {
-                    utils.dispatchEvent.call(this, this.media, 'controlshidden');
-
-                    if (this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) {
-                        controls.toggleMenu.call(this, false);
-                    }
-                }
-            }, delay);
-        }
+        return false;
     }
 
     /**