☰

[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.

As of 20/12/2019. See the latest version.

// ==UserScript==
// @name            [youtube.com] Arrow buttons constant binding
// @name:ru         [youtube.com] Неизменные действия для клавиш стрелок
// @description     The arrow buttons don't depend on slider/seekbar focus. Left/Right - always playback, Down/Up - always sound volume.
// @description:ru  Клавиши стрелок не зависят от фокуса ползунков. Влево/Вправо - всегда перемотка, Вниз/Вверх - всегда громкость.
// @namespace       youtube.com/arrows.constant.binding
// @author          Zaytsev Artem
// @version         0.0.1.3
// @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");
var q_vp = document.getElementsByClassName("ytp-volume-panel")[0];
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});
		document.getElementsByClassName("html5-video-player")[0].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");
var q_vsh = document.getElementsByClassName("ytp-volume-slider-handle")[0];
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});
		document.getElementsByClassName("html5-video-player")[0].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");
var q_pb = document.getElementsByClassName("ytp-progress-bar")[0];
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});
    document.getElementsByClassName("html5-video-player")[0].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)
}