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. });