Adds basic keyboard controls for video playback for the videos in boot.dev
// ==UserScript==
// @name Boot.dev Keyboard Control for Video
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Adds basic keyboard controls for video playback for the videos in boot.dev
// @author NymDev
// @match https://*.boot.dev/*
// @icon https://media.licdn.com/dms/image/v2/D560BAQGLKuZWsexDdQ/company-logo_200_200/B56Zrxve7ELIAI-/0/1764992348316/bootdotdev_logo?e=2147483647&v=beta&t=_ixDnPg_rbRO8b2tFEJ5B_JjNCBiyBJRvUtZv98y7KQ
// @grant none
// ==/UserScript==
(function () {
'use strict';
let video_element_focus = false;
document.addEventListener('click', (event) => {
const clickedElement = event.target;
// If you clicked a video control button or icon, immediately remove focus from it
if (clickedElement.closest('button') || clickedElement.closest('.video-poster')) {
document.activeElement.blur();
}
if (clickedElement.closest('.video-poster') || clickedElement.closest('video')) {
video_element_focus = true;
} else {
video_element_focus = false;
}
});
document.addEventListener('keydown', (event) => {
if (video_element_focus === true) {
// Removed TypeScript type syntax so browser JavaScript can run it safely
const video_element = document.querySelector(".h-full.video-poster");
// If the element doesn't exist on this part of Boot.dev, step out safely
if (!video_element) return;
// Convert the key to lowercase for matching
switch (event.key.toLowerCase()) {
case 'f':
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
video_element.requestFullscreen().catch(err => console.warn(err));
}
break;
case 'arrowright':
video_element.currentTime += 5;
break;
case 'arrowleft':
video_element.currentTime -= 5;
break;
case ' ':
event.preventDefault(); // Stop spacebar from scrolling down your page
if (video_element.paused) {
video_element.play();
} else {
video_element.pause();
}
break;
case 'arrowup':
event.preventDefault(); // Stop up arrow from scrolling page
// Volume values range strictly between 0.0 and 1.0 (0.1 represents 10%)
video_element.volume = Math.min(1, video_element.volume + 0.1);
break;
case 'arrowdown':
event.preventDefault(); // Stop down arrow from scrolling page
video_element.volume = Math.max(0, video_element.volume - 0.1);
break;
default:
break;
}
}
});
})();