// ==UserScript==
// @name YouTube Playback Speed Buttons
// @description Adds playback speed buttons to youtube player control bar.
// @version 1.0.0
// @license MIT
// @author bowencool
// @match https://www.youtube.com/*
// @namespace https://www.youtube.com/
// @author bowencool
// @license MIT
// @homepageURL https://greasyfork.org/scripts/475864
// @supportURL https://github.com/bowencool/Tampermonkey-Scripts/issues
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @run-at document-end
// @downloadURL none
// ==/UserScript==
"use strict";
function waitForElementToExist(selector) {
return new Promise((resolve) => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(() => {
if (document.querySelector(selector)) {
resolve(document.querySelector(selector));
observer.disconnect();
}
});
observer.observe(document.body, {
subtree: true,
childList: true,
});
});
}
function insertStyle() {
// const path = window.location.pathname;
// const isEmbed = path.startsWith("/embed");
const head = document.head;
const style = document.createElement("style");
style.innerHTML = `.speed-button {
float: left;
}`;
head.appendChild(style);
console.log({ style });
}
async function main() {
const menuR = await waitForElementToExist(".ytp-right-controls");
const video = await waitForElementToExist(".html5-main-video");
console.log({ menuR, video });
insertStyle();
const storedPlaybackRate = parseFloat(
sessionStorage.getItem("playback-rate"),
10
);
if (storedPlaybackRate > 0) {
video.playbackRate = storedPlaybackRate;
}
const fasterButton = document.createElement("button");
fasterButton.setAttribute("aria-label", "10% faster");
fasterButton.title = "10% faster";
fasterButton.innerHTML = ``;
fasterButton.classList.add("ytp-button", "speed-button");
fasterButton.onclick = () => {
const speed = Math.ceil(video.playbackRate * 11) / 10;
console.log(speed);
video.playbackRate = speed;
sessionStorage.setItem("playback-rate", speed);
};
menuR.prepend(fasterButton);
const resetButton = document.createElement("button");
resetButton.setAttribute("aria-label", "Reset to 1x");
resetButton.title = "Reset to 1x";
resetButton.innerHTML = ``;
resetButton.classList.add("ytp-button", "speed-button");
resetButton.onclick = () => {
video.playbackRate = 1;
sessionStorage.removeItem("playback-rate");
};
menuR.prepend(resetButton);
const slowerButton = document.createElement("button");
slowerButton.setAttribute("aria-label", "10% slower");
slowerButton.title = "10% slower";
slowerButton.innerHTML = ``;
slowerButton.classList.add("ytp-button", "speed-button");
slowerButton.onclick = () => {
const speed = Math.floor(video.playbackRate * 9) / 10;
console.log(speed);
if (speed === 0) return;
video.playbackRate = speed;
sessionStorage.setItem("playback-rate", speed);
};
menuR.prepend(slowerButton);
}
main();