Add custom keyboard shortcuts for YouTube navigation with UI feedback and improved controls
// ==UserScript==
// @name ytkb
// @namespace http://violentmonkey.net/
// @version 0.4.2
// @description Add custom keyboard shortcuts for YouTube navigation with UI feedback and improved controls
// @match https://www.youtube.com/*
// @grant none
// @license MIT
// ==/UserScript==
(() => {
const SEEK_TIME = 5; // Seconds to seek forward/backward
const VOLUME_CHANGE = 5; // Percentage to change volume
const MAX_SPEED = 3.0; // Maximum playback speed
const MIN_SPEED = 0.1; // Minimum playback speed
const state = {
currentTime: 0,
volume: 0,
muted: false,
playbackRate: 1.0,
duration: 0,
};
// Helper functions
const formatTime = (seconds) => {
const date = new Date(seconds * 1000);
const parts = [
date.getUTCHours(),
date.getUTCMinutes(),
date.getUTCSeconds(),
];
return parts
.map((part) => part.toString().padStart(2, "0"))
.filter((part, index) => part !== "00" || index > 0)
.join(":");
};
const getVideo = () => document.querySelector("video");
// UI element creation and management
const createUIElement = () => {
const uiElement = document.createElement("div");
uiElement.id = "ytkb-ui";
uiElement.style.cssText = `
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
border-radius: 5px;
font-size: 16px;
z-index: 9999;
display: none;
text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
font-family: monospace;
`;
const playerContainer =
document.getElementById("movie_player") || document.body;
playerContainer.appendChild(uiElement);
return uiElement;
};
const createCurrentStateElement = () => {
const currentStateElement = document.createElement("div");
currentStateElement.id = "ytkb-current-state";
currentStateElement.style.cssText = `
padding: 8px 12px;
background-color: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
margin-top: 12px;
color: white;
border-radius: 5px;
font-size: 14px;
font-family: monospace;
width: fit-content;
`;
return currentStateElement;
};
let uiElement;
let stateUpdateInterval;
const showUIFeedback = (message) => {
if (!uiElement) {
uiElement = createUIElement();
}
uiElement.textContent = message;
uiElement.style.display = "block";
setTimeout(() => {
uiElement.style.display = "none";
}, 1500);
};
// Video state management
const updateVideoState = () => {
const video = getVideo();
if (!video) return;
Object.assign(state, {
currentTime: video.currentTime,
volume: video.volume,
muted: video.muted,
playbackRate: video.playbackRate,
duration: video.duration,
});
const stateText = `${formatTime(state.currentTime)} / ${formatTime(
state.duration
)} | Volume: ${Math.round(state.volume * 100)}% | Muted: ${
state.muted ? "On" : "Off"
} | Speed: ${state.playbackRate.toFixed(2)}x`;
document.getElementById("ytkb-current-state").textContent = stateText;
};
const startVideoStateUpdate = () => {
if (!stateUpdateInterval) {
stateUpdateInterval = setInterval(updateVideoState, 1000);
}
};
const stopVideoStateUpdate = () => {
clearInterval(stateUpdateInterval);
stateUpdateInterval = null;
};
// Keyboard event handling
const handleKeydown = (e) => {
if (
e.target.tagName.toLowerCase() === "input" ||
e.target.tagName.toLowerCase() === "textarea"
) {
return;
}
const video = getVideo();
if (!video) return;
let handled = true;
let feedbackMessage = "";
const ctrl = e.ctrlKey;
switch (e.key.toLowerCase()) {
case "h":
case "arrowleft": {
// Rewind
const seekBackward = ctrl ? SEEK_TIME * 2 : SEEK_TIME;
video.currentTime = Math.max(0, video.currentTime - seekBackward);
feedbackMessage = `Rewound ${seekBackward}s`;
state.currentTime = video.currentTime;
break;
}
case "j":
case "arrowdown": {
// Volume down
const volumeDownChange = ctrl ? VOLUME_CHANGE * 2 : VOLUME_CHANGE;
const newVolume = Math.max(0, video.volume - volumeDownChange / 100);
video.volume = newVolume;
feedbackMessage = `Volume: ${Math.round(newVolume * 100)}%`;
state.volume = newVolume;
break;
}
case "k":
case "arrowup": {
// Volume up
const volumeUpChange = ctrl ? VOLUME_CHANGE * 2 : VOLUME_CHANGE;
const newVolume = Math.min(1, video.volume + volumeUpChange / 100);
video.volume = newVolume;
feedbackMessage = `Volume: ${Math.round(newVolume * 100)}%`;
state.volume = newVolume;
break;
}
case "l":
case "arrowright": {
// Forward
const seekForward = ctrl ? SEEK_TIME * 2 : SEEK_TIME;
video.currentTime = Math.min(
video.duration,
video.currentTime + seekForward
);
feedbackMessage = `Forward ${seekForward}s`;
state.currentTime = video.currentTime;
break;
}
case "m": // Mute
video.muted = !video.muted;
feedbackMessage = `Muted: ${video.muted ? "On" : "Off"}`;
state.muted = video.muted;
break;
case ",": // Decrease speed
video.playbackRate = Math.max(MIN_SPEED, video.playbackRate - 0.25);
feedbackMessage = `Speed: ${video.playbackRate.toFixed(2)}x`;
state.playbackRate = video.playbackRate;
break;
case ".": // Increase speed
video.playbackRate = Math.min(MAX_SPEED, video.playbackRate + 0.25);
feedbackMessage = `Speed: ${video.playbackRate.toFixed(2)}x`;
state.playbackRate = video.playbackRate;
break;
case "z": // Reset speed
video.playbackRate = 1.0;
feedbackMessage = `Speed: ${video.playbackRate.toFixed(2)}x`;
state.playbackRate = video.playbackRate;
break;
case "i": // Toggle Picture-in-Picture
if (document.pictureInPictureElement) {
document.exitPictureInPicture();
feedbackMessage = "Picture-in-Picture: Off";
} else if (document.pictureInPictureEnabled) {
video.requestPictureInPicture();
feedbackMessage = "Picture-in-Picture: On";
}
break;
case "f": // Toggle fullscreen
document
.querySelector(".ytp-fullscreen-button")
.dispatchEvent(new MouseEvent("click"));
break;
// case ' ': // Play/Pause
// if (video.paused) {
// video.play();
// feedbackMessage = 'Playing';
// } else {
// video.pause();
// feedbackMessage = 'Paused';
// }
// break;
default:
handled = false;
}
if (handled) {
e.preventDefault();
e.stopPropagation();
showUIFeedback(feedbackMessage);
updateVideoState();
}
};
// Event listeners
document.addEventListener("keydown", handleKeydown, {
capture: true,
});
window.addEventListener("load", startVideoStateUpdate);
window.addEventListener("unload", stopVideoStateUpdate);
let stateElementCreated = false;
const interval = setInterval(() => {
if (stateElementCreated) {
clearInterval(interval);
return;
}
const topRow = document.getElementById("below");
if (topRow) {
topRow.insertBefore(createCurrentStateElement(), topRow.firstChild);
stateElementCreated = true;
}
}, 500);
})();