☰

[youtube.com] Arrow buttons constant binding

The arrow buttons don't depend on slider/seekbar focus. Left/Right - always playback, Down/Up - always sound volume.

  1. // ==UserScript==
  2. // @name            [youtube.com] Arrow buttons constant binding
  3. // @name:ru         [youtube.com] Неизменные действия для клавиш стрелок
  4. // @description     The arrow buttons don't depend on slider/seekbar focus. Left/Right - always playback, Down/Up - always sound volume.
  5. // @description:ru  Клавиши стрелок не зависят от фокуса ползунков. Влево/Вправо - всегда перемотка, Вниз/Вверх - всегда громкость.
  6. // @namespace       youtube.com/arrows.constant.binding
  7. // @author          Zaytsev Artem
  8. // @version         0.0.1.4
  9. // @match           *://*.youtube.com/*
  10. // @run-at          document-end
  11. // ==/UserScript==
  12.  
  13. var acb_debug = false;
  14. var acb_logstr = "";
  15.  
  16. //Debug console logging.
  17. function acb_log(msg) {
  18. 	if (acb_debug) {
  19. 		console.log("debug | " + msg);
  20. 	}
  21. }
  22.  
  23. //Debug console logging.
  24. function acb_log1(msg) {
  25. 	if (acb_debug) {
  26. 		acb_logstr = "debug | " + msg;
  27. 		//window.stdout.write(acb_logstr);
  28. 	}
  29. }
  30.  
  31. //Debug console logging.
  32. function acb_log2(msg) {
  33. 	if (acb_debug) {
  34. 		acb_logstr = acb_logstr + msg;
  35. 		console.log(acb_logstr);
  36. 		acb_logstr = "";
  37. 	}
  38. }
  39.  
  40. if (acb_debug) {
  41. 	document.addEventListener('focusin', (event) => {
  42. 		acb_log("Focusin class: " + event.target.className + "; id: " + event.target.id + "; tag: " + event.target.tagName);
  43. 	});
  44. }
  45.  
  46. //Sound volume panel.
  47. acb_log1("Quering the .ytp-volume-panel...");
  48. var q_vp = document.getElementsByClassName("ytp-volume-panel")[0];
  49. if (q_vp) {
  50. 	acb_log2(" - ok.");
  51. 	q_vp.addEventListener('focus', (event) => {
  52. 		acb_log(".ytp-volume-panel tried to get focus.");
  53. 		//event.target.focusout();
  54. 		//event.target.blur();
  55. 		document.getElementsByClassName("html5-video-player")[0].focus({preventScroll:true});
  56. 	});
  57. 	window.setTimeout(function(){
  58. 		q_vp.setAttribute("tabindex", "-1");
  59. 		acb_log("Have set .ytp-volume-panel's tabindex to -1.");
  60. 	}, 3000)
  61. } else acb_log2(" - not found.");
  62.  
  63. //Somehow the slider also wants to get the focus although it doesn't have a tabindex set.
  64. acb_log1("Quering the .ytp-volume-slider-handle...");
  65. var q_vsh = document.getElementsByClassName("ytp-volume-slider-handle")[0];
  66. if (q_vsh) {
  67. 	acb_log2(" - ok.");
  68. 	q_vsh.addEventListener('focus', (event) => {
  69. 		acb_log(".ytp-volume-slider-handle tried to get focus.");
  70. 		document.getElementsByClassName("html5-video-player")[0].focus({preventScroll:true});
  71. 	});
  72. 	window.setTimeout(function(){
  73. 		q_vsh.setAttribute("tabindex", "-1");
  74. 		acb_log("Have set .ytp-volume-slider-handle's tabindex to -1.");
  75. 	}, 3000)
  76. } else acb_log2(" - not found.");
  77.  
  78. //The player playback seekbar.
  79. acb_log1("Quering the .ytp-progress-bar...");
  80. var q_pb = document.getElementsByClassName("ytp-progress-bar")[0];
  81. if (q_pb) {
  82. 	acb_log2(" - ok.");
  83. 	q_pb.addEventListener('focus', (event) => {
  84. 		acb_log(".ytp-progress-bar tried to get focus.");
  85. 		document.getElementsByClassName("html5-video-player")[0].focus({preventScroll:true});
  86. 	});
  87. 	window.setTimeout(function(){
  88. 		q_pb.setAttribute("tabindex", "-1");
  89. 		acb_log("Have set .ytp-progress-bar's tabindex to -1.");
  90. 	}, 3000)
  91. } else acb_log2(" - not found.");