☰

YouTube Spacebar Play/Pause

Allows using spacebar to play/pause YouTube videos/shorts

  1. // ==UserScript==
  2. // @name         YouTube Spacebar Play/Pause
  3. // @namespace    YTspacebarxFIRKx
  4. // @version      1.04
  5. // @description  Allows using spacebar to play/pause YouTube videos/shorts
  6. // @author       xFIRKx
  7. // @match        http://*.youtube.com/*
  8. // @match        https://*.youtube.com/*
  9. // @exclude      https://*.youtube.com/embed/*
  10. // @homepageURL  https://greasyfork.org/it/scripts/493791-youtube-spacebar-play-pause
  11. // @grant        none
  12. // ==/UserScript==
  13.  
  14. let lastVisibilityChangeTime = Date.now(); // Track the time of the last visibility change
  15. let isShowDesktopAction = false; // Flag to track if the visibility change was caused by the "show desktop" action
  16. let videoClickedOrFocused = false; // Flag to track if video is clicked on or in focus
  17. let scriptEnabled = false; // Flag to control script enabling/disabling
  18.  
  19. // Event listener for visibility change
  20. document.addEventListener('visibilitychange', function() {
  21.     if (document.visibilityState === 'hidden') {
  22.         lastVisibilityChangeTime = Date.now(); // Update the time of the last visibility change
  23.         isShowDesktopAction = true; // Assume "show desktop" action when the window becomes hidden
  24.         scriptEnabled = false; // Disable the script when the window becomes hidden
  25.     } else {
  26.         isShowDesktopAction = false; // Reset the flag otherwise
  27.         if (!videoClickedOrFocused) {
  28.             scriptEnabled = true; // Enable the script when the window becomes visible, unless a video is clicked or focused
  29.         }
  30.     }
  31. });
  32.  
  33. let cachedMode = "";
  34.  
  35. document.addEventListener("keydown", function onEvent(e) {
  36.     e.stopPropagation(); // Stop event propagation
  37.  
  38.     if (!scriptEnabled || e.code !== "Space") return;
  39.  
  40.     let ae = document.activeElement;
  41.     if (ae.tagName.toLowerCase() == "input" || ae.hasAttribute("contenteditable")) return;
  42.     e.preventDefault();
  43.     e.stopImmediatePropagation();
  44.  
  45.     if (document.location.hostname == "music.youtube.com") {
  46.         document.querySelector("#play-pause-button").click();
  47.     } else {
  48.         let player = document.querySelector(".html5-video-player");
  49.         if (player.classList.contains("paused-mode")) cachedMode = "paused-mode";
  50.         if (player.classList.contains("playing-mode")) cachedMode = "playing-mode";
  51.         if (player.classList.contains("ended-mode")) cachedMode = "ended-mode";
  52.  
  53.         setTimeout(() => {
  54.             let player = document.querySelector(".html5-video-player");
  55.             if (player.classList.contains(cachedMode)) {
  56.                 document.querySelector("button.ytp-play-button").click();
  57.                 cachedMode = "";
  58.             }
  59.         }, 200);
  60.     }
  61. });
  62.  
  63. // Disable the script initially
  64. scriptEnabled = false;
  65.  
  66. // Event listener for window focus
  67. window.addEventListener('focus', function() {
  68.     if (!videoClickedOrFocused && Date.now() - lastVisibilityChangeTime > 20) {
  69.         scriptEnabled = true; // Enable the script after alt tabbing and unfocusing, unless a video is clicked or focused
  70.     }
  71. });
  72.  
  73. // Event listener for window blur
  74. window.addEventListener('blur', function() {
  75.     scriptEnabled = false; // Disable the script when the window loses focus
  76. });
  77.  
  78. // Event listener for clicking on video
  79. document.addEventListener('click', function(event) {
  80.     if (event.target.tagName.toLowerCase() === 'video') {
  81.         event.stopPropagation(); // Stop event propagation
  82.         videoClickedOrFocused = true; // Set flag to true when clicking on the video
  83.         scriptEnabled = false; // Disable the script after clicking on the video
  84.     }
  85. });
  86.  
  87. // Event listener for focusing on video
  88. document.addEventListener('focusin', function(event) {
  89.     if (event.target.tagName.toLowerCase() === 'video') {
  90.         videoClickedOrFocused = true; // Set flag to true when focusing on the video
  91.         scriptEnabled = false; // Disable the script when a video is focused
  92.     }
  93. });
  94.  
  95. // Event listener for blurring from video
  96. document.addEventListener('focusout', function(event) {
  97.     if (event.target.tagName.toLowerCase() === 'video') {
  98.         videoClickedOrFocused = false; // Reset flag when blurring from the video
  99.     }
  100. });
  101.  
  102. // Event listener for visibility change (switching tabs)
  103. document.addEventListener('visibilitychange', function() {
  104.     if (isShowDesktopAction || videoClickedOrFocused) {
  105.         scriptEnabled = false; // Disable the script if the visibility change was caused by the "show desktop" action or a video is clicked or focused
  106.         isShowDesktopAction = false; // Reset the "show desktop" action flag
  107.     }
  108. });