☰

YouTube Hide UI on Arrow Keys, Show on Mouse Move

Prevent the YouTube UI from appearing when using arrow keys, but make it visible on mouse movement (automatically detects all .ytp- elements)

  1. // ==UserScript==
  2. // @name         YouTube Hide UI on Arrow Keys, Show on Mouse Move
  3. // @version      2.6
  4. // @namespace    https://github.com/KaanAlper/youtube-ui-hide
  5. // @license      GPL-3.0
  6. // @description  Prevent the YouTube UI from appearing when using arrow keys, but make it visible on mouse movement (automatically detects all .ytp- elements)
  7. // @author       Kaan Alper Karaaslan
  8. // @match        http://*.youtube.com/*
  9. // @match        http://youtube.com/*
  10. // @match        https://*.youtube.com/*
  11. // @match        https://youtube.com/*
  12. // @grant        none
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     let elements = [];
  19.  
  20.     const updateElements = () => {
  21.         elements = document.querySelectorAll(`
  22.             .ytp-doubletap-tooltip, .ytp-chrome-bottom, .ytp-gradient-bottom,
  23.             .ytp-title-text, .ytp-share-button, .ytp-right-controls,
  24.             .ytp-watch-later-button, .ytp-doubletap-ui-legacy, .ytp-chrome-top,.ytp-gradient-top
  25.         `);
  26.     };
  27.  
  28.     let hideTimeout, cursorTimeout;
  29.  
  30.     const toggleUI = (show) => {
  31.         elements.forEach(el => {
  32.             if (el) {
  33.                 el.style.opacity = show ? '1' : '0';
  34.                 el.style.pointerEvents = show ? 'auto' : 'none';
  35.             }
  36.         });
  37.         document.body.style.cursor = show ? 'auto' : 'none';
  38.     };
  39.  
  40.     const resetTimers = () => {
  41.         clearTimeout(hideTimeout);
  42.         clearTimeout(cursorTimeout);
  43.         hideTimeout = setTimeout(() => toggleUI(false), 2000);
  44.         cursorTimeout = setTimeout(() => document.body.style.cursor = 'none', 2000);
  45.     };
  46.  
  47.     document.addEventListener('keydown', (e) => {
  48.         if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'F'].includes(e.key)) {
  49.             clearTimeout(hideTimeout);
  50.             clearTimeout(cursorTimeout);
  51.             toggleUI(false);
  52.         }
  53.     });
  54.  
  55.     document.addEventListener('mousemove', () => {
  56.         toggleUI(true);
  57.         resetTimers();
  58.     });
  59.  
  60.     // MutationObserver ile yeni öğeler yüklendiğinde güncelleme yap
  61.     const observer = new MutationObserver(() => {
  62.         updateElements();
  63.     });
  64.  
  65.     observer.observe(document.body, {
  66.         childList: true,
  67.         subtree: true
  68.     });
  69.  
  70.     updateElements();
  71. })();