Hide Playback Controls when mouse is not moving on Udemy

fix-udemy-controls.js

// ==UserScript==
// @name         Udemy Hide Video Playback Controls
// @namespace    https://github.com/WesleiRamos
// @version      2024-11-29
// @description  Hide Playback Controls when mouse is not moving on Udemy, based on Rahul's script (https://greasyfork.org/pt-BR/scripts/519179-udemy-hide-video-playback-controls)
// @author       Weslei Ramos
// @match        https://www.udemy.com/course/*
// @icon         https://www.udemy.com/staticx/udemy/images/v7/apple-touch-icon.png
// @license      MIT
// @grant        none
// ==/UserScript==
(function () {
  "use strict";

  const HIDE_CONTROLS_TIMEOUT = 4000;

  const debounce = (func, timeout = 300) => {
    let timer;
    return () => {
      clearTimeout(timer);
      timer = setTimeout(() => func(), timeout);
    };
  };

  const getControls = () => {
    const controls = document.querySelector(".shaka-control-bar--control-bar-container--OfnMI");
    const nextAndPrevious = document.querySelectorAll(".next-and-previous--container--kZxyo");
    const headerGradient = document.querySelector(".video-viewer--header-gradient--x4Zw0");
    const headerTitle = document.querySelector(".video-viewer--title-overlay--YZQuH");
    return {
      controls,
      nextAndPrevious,
      headerGradient,
      headerTitle,
    };
  };

  window.addEventListener("load", () => {
    console.log("Udemy Hide Video Playback Controls loaded");
    let isHidden = true;

    const hideControls = debounce(() => {
      const { controls, nextAndPrevious, headerGradient, headerTitle } = getControls();
      isHidden = true;

      controls?.setAttribute("style", "opacity: 0 !important");
      nextAndPrevious.forEach((element) =>
        element?.setAttribute("style", "opacity: 0 !important")
      );
      headerGradient?.setAttribute("style", "display: none !important");
      headerTitle?.setAttribute("style", "display: none !important");
      
    }, HIDE_CONTROLS_TIMEOUT);

    window.addEventListener("mousemove", () => {
      if (isHidden) {
        const { controls, nextAndPrevious, headerGradient, headerTitle } = getControls();

        isHidden = false;
        hideControls();

        controls?.setAttribute("style", "opacity: 1 !important");
        nextAndPrevious.forEach((element) =>
          element?.setAttribute("style", "opacity: 1 !important")
        );
        headerGradient?.setAttribute("style", "display: block !important");
        headerTitle?.setAttribute("style", "display: block !important");
      }
    });
  });
})();

I am writing this to appreciate your effort for this. The Udemy controls when not hidden are very frustrating.