☰

[youtube.com] Arrow keys hate focus

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

As of 2019-12-19. See the latest version.

// ==UserScript==
// @name            [youtube.com] Arrow keys hate focus
// @name:ru         [youtube.com] Клавиши стрелок гнобят фокус
// @description     No focus depending arrow keys binding. Left/Right - always playback, down/up - always volume.
// @description:ru  Клавиши стрелок не зависят от фокуса. Влево/Вправо - всегда перемотка, вниз/вверх - всегда громкость.
// @namespace       youtube.com/arrows.hate.focus
// @author          Zaytsev Artem
// @version         0.0.1.1
// @match           https://*.youtube.com/*
// ==/UserScript==

/*
document.addEventListener('focusin', (event) => {
	console.log("GM-youtube-novf: Focusin: " + event.target.className);
});
*/

//Sound volume panel.
//console.log("GM-youtube-novf: Quering the .ytp-volume-panel...");
var q_vp = document.querySelector(".ytp-volume-panel");
if (q_vp) {
	q_vp.addEventListener('focus', (event) => {
		//console.log("GM-youtube-novf: .ytp-volume-panel tried to get focus.");
		//event.target.focusout();
		//event.target.blur();
		document.querySelector(".html5-video-player").focus({preventScroll:true});
	});
	console.log("GM-youtube-novf: .ytp-volume-panel element found.");
	window.setTimeout(function(){
		//console.log("GM-youtube-novf: Setting .ytp-volume-panel's tabindex to -1...");
		q_vp.setAttribute("tabindex", "-1");
	}, 3000)
}

//Somehow the slider also wants to get the focus although it doesn't have a tabindex set.
var q_vsh = document.querySelector(".ytp-volume-slider-handle");
if (q_vsh) {
	q_vsh.addEventListener('focus', (event) => {
		//console.log("GM-youtube-novf: .ytp-volume-slider-handle tried to get focus.");
		document.querySelector(".html5-video-player").focus({preventScroll:true});
	});
	window.setTimeout(function(){
		//console.log("GM-youtube-novf: Setting .ytp-volume-slider-handle's tabindex to -1...");
		q_vsh.setAttribute("tabindex", "-1");
	}, 3000)
}

//The player playback seekbar.
var q_pb = document.querySelector(".ytp-progress-bar");
if (q_pb) {
	q_pb.addEventListener('focus', (event) => {
		//console.log("GM-youtube-novf: .ytp-progress-bar tried to get focus.");
		document.querySelector(".html5-video-player").focus({preventScroll:true});
	});
	window.setTimeout(function(){
		//console.log("GM-youtube-novf: Setting .ytp-progress-bar's tabindex to -1...");
		q_pb.setAttribute("tabindex", "-1");
	}, 3000)
}