☰

[youtube.com] Arrow keys hate focus

No focus depending arrow keys binding. Left/Right - always playback, down/up - always volume.

当前为 2019-12-19 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name            [youtube.com] Arrow keys hate focus
  3. // @name:ru         [youtube.com] Клавиши стрелок гнобят фокус
  4. // @description     No focus depending arrow keys binding. Left/Right - always playback, down/up - always volume.
  5. // @description:ru  Клавиши стрелок не зависят от фокуса. Влево/Вправо - всегда перемотка, вниз/вверх - всегда громкость.
  6. // @namespace       youtube.com/arrows.hate.focus
  7. // @author          Zaytsev Artem
  8. // @version         0.0.1
  9. // @match           https://*.youtube.com/*
  10. // ==/UserScript==
  11.  
  12. /*
  13. document.addEventListener('focusin', (event) => {
  14.   console.log("GM-youtube-novf: Focusin: " + event.target.className);
  15. });
  16. */
  17.  
  18. //Sound volume panel.
  19. //console.log("GM-youtube-novf: Quering the .ytp-volume-panel...");
  20. var q_vp = document.querySelector(".ytp-volume-panel");
  21. if (q_vp) {
  22. 	q_vp.addEventListener('focus', (event) => {
  23. 		//console.log("GM-youtube-novf: .ytp-volume-panel tried to get focus.");
  24. 	  //event.target.focusout();
  25. 	  //event.target.blur();
  26. 		document.querySelector(".html5-video-player").focus({preventScroll:true});
  27. 	});
  28. 	console.log("GM-youtube-novf: .ytp-volume-panel element found.");
  29. 	window.setTimeout(function(){
  30. 		//console.log("GM-youtube-novf: Setting .ytp-volume-panel's tabindex to -1...");
  31.     q_vp.setAttribute("tabindex", "-1");
  32. 	}, 3000)
  33. }
  34.  
  35. //Somehow the slider also wants to get the focus although it doesn't have a tabindex set.
  36. var q_vsh = document.querySelector(".ytp-volume-slider-handle");
  37. if (q_vsh) {
  38. 	q_vsh.addEventListener('focus', (event) => {
  39. 		//console.log("GM-youtube-novf: .ytp-volume-slider-handle tried to get focus.");
  40. 		document.querySelector(".html5-video-player").focus({preventScroll:true});
  41. 	});
  42. 	window.setTimeout(function(){
  43. 		//console.log("GM-youtube-novf: Setting .ytp-volume-slider-handle's tabindex to -1...");
  44.     q_vsh.setAttribute("tabindex", "-1");
  45.   }, 3000)
  46. }
  47.  
  48. //The player playback seekbar.
  49. var q_pb = document.querySelector(".ytp-progress-bar");
  50. if (q_pb) {
  51. 	q_pb.addEventListener('focus', (event) => {
  52. 		//console.log("GM-youtube-novf: .ytp-progress-bar tried to get focus.");
  53. 		document.querySelector(".html5-video-player").focus({preventScroll:true});
  54. 	});
  55. 	window.setTimeout(function(){
  56. 		//console.log("GM-youtube-novf: Setting .ytp-progress-bar's tabindex to -1...");
  57.     q_pb.setAttribute("tabindex", "-1");
  58.   }, 3000)
  59. }