☰

YouTube hotkeys

quick hotkeys for quality, speed, time jumps, subtitles and replay (for RU, UA, EN, DE, FR, SP)

// ==UserScript==
// @name         YouTube hotkeys
// @namespace    http://tampermonkey.net/
// @version      1.3.2
// @description  quick hotkeys for quality, speed, time jumps, subtitles and replay (for RU, UA, EN, DE, FR, SP)
// @author       Roman Sergeev aka naxombl4 aka Brutal Doomer
// @license      MIT
// @match        https://www.youtube.com/*
// @grant        GM_addStyle
// @icon         https://www.youtube.com/s/desktop/78bc1359/img/logos/favicon_144x144.png
// ==/UserScript==

/**
 * Happy 20 years of YouTube!
 * v1.3.2 added time jumps (like +-5s, +-10s)
 *        !WARNING! this overrides browser's default execution of alt+(left/right arrow) for navigation, feel free to comment after : sign on line 248
 * v1.3.1 organized Player into a class
 *        prevented popup duplication
 *        added UA
 * v1.3   changed script from keypress emulation to direct player access (as it should have always been)
 *        added popup to indicate speed/quality change
 *        added mutation observer to track that correct player settings are loaded
 *        added some common code structure
 * v1.2   fixed wrong behavior after YT interface updates
 *        moved surveyLoadProgress to another script
 *        fixed subtitles regexp
 *        added comments
 * v1.1   x hotkey for subtitles, alt+q for 480p quality, plus some readability alignments.
 *
 * Hotkeys are:
 * numpad + and - for +-0.25x speed (shift = +-0.5, alt = +-1);
 * shift+q for 1080p quality, ctrl+q for 720p quality, alt+q for 480p quality;
 * shift+(left/right arrow) for +-30s, alt+(left/right arrow) for +-1min, alt+shift+(left/right arrow) for +-5min
 * q, s and x for quality, speed and subtitle menus (just open, no choosing);
 * r for replay when video is over (video container should be active, unreliable);
 * speed change is rounded to the nearest multiplier of 0.25 (1.4 -> "+" -> 1.5; 1.4 -> "-" -> 1.25)
 *
 * If you have feedback, post it as a comment on my channel (The Brutal Doomer) for the quickest response.
 */

(function() {
    'use strict';

    // speed/quality popup copycat (at the middle top of the player)
    const POPUP_ID = "customPopup";
    GM_addStyle(`
div#`+POPUP_ID+` {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translatex(-50%);
  z-index: 10;
  padding: 10px 12px;
  border-radius: 3px;
  font-size: 18px;
  color: white;
  background-color: #000a;
  pointer-events: none;
  opacity: 0;
}
    `);

    const PLAYER_ID = "movie_player";
    const REGEXP_R = /Повтор|Повторити|Replay|Nochmal|Revoir|Ver de nuevo/i;
    const DISPATCH = {
        "81": /Качество|Якість|Quality|Qualität|Qualité|Calidad/i, // q: quality regexp
        "83": /Скорость|Швидкість|Speed|Wiedergabegeschwindigkeit|Vitesse de lecture|Velocidad de reproducción/i, // s: speed regexp
        "88": /Субтитры|Субтитри|Subtitles|Untertitel|Sous-titres|Subtítulos/i // x: subtitles regexp
    }

    const CONSECUTIVE_CLICK_EMULATION_DELAY = 100; // milliseconds delay for YouTube elements to pop up (some hotkeys call the player menus)
    const SPEEDMIN = 0.25;
    const SPEEDMAX = 2;
    const SPEEDALT = 0.25;
    const TIMESHIFT = [
        [undefined, "error"],
        [55 , " 1 minute"], // account for 5 seconds already included. Spaces in text are en spaces (U+2002)
        [25 , "30 seconds"],
        [295, " 5 minutes"]
    ];

    var player;

    function Player(div) {
        const QUALITY = {
            large: "480p",
            medium: "360p",
            small: "240p",
            tiny: "144p",
            auto: "auto"
        }
        const POPUP_STATIC_SHOWN_FOR = 300;
        const TIME_SHIFT_SHOWN_FOR = 700;
        const ALIGN_TOP = h => h/2 + 5; // time shift bubble positioning functions depending on player scroll width and height
        const ALIGN_LEFT_LEFT = w => w * 0.1 - 15; // reverse ingeneered (linearly interpolated)
        const ALIGN_LEFT_RIGHT = w => w * 0.8 - 30;

        var levels = div.getAvailableQualityLevels(); // array of quality strings inside YT player: see QUALITY keys
        var qualityTexts = levels.map(x => { // corresponding array of displayed "selected quality" strings
            var m = x.match(/\d+/);
            return m ? (m[0] + "p") : (QUALITY[x] || "null");
        });

        // copycat of YT default speed/volume top player popup. Feedbacks change of speed/quality.
        var popup = false;
        var popupHidingTimeout;
        for (const child of div.children) // search for it to prevent duplication
            if (child.id === POPUP_ID) {
                popup = child;
                break;
            }
        if (!popup) {
            popup = document.createElement("div");
            popup.id = POPUP_ID;
            div.appendChild(popup);
        }

        var list = cn("ytp-panel-menu").children; // list of main settings items
        var sb = cn("ytp-settings-button"); // settings button - main to click on
        var rebtn = cn("ytp-play-button"); // replay button
        var jumpBubbleHolder = cn("ytp-doubletap-ui-legacy");
        var jumpBubble = cn("ytp-doubletap-static-circle");
        var jumpText = cn("ytp-doubletap-tooltip-label");

        function cn(className) { var cns = document.getElementsByClassName(className); return cns[cns.length - 1]; } // (get by) classname
        function sopen() { return cn("ytp-settings-menu").style.display != "none"; } // whether settings window is open
        function dc(element) { element.dispatchEvent(new Event("click")); } // dispatch click
        function tev(element, show) { element.style.display = show ? "block" : "none"; } // toggle element visibility
        function dcList(regexp) {
            for (var i = 0; i < list.length; i++)
                if (regexp.test(list[i].textContent))
                    return dc(list[i]);
        }

        this.showPopup = function(text) {
            popup.textContent = text;
            popup.style.transition = "none"; // a trick to show it immediately, but hide with fade-out
            popup.style.opacity = 1;
            setTimeout(() => {
                popup.style.transition = "opacity 0.3s ease-out";
                popup.style.opacity = 0;
            }, POPUP_STATIC_SHOWN_FOR);
        }

        this.setQualityByText = function(text) {
            var index = levels.indexOf(text);
            if (index == -1) index = 0; // choose the best if selected isn't present
            div.setPlaybackQualityRange(levels[index]);
            this.showPopup(qualityTexts[index]);
        }

        this.shift = function(delta, text) {
            div.seekTo(div.getCurrentTime() + delta, true);
            const right = delta > 0;
            const w = div.scrollWidth, h = div.scrollHeight;
            tev(jumpBubbleHolder, true);
            jumpBubbleHolder.setAttribute("data-side", right ? "forward" : "back");
            jumpBubble.style.top = ALIGN_TOP(h) + "px"; // for some reason, is set on YT in absolute numbers
            jumpBubble.style.left = (right ? ALIGN_LEFT_RIGHT(w) : ALIGN_LEFT_LEFT(w)) + "px";
            jumpText.textContent = text;
            clearTimeout(popupHidingTimeout);
            popupHidingTimeout = setTimeout(() => tev(jumpBubbleHolder, false), TIME_SHIFT_SHOWN_FOR);
        }

        this.isActive = function() { return document.activeElement === div; }
        this.getSpeed = function() { return div.getPlaybackRate(); }
        this.setSpeed = function(speed) { div.setPlaybackRate(speed); }
        this.dispatchReplayButtonClick = function() { if (REGEXP_R.test(rebtn.title)) dc(rebtn); }
        this.dispatchSettingsButtonClick = function() { dc(sb); }
        this.dispatchSettingsItemClick = function(regexp) { dcList(regexp); }
        this.settingsAreOpen = function() { return sopen(); }
        this.closeSettings = function() { if (this.settingsAreOpen()) this.dispatchSettingsButtonClick(); }

        return this;
    }

    // floor1 and ceil1 are internal for round1 - round playback speed to nearest multiplier of SPEEDALT
    function floor1(x, step) { return Math.floor(x / step) * step; }
    function ceil1(x, step) { return Math.ceil (x / step) * step; }
    function round1(x, delta) { return (delta > 0) ? Math.min(SPEEDMAX, floor1(x + delta, SPEEDALT)) : Math.max(SPEEDMIN, ceil1(x + delta, SPEEDALT)); }

    // ChatGPT helped with this: observer waits for a real player (on /watch page) to load, then loads its available quality levels
    function awaitPlayerLoad(callback) {
        function isRealPlayer(div) {
            return div && typeof div.getAvailableQualityLevels === 'function' && div.getAvailableQualityLevels().length > 0;
        }

        const tryInitialize = () => {
            const div = document.getElementById(PLAYER_ID);
            if (isRealPlayer(div)) {
                callback(div);
                return true;
            }
            return false;
        };

        if (tryInitialize()) return;

        // Set up observer to watch for the player appearing
        const observer = new MutationObserver((mutations, obs) => {
            if (tryInitialize()) obs.disconnect();
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    function playerLoadedCallback(div) { player = new Player(div); }

    function clickMenu(regexp) {
        player.dispatchSettingsButtonClick();
        if (player.settingsAreOpen()) setTimeout(() => player.dispatchSettingsItemClick(regexp), CONSECUTIVE_CLICK_EMULATION_DELAY);
    }

    // quality selection function: alt+click = 480p, ctrl+click = 720p, shift+click = 1080p. Highest resolution available up to desirable is selected.
    function changeQuality(asc) {
        var desiredQuality = (asc&2) ? "hd1080" : (asc&4) ? "hd720" : (asc&1) ? "large" : -1;
        player.setQualityByText(desiredQuality);
    }

    // v1.3 simplified to using player API
    function changeSpeed(shift) {
        var oldSpeed = player.getSpeed();
        var newSpeed = round1(oldSpeed, shift);
        player.setSpeed(newSpeed);
        player.showPopup(newSpeed + "x");
    }

    function changeTime(forward, asc) {
        if (!asc || asc&4) return;
        var delta = TIMESHIFT[asc][0] * (forward ? 1 : -1);
        var text = TIMESHIFT[asc][1];
        console.log(delta);
        console.log(text);
        player.shift(delta, text);
    }

    // add global hotkeys
    window.addEventListener("keydown", function (event) {
        if (!player) return;
        if (document.activeElement.id == "contenteditable-root" ||
            document.activeElement.id == "search") return; // whether writing a comment or searching

        var asc = event.altKey + (event.shiftKey << 1) + (event.ctrlKey << 2);
        var key = event.keyCode;

        switch (key) {
            case 37: // left and right with alt/ctrl/shift for advanced jumps
            case 39: if (asc&1) event.preventDefault(); // comment out after colon sign to restore browser default behavior on alt+arrow
                return changeTime(key == 39, asc);
            case 81: // q for quality
                if (asc) changeQuality(asc);
            case 83: // s for speed
            case 88: // x for subtitles
                return !asc && clickMenu(DISPATCH[key]);
            case 107:
            case 109: // + and - for speed. Default +(=) and - are untouched, because in YT they change captions size
                if (asc&4) return; // do not conflict with default zoom (ctrl plus/minus)
                var shift = (key == 109 ? -SPEEDALT : SPEEDALT) * Math.max(1, event.shiftKey * 2 + event.altKey * 4); // any formula you want
                changeSpeed(shift);
                player.closeSettings();
                break;
            //case 68: if(!acs) cn("html5-video-info-panel").classList.toggle("displayNone"); break; // doesn't work (stats for nerds)
            case 82: if(!asc && player.isActive()) player.dispatchReplayButtonClick(); // replay (sometimes works)
        }
    });

    window.addEventListener('yt-navigate-finish', () => {
        awaitPlayerLoad(playerLoadedCallback);
    });

    awaitPlayerLoad(playerLoadedCallback);
})();