Auto-hide video controls almost instantly / really quickly for the Twitch desktop and mobile site

Auto-hides video controls for the Twitch desktop and mobile site after half a second (500 ms) of mouse inactivity over the video player area. Unhide the controls as you would usually do on Twitch.

Asenna tämä skripti?
Author's suggested script

Saatat myös pitää

Asenna tämä skripti 
// ==UserScript==
// @name         Auto-hide video controls almost instantly / really quickly for the Twitch desktop and mobile site
// @author       NWP
// @description  Auto-hides video controls for the Twitch desktop and mobile site after half a second (500 ms) of mouse inactivity over the video player area. Unhide the controls as you would usually do on Twitch.
// @namespace    https://greasyfork.org/users/877912
// @version      0.2
// @license      MIT
// @match        *://*.twitch.tv/*
// @match        *://m.twitch.tv/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const idleTime = 500;
    let idleTimeoutRegular, idleTimeoutMobile, cursorTimeout;
    let currentUrl = window.location.href;

    function hideElementsRegular() {
        const overlay = document.querySelector(".video-player__overlay");
        const extraElement = document.querySelector(".kLMGYG .ejeLlX");
        if (overlay) overlay.style.display = 'none';
        if (extraElement) extraElement.style.display = 'none';
    }

    function showElementsRegular() {
        const overlay = document.querySelector(".video-player__overlay");
        const extraElement = document.querySelector(".kLMGYG .ejeLlX");
        if (overlay) overlay.style.display = '';
        if (extraElement) extraElement.style.display = '';
    }

    function hideElementsMobile() {
        const overlay = document.querySelector(".video-player__overlay");
        if (overlay) overlay.style.display = 'none';
    }

    function showElementsMobile() {
        const overlay = document.querySelector(".video-player__overlay");
        if (overlay) overlay.style.display = '';
    }

    function hideCursor() {
        document.querySelector(".video-player__container").style.cursor = 'none';
    }

    function showCursor() {
        document.querySelector(".video-player__container").style.cursor = '';
    }

    function onMouseMoveRegular() {
        clearTimeout(idleTimeoutRegular);
        clearTimeout(cursorTimeout);
        showElementsRegular();
        showCursor();
        idleTimeoutRegular = setTimeout(hideElementsRegular, idleTime);
        const videoPlayer = document.querySelector(".video-player__container");
        if (videoPlayer && videoPlayer.matches(':hover')) {
            cursorTimeout = setTimeout(hideCursor, idleTime);
        }
    }

    function onMouseMoveMobile() {
        clearTimeout(idleTimeoutMobile);
        clearTimeout(cursorTimeout);
        showElementsMobile();
        showCursor();
        idleTimeoutMobile = setTimeout(hideElementsMobile, idleTime);
        const videoPlayer = document.querySelector(".video-player__container");
        if (videoPlayer && videoPlayer.matches(':hover')) {
            cursorTimeout = setTimeout(hideCursor, idleTime);
        }
    }

    function onMouseEnterMobile() {
        showElementsMobile();
    }

    function onMouseLeaveMobile() {
        hideElementsMobile();
    }

    function sendKeyPress(key) {
        const event = new KeyboardEvent('keydown', {
            key: key,
            keyCode: key === 'F' ? 70 : key === 'Escape' ? 27 : key === 'T' ? 84 : 0, // 'F' = 70, 'ESC' = 27, 'T' = 84
            bubbles: true,
            altKey: key === 'T' // alt + T for theatre mode
        });
        document.dispatchEvent(event);
    }

    function handleFullscreenToggle() {
        const isFullscreen = document.fullscreenElement != null;
        if (isFullscreen) {
            document.exitFullscreen();
        } else {
            const videoPlayer = document.querySelector(".video-player__container");
            if (videoPlayer) {
                videoPlayer.requestFullscreen();
            }
        }
    }

    function handleTheatreModeToggle() {
        sendKeyPress('T');
    }

    function onDoubleClickRegular() {
        const isTheatreMode = document.querySelector("div[data-a-target='root-scroller']").classList.contains("theatre");
        if (document.fullscreenElement) {
            document.exitFullscreen();
            if (isTheatreMode) {
                sendKeyPress('T');
            }
        } else if (isTheatreMode) {
            handleFullscreenToggle();
        } else {
            handleFullscreenToggle();
        }
    }

    function onDoubleClickMobile() {
        sendKeyPress('F');
    }

    function onFullscreenButtonClick() {
        handleFullscreenToggle();
    }

    function onTheatreModeButtonClick() {
        handleTheatreModeToggle();
    }

    function setupMouseListener() {
        const regularTwitch = document.querySelector("div[data-a-player-state='']");
        if (regularTwitch) {
            regularTwitch.addEventListener('mousemove', onMouseMoveRegular);
            regularTwitch.addEventListener('dblclick', onDoubleClickRegular);
            onMouseMoveRegular();
        }

        const mobileTwitch = document.querySelector("div[data-a-target='video-player']");
        if (mobileTwitch) {
            mobileTwitch.addEventListener('mousemove', onMouseMoveMobile);
            mobileTwitch.addEventListener('mouseenter', onMouseEnterMobile);
            mobileTwitch.addEventListener('mouseleave', onMouseLeaveMobile);
            mobileTwitch.addEventListener('dblclick', onDoubleClickMobile);
            onMouseMoveMobile();
        }

        const fullscreenButton = document.querySelector("button[aria-label*='Fullscreen']");
        if (fullscreenButton) {
            fullscreenButton.addEventListener('click', onFullscreenButtonClick);
        }

        const theatreModeButton = document.querySelector("button[aria-label*='Theatre Mode']");
        if (theatreModeButton) {
            theatreModeButton.addEventListener('click', onTheatreModeButtonClick);
        }

        document.addEventListener('keydown', (event) => {
            if (event.key === 'f' || event.key === 'Escape') {
                handleFullscreenToggle();
            }
            if (event.altKey && event.key === 't') {
                handleTheatreModeToggle();
            }
        });
    }

    function checkUrlChange() {
        if (currentUrl !== window.location.href) {
            currentUrl = window.location.href;
            setupMouseListener();
        }
    }

    const observer = new MutationObserver(checkUrlChange);
    observer.observe(document.body, { childList: true, subtree: true });

    window.addEventListener('load', () => {
        setTimeout(setupMouseListener, 1000);
    });

    setupMouseListener();
})();