Auto select the highest quality on YouTube (incl. Premium, if applicable)
// ==UserScript==
// @name YouTube Auto High Quality
// @namespace https://www.youtube.com
// @license GPL-3.0
// @version 1.0.0
// @description Auto select the highest quality on YouTube (incl. Premium, if applicable)
// @author CJMAXiK
// @license GPL-3.0
// @match https://*.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @website https://gist.github.com/cjmaxik/889bdc983f95d1b589464a655e0ce5bf
// @grant none
// ==/UserScript==
// Partially ported from the Chrome extention by Avi
// Code: https://github.com/avi12/youtube-auto-hd
// Avi: https://avi12.com/
const SELECTORS = {
title: "title",
video: "video",
buttonSettings: ".ytp-settings-button",
sizeToggle: ".ytp-size-button#original-size, .ytp-size-button",
optionQuality: ".ytp-settings-menu[data-layer] .ytp-menuitem:last-child",
menuOption: ".ytp-settings-menu[data-layer] .ytp-menuitem",
menuOptionContent: ".ytp-menuitem-content",
panelHeaderBack: ".ytp-panel-header button",
player: ".html5-video-player:not(#inline-preview-player)",
donationInjectParent: "ytd-comments",
// Premium
labelPremium: ".ytp-premium-label",
};
const OBSERVER_OPTIONS = {
childList: true,
subtree: true,
};
const SUFFIX_EBR = "ebr";
let qualityChanged = false;
function isElementVisible(element) {
return element?.offsetWidth > 0 && element?.offsetHeight > 0;
}
async function getCurrentQualityElements() {
const elPlayer = await waitElement(SELECTORS.player);
const elMenuOptions = [...elPlayer.querySelectorAll(SELECTORS.menuOption)];
return elMenuOptions.filter(getIsQualityElement);
}
function convertQualityToNumber(elQuality) {
const isPremiumQuality = Boolean(
elQuality.querySelector(SELECTORS.labelPremium)
);
const qualityNumber = parseInt(elQuality.textContent.substring(0, 4));
if (isPremiumQuality) {
return qualityNumber + SUFFIX_EBR;
}
return qualityNumber;
}
async function getAvailableQualities() {
const elQualities = await getCurrentQualityElements();
const qualities = elQualities.map(convertQualityToNumber);
return qualities;
}
function getPlayerDiv(elVideo) {
const elPlayer = elVideo.closest(SELECTORS.player);
if (!elPlayer) {
console.warn(
"Player div not found. Is the video element correct?",
elVideo,
elVideo.parentElement
);
}
return elPlayer;
}
function getIsQualityElement(element) {
const isQuality = Boolean(element.textContent.match(/\d/));
const isHasChildren = element.children.length > 1;
return isQuality && !isHasChildren;
}
async function getIsSettingsMenuOpen() {
const elButtonSettings = await waitElement(SELECTORS.buttonSettings);
return elButtonSettings?.ariaExpanded === "true";
}
function getIsLastOptionQuality(elVideo) {
const elOptionInSettings = getPlayerDiv(elVideo).querySelector(
SELECTORS.optionQuality
);
if (!elOptionInSettings) {
return false;
}
const elQualityName = elOptionInSettings.querySelector(
SELECTORS.menuOptionContent
);
// If the video is a channel trailer, the last option is initially the speed one,
// and the speed setting can only be a single digit
const matchNumber = elQualityName?.textContent?.match(/\d+/);
if (!matchNumber) {
return false;
}
const numberString = matchNumber[0];
const minQualityCharLength = 3; // e.g. 3 characters in 720p
return numberString.length >= minQualityCharLength;
}
async function changeQualityAndClose(elVideo, elPlayer) {
await changeQualityWhenPossible(elVideo);
await closeMenu(elPlayer);
qualityChanged = true;
}
async function changeQualityWhenPossible(elVideo) {
console.log("Trying...");
openQualityMenu(elVideo);
await changeQuality();
}
async function changeQuality() {
const elQualities = await getCurrentQualityElements();
const qualitiesAvailable = await getAvailableQualities();
const applyQuality = (iQuality) => {
const quality = qualitiesAvailable[iQuality];
console.log(`Setting up the ${quality}`);
elQualities[iQuality]?.click();
};
const isQualityPreferredEBR = qualitiesAvailable[0]
.toString()
.endsWith(SUFFIX_EBR);
if (isQualityPreferredEBR) {
applyQuality(0);
return;
}
const iQualityFallback = qualitiesAvailable.findIndex(
(quality) => !quality.toString().endsWith(SUFFIX_EBR)
);
applyQuality(iQualityFallback);
}
async function closeMenu(elPlayer) {
const clickPanelBackIfPossible = () => {
const elPanelHeaderBack = elPlayer.querySelector(SELECTORS.panelHeaderBack);
if (elPanelHeaderBack) {
elPanelHeaderBack.click();
return true;
}
return false;
};
if (clickPanelBackIfPossible()) {
return;
}
const observer = new MutationObserver((_, observer) => {
if (clickPanelBackIfPossible()) {
observer.disconnect();
}
});
observer.observe(elPlayer, OBSERVER_OPTIONS);
}
async function openQualityMenu(elVideo) {
const elSettingQuality = getPlayerDiv(elVideo).querySelector(
SELECTORS.optionQuality
);
elSettingQuality.click();
}
function waitElement(selector) {
return new Promise((resolve) => {
let element = [...document.querySelectorAll(selector)].find(
isElementVisible
);
if (element) {
return resolve(element);
}
const observer = new MutationObserver((mutations) => {
let element = [...document.querySelectorAll(selector)].find(
isElementVisible
);
if (element) {
observer.disconnect();
resolve(element);
}
});
observer.observe(document.body, OBSERVER_OPTIONS);
});
}
async function setEventListeners(event) {
if (qualityChanged) return;
const elVideo = document.querySelector(SELECTORS.video);
if (!elVideo) {
console.error("Auto HD: Video element was not found.");
return;
}
const elPlayer = getPlayerDiv(elVideo);
if (!elPlayer) {
console.error("Auto HD: Player div was not found.");
return;
}
const elSettings = elPlayer.querySelector(SELECTORS.buttonSettings);
if (!elSettings) {
console.error("Auto HD: Settings button was not found.");
return;
}
const isSettingsMenuOpen = await getIsSettingsMenuOpen();
if (!isSettingsMenuOpen) {
elSettings.click();
}
elSettings.click();
await changeQualityAndClose(elVideo, elPlayer);
elPlayer.querySelector(SELECTORS.buttonSettings).blur();
}
(function () {
"use strict";
window.addEventListener(
"yt-navigate-start",
() => (qualityChanged = false),
true
);
window.addEventListener("yt-navigate-finish", setEventListeners, true);
setEventListeners();
})();
// document.addEventListener("yt-navigate-start", function () {
// console.log("document.yt-navigate-start", arguments);
// });
// document.addEventListener("yt-navigate-finish", function () {
// console.log("document.yt-navigate-finish", arguments);
// });
// document.addEventListener("yt-navigate-error", function () {
// console.log("document.yt-navigate-error", arguments);
// });
// document.addEventListener("yt-navigate-redirect", function () {
// console.log("document.yt-navigate-redirect", arguments);
// });
// document.addEventListener("yt-navigate-cache", function () {
// console.log("document.yt-navigate-cache", arguments);
// });
// document.addEventListener("yt-navigate-action", function () {
// console.log("document.yt-navigate-action", arguments);
// });
// document.addEventListener("yt-navigate-home-action", function () {
// console.log("document.yt-navigate-home-action", arguments);
// });
// document.addEventListener("yt-page-data-fetched", function () {
// console.log("document.yt-page-data-fetched", arguments);
// });