Provides more control features for Youtube Shorts, including volume control, progress bar, auto-scroll, hotkeys, and more.
As of
// ==UserScript==
// @name Better Youtube Shorts
// @name:zh-CN 更好的 Youtube Shorts
// @name:zh-TW 更好的 Youtube Shorts
// @namespace Violentmonkey Scripts
// @version 1.6.7
// @description Provides more control features for Youtube Shorts, including volume control, progress bar, auto-scroll, hotkeys, and more.
// @description:zh-CN 为 Youtube Shorts提供更多的控制功能，包括音量控制，进度条，自动滚动，快捷键等等。
// @description:zh-TW 為 Youtube Shorts提供更多的控制功能，包括音量控制，進度條，自動滾動，快捷鍵等等。
// @author Meriel
// @match *://www.youtube.com/*
// @run-at document-start
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_registerMenuCommand
// @license MIT
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// ==/UserScript==
(() => {
let userscriptInitialized = false;
(() => {
const urlChange = (event = null) => {
const destinationUrl = event?.destination?.url || "";
if (destinationUrl.startsWith("about:blank")) return;
const href = destinationUrl || location.href;
const isShorts = href.includes("youtube.com/shorts");
if (userscriptInitialized && !isShorts) {
localtion.href = destinationUrl;
userscriptInitialized = false;
} else if (!userscriptInitialized && isShorts) {
(() => {
let volumeStyle = GM_getValue("volumeStyle");
if (volumeStyle === void 0) {
volumeStyle = "speaker";
GM_setValue("volumeStyle", volumeStyle);
}
GM_addStyle(
`input[type="range"].volslider {
height: 14px;
-webkit-appearance: none;
margin: 10px 0;
}
input[type="range"].volslider:focus {
outline: none;
}
input[type="range"].volslider::-webkit-slider-runnable-track {
height: 8px;
cursor: pointer;
box-shadow: 0px 0px 0px #000000;
background: rgb(50 50 50);
border-radius: 25px;
border: 1px solid #000000;
}
${
volumeStyle === "dot"
? `input[type="range"].volslider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
margin-top: -4px;
border-radius: 50%;
background: white;
}`
: `input[type="range"].volslider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: -7px;
border-radius: 0px;
background-image: url("https://i.imgur.com/vcQoCVS.png");
background-size: 20px;
background-repeat: no-repeat;
background-position: 50%;
}`
}
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: rgb(50 50 50);
}
.switch {
position: relative;
display: inline-block;
width: 46px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #ff0000;
}
input:focus + .slider {
box-shadow: 0 0 1px #ff0000;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 12px;
}
.slider.round:before {
border-radius: 50%;
}`
);
let seekMouseDown = false;
let lastCurSeconds = 0;
let video = null;
let audioInitialized = false;
let autoScroll = GM_getValue("autoScroll", true);
let volume = GM_getValue("volume", 0);
let constantVolume = GM_getValue("constantVolume");
let operationMode = GM_getValue("operationMode");
if (constantVolume === void 0) {
constantVolume = false;
GM_setValue("constantVolume", constantVolume);
}
if (operationMode === void 0) {
operationMode = "Shorts";
GM_setValue("operationMode", operationMode);
}
GM_registerMenuCommand(
`Constant Volume: ${constantVolume ? "On" : "Off"}`,
function () {
constantVolume = !constantVolume;
GM_setValue("constantVolume", constantVolume);
location.reload();
}
);
GM_registerMenuCommand(
`Operating mode: ${operationMode}`,
function () {
operationMode = operationMode === "Video" ? "Shorts" : "Video";
GM_setValue("operationMode", operationMode);
location.reload();
}
);
GM_registerMenuCommand(`Volume Style: ${volumeStyle}`, () => {
volumeStyle = volumeStyle === "speaker" ? "dot" : "speaker";
GM_setValue("volumeStyle", volumeStyle);
location.reload();
});
const observer = new MutationObserver(
(mutations, shortsReady = false, videoPlayerReady = false) => {
outer: for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (!shortsReady) {
shortsReady = node.tagName === "YTD-SHORTS";
}
if (!videoPlayerReady) {
videoPlayerReady =
typeof node.className === "string" &&
node.className.includes("html5-main-video");
}
if (shortsReady && videoPlayerReady) {
observer.disconnect();
video = node;
if (constantVolume) {
video.volume = volume;
}
addShortcuts();
updateVidElemWithRAF();
break outer;
}
}
}
}
);
observer.observe(document.documentElement, {
childList: true,
subtree: true,
});
function videoOperationMode(e) {
if (!e.shiftKey) {
if (
e.key.toUpperCase() === "ARROWUP" ||
e.key.toUpperCase() === "ARROWDOWN"
) {
e.stopPropagation();
e.preventDefault();
const volumeSlider = document.querySelector("#byts-vol");
switch (e.key.toUpperCase()) {
case "ARROWUP":
video.volume = Math.min(1, video.volume + 0.01);
volumeSlider.value = video.volume;
break;
case "ARROWDOWN":
video.volume = Math.max(0, video.volume - 0.01);
volumeSlider.value = video.volume;
break;
default:
break;
}
} else if (
e.key.toUpperCase() === "ARROWLEFT" ||
e.key.toUpperCase() === "ARROWRIGHT"
) {
switch (e.key.toUpperCase()) {
case "ARROWLEFT":
video.currentTime -= 1;
break;
case "ARROWRIGHT":
video.currentTime += 1;
break;
default:
break;
}
}
} else {
switch (e.key.toUpperCase()) {
case "ARROWLEFT":
case "ARROWUP":
navigationButtonUp();
break;
case "ARROWRIGHT":
case "ARROWDOWN":
navigationButtonDown();
break;
default:
break;
}
}
}
function shortsOperationMode(e) {
if (
e.key.toUpperCase() === "ARROWUP" ||
e.key.toUpperCase() === "ARROWDOWN"
) {
e.stopPropagation();
e.preventDefault();
const volumeSlider = document.querySelector("#byts-vol");
if (e.shiftKey) {
switch (e.key.toUpperCase()) {
case "ARROWUP":
video.volume = Math.min(1, video.volume + 0.02);
volumeSlider.value = video.volume;
break;
case "ARROWDOWN":
video.volume = Math.max(0, video.volume - 0.02);
volumeSlider.value = video.volume;
break;
default:
break;
}
} else {
switch (e.key.toUpperCase()) {
case "ARROWUP":
navigationButtonUp();
break;
case "ARROWDOWN":
navigationButtonDown();
break;
default:
break;
}
}
} else if (
e.key.toUpperCase() === "ARROWLEFT" ||
e.key.toUpperCase() === "ARROWRIGHT"
) {
const volumeSlider = document.querySelector("#byts-vol");
if (e.shiftKey) {
switch (e.key.toUpperCase()) {
case "ARROWLEFT":
video.volume = Math.max(0, video.volume - 0.01);
volumeSlider.value = video.volume;
break;
case "ARROWRIGHT":
video.volume = Math.min(1, video.volume + 0.01);
volumeSlider.value = video.volume;
break;
default:
break;
}
} else {
switch (e.key.toUpperCase()) {
case "ARROWLEFT":
video.currentTime -= 1;
break;
case "ARROWRIGHT":
video.currentTime += 1;
break;
default:
break;
}
}
}
}
function addShortcuts() {
if (operationMode === "Video") {
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (node?.id === "byts-vol-div") {
document.addEventListener(
"keydown",
(e) => {
videoOperationMode(e);
if (constantVolume) {
constantVolume = false;
requestAnimationFrame(
() => (constantVolume = true)
);
}
},
{
capture: true,
}
);
observer.disconnect();
}
}
}
});
observer.observe(document.documentElement, {
childList: true,
subtree: true,
});
} else {
document.addEventListener(
"keydown",
(e) => {
shortsOperationMode(e);
if (constantVolume) {
constantVolume = false;
requestAnimationFrame(() => (constantVolume = true));
}
},
{
capture: true,
}
);
}
video.addEventListener("dblclick", () => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.querySelector("ytd-app").requestFullscreen();
}
});
document.addEventListener("keydown", (e) => {
if (
e.key.toUpperCase() === "ENTER" ||
e.key.toUpperCase() === "NUMPADENTER"
) {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.querySelector("ytd-app").requestFullscreen();
}
}
});
}
function padTo2Digits(num) {
return num.toString().padStart(2, "0");
}
function updateVidElemWithRAF() {
try {
updateVidElem();
} catch (_) {}
requestAnimationFrame(updateVidElemWithRAF);
}
function navigationButtonDown() {
document.querySelector("#navigation-button-down button").click();
}
function navigationButtonUp() {
document.querySelector("#navigation-button-up button").click();
}
function setVideoPlaybackTime(event, player) {
let rect = player.getBoundingClientRect();
let offsetX = event.clientX - rect.left;
if (offsetX < 0) {
offsetX = 0;
} else if (offsetX > player.offsetWidth) {
offsetX = player.offsetWidth - 1;
}
video.currentTime = (offsetX / player.offsetWidth) * video.duration;
}
function updateVidElem() {
const currentVideo = document.querySelector(
"#shorts-player > div.html5-video-container > video"
);
if (video !== currentVideo) {
video = currentVideo;
}
if (!audioInitialized && constantVolume) {
video.volume = volume;
}
const reel = document.querySelector(
"ytd-reel-video-renderer[is-active]"
);
if (reel === null) {
return;
}
if (operationMode === "Shorts") {
document.removeEventListener("keydown", videoOperationMode, {
capture: true,
});
document.addEventListener("keydown", shortsOperationMode, {});
} else {
document.removeEventListener("keydown", shortsOperationMode, {});
document.addEventListener("keydown", videoOperationMode, {
capture: true,
});
}
// Volume Slider
let volumeSliderDiv = reel.querySelector("#byts-vol-div");
let volumeSlider = reel.querySelector("#byts-vol");
let volumeTextDiv = reel.querySelector("#byts-vol-textdiv");
if (volumeSliderDiv === null) {
volumeSliderDiv = document.createElement("div");
volumeSliderDiv.id = "byts-vol-div";
volumeSliderDiv.style.cssText = `user-select: none; width: 100px; left: 0px; background-color: transparent; position: absolute; margin-left: 5px; margin-top: ${
reel.offsetHeight + 5
}px;`;
volumeSlider = document.createElement("input");
volumeSlider.style.cssText = `user-select: none; width: 80px; left: 0px; background-color: transparent; position: absolute; margin-top: 0px;`;
volumeSlider.type = "range";
volumeSlider.id = "byts-vol";
volumeSlider.className = "volslider";
volumeSlider.name = "vol";
volumeSlider.min = 0.0;
volumeSlider.max = 1.0;
volumeSlider.step = 0.01;
volumeSlider.value = video.volume;
volumeSlider.addEventListener("input", function () {
video.volume = this.value;
GM_setValue("volume", this.value);
});
volumeSliderDiv.appendChild(volumeSlider);
volumeTextDiv = document.createElement("div");
volumeTextDiv.id = "byts-vol-textdiv";
volumeTextDiv.style.cssText = `user-select: none; background-color: transparent; position: absolute; color: white; font-size: 1.2rem; margin-left: ${
volumeSlider.offsetWidth + 5
}px`;
volumeTextDiv.textContent = `${(
video.volume.toFixed(2) * 100
).toFixed()}%`;
volumeSliderDiv.appendChild(volumeTextDiv);
reel.appendChild(volumeSliderDiv);
audioInitialized = true;
}
if (constantVolume) {
video.volume = volumeSlider.value;
}
volumeSlider.value = video.volume;
volumeTextDiv.textContent = `${(
video.volume.toFixed(2) * 100
).toFixed()}%`;
volumeSliderDiv.style.marginTop = `${reel.offsetHeight + 5}px`;
volumeTextDiv.style.marginLeft = `${
volumeSlider.offsetWidth + 5
}px`;
// Progress Bar
let progressBar = reel.querySelector("#byts-progbar");
if (progressBar === null) {
const builtinProgressbar = reel.querySelector("#progress-bar");
if (builtinProgressbar !== null) {
builtinProgressbar.remove();
}
if (progressBar === null) {
progressBar = document.createElement("div");
progressBar.id = "byts-progbar";
progressBar.style.cssText = `user-select: none; cursor: pointer; width: 98%; height: 6px; background-color: #343434; position: absolute; border-radius: 10px; margin-top: ${
reel.offsetHeight - 6
}px;`;
}
reel.appendChild(progressBar);
let wasPausedBeforeDrag = false;
progressBar.addEventListener("mousedown", (e) => {
seekMouseDown = true;
wasPausedBeforeDrag = video.paused;
setVideoPlaybackTime(e, progressBar);
video.pause();
});
document.addEventListener("mousemove", (e) => {
if (!seekMouseDown) return;
setVideoPlaybackTime(e, progressBar);
if (!video.paused) {
video.pause();
}
e.preventDefault();
});
document.addEventListener("mouseup", () => {
if (!seekMouseDown) return;
seekMouseDown = false;
if (!wasPausedBeforeDrag) {
video.play();
}
});
}
progressBar.style.marginTop = `${reel.offsetHeight - 6}px`;
// Progress Bar (Inner Red Bar)
const progressTime = (video.currentTime / video.duration) * 100;
let InnerProgressBar = progressBar.querySelector("#byts-progress");
if (InnerProgressBar === null) {
InnerProgressBar = document.createElement("div");
InnerProgressBar.id = "byts-progress";
InnerProgressBar.style.cssText = `user-select: none; background-color: #FF0000; height: 100%; border-radius: 10px; width: ${progressTime}%;`;
progressBar.appendChild(InnerProgressBar);
}
InnerProgressBar.style.width = `${progressTime}%`;
// Time Info
const durSecs = Math.floor(video.duration);
const durMinutes = Math.floor(durSecs / 60);
const durSeconds = durSecs % 60;
const curSecs = Math.floor(video.currentTime);
let timeInfo = reel.querySelector("#byts-timeinfo");
let timeInfoText = reel.querySelector("#byts-timeinfo-textdiv");
if (
!Number.isNaN(durSecs) &&
reel.querySelector("#byts-timeinfo") !== null
) {
timeInfoText.textContent = `${Math.floor(
curSecs / 60
)}:${padTo2Digits(curSecs % 60)} / ${durMinutes}:${padTo2Digits(
durSeconds
)}`;
}
if (
curSecs !== lastCurSeconds ||
reel.querySelector("#byts-timeinfo") === null
) {
lastCurSeconds = curSecs;
const curMinutes = Math.floor(curSecs / 60);
const curSeconds = curSecs % 60;
if (timeInfo === null) {
timeInfo = document.createElement("div");
timeInfo.id = "byts-timeinfo";
timeInfo.style.cssText = `user-select: none; display: flex; right: auto; left: auto; position: absolute; margin-top: ${
reel.offsetHeight + 2
}px;`;
timeInfoText = document.createElement("div");
timeInfoText.id = "byts-timeinfo-textdiv";
timeInfoText.style.cssText = `display: flex; margin-right: 5px; margin-top: 4px; color: white; font-size: 1.2rem;`;
timeInfoText.textContent = `${curMinutes}:${padTo2Digits(
curSeconds
)} / ${durMinutes}:${padTo2Digits(durSeconds)}`;
timeInfo.appendChild(timeInfoText);
reel.appendChild(timeInfo);
timeInfoText.textContent = `${curMinutes}:${padTo2Digits(
curSeconds
)} / ${durMinutes}:${padTo2Digits(durSeconds)}`;
}
}
timeInfo.style.marginTop = `${reel.offsetHeight + 2}px`;
// AutoScroll
let autoScrollDiv = reel.querySelector("#byts-autoscroll-div");
if (autoScrollDiv === null) {
autoScrollDiv = document.createElement("div");
autoScrollDiv.id = "byts-autoscroll-div";
autoScrollDiv.style.cssText = `user-select: none; display: flex; right: 0px; position: absolute; margin-top: ${
reel.offsetHeight + 2
}px;`;
const autoScrollTextDiv = document.createElement("div");
autoScrollTextDiv.style.cssText = `display: flex; margin-right: 5px; margin-top: 4px; color: white; font-size: 1.2rem;`;
autoScrollTextDiv.textContent = "Auto Scroll ";
autoScrollDiv.appendChild(autoScrollTextDiv);
const autoScrollSwitch = document.createElement("label");
autoScrollSwitch.className = "switch";
const autoscrollInput = document.createElement("input");
autoscrollInput.id = "byts-autoscroll-input";
autoscrollInput.type = "checkbox";
autoscrollInput.checked = autoScroll;
autoscrollInput.addEventListener("input", function () {
autoScroll = this.checked;
GM_setValue("autoScroll", this.checked);
});
const autoScrollSlider = document.createElement("span");
autoScrollSlider.className = "slider round";
autoScrollSwitch.appendChild(autoscrollInput);
autoScrollSwitch.appendChild(autoScrollSlider);
autoScrollDiv.appendChild(autoScrollSwitch);
reel.appendChild(autoScrollDiv);
}
if (autoScroll === true) {
video.removeAttribute("loop");
video.removeEventListener("ended", navigationButtonDown);
video.addEventListener("ended", navigationButtonDown);
} else {
video.setAttribute("loop", true);
video.removeEventListener("ended", navigationButtonDown);
}
autoScrollDiv.style.marginTop = `${reel.offsetHeight + 2}px`;
}
})();
userscriptInitialized = true;
}
};
const historyWrap = (type) => {
const origin = unsafeWindow.history[type];
const event = new Event(type);
return () => {
const rv = origin.apply(this, arguments);
event.arguments = arguments;
unsafeWindow.dispatchEvent(event);
return rv;
};
};
urlChange();
if (unsafeWindow.navigation) {
unsafeWindow.navigation.addEventListener("navigate", (event) => {
urlChange(event);
});
return;
}
unsafeWindow.history.pushState = historyWrap("pushState");
unsafeWindow.history.replaceState = historyWrap("replaceState");
unsafeWindow.addEventListener("replaceState", (event) => {
urlChange(event);
});
unsafeWindow.addEventListener("pushState", (event) => {
urlChange(event);
});
unsafeWindow.addEventListener("popstate", (event) => {
urlChange(event);
});
unsafeWindow.addEventListener("hashchange", (event) => {
urlChange(event);
});
})();
})();