☰

Greasy Fork is available in English.

m.YouTube.com quality change buttons

Adds quality change buttons below the video (144p, 240p, 360p, 480p, 720p, 1080p...)

Verze ze dne 18. 10. 2023. Zobrazit nejnovější verzi.

// ==UserScript==
// @name         m.YouTube.com quality change buttons
// @namespace    m-youtube-com-quality-change-buttons
// @version      1.8
// @description  Adds quality change buttons below the video (144p, 240p, 360p, 480p, 720p, 1080p...)
// @author       hlorand.hu
// @match        https://m.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// @license      https://creativecommons.org/licenses/by-nc-sa/4.0/
// ==/UserScript==

// Screenshot: https://ibb.co/pyXQd4C

(function() {
    //'use strict';

    function addbuttons(){
        document.getElementById("qualitybuttons").innerHTML = "";

        var player = document.getElementById('movie_player');

        // it is neccesary to start the video, to getAvailableQualityData
        player.click(); // start video
        player.click(); // pause video

        const qualities = player.getAvailableQualityData();

        qualities.forEach((q)=>{

            let button = document.createElement('button');
            button.setAttribute("quality", q.quality);
            button.textContent = q.qualityLabel.replace("p50","p").replace("p60","p"); // remove fps from label
            button.className = "qualitybutton";

            button.style.margin = "4px";
            button.style.padding = "4px";
            button.style.position = "relative";

            // get current quality
            if( player.getPlaybackQualityLabel() == q.qualityLabel ){
                button.style.backgroundColor = "darkorange";
            } else{
                button.style.backgroundColor = "green";
            }

            button.onclick = function() {
                player.setPlaybackQualityRange( this.getAttribute("quality") );

                // highlight the clicked button and desaturate the others
                document.querySelectorAll(".qualitybutton").forEach((btn)=>{
                    btn.style.backgroundColor = "green";
                });
                this.style.backgroundColor = "darkorange";
            };

            let target = document.getElementById('qualitybuttons');
            target.insertBefore(button, target.firstChild);

        }); // end qualities foreach

    } // end addbuttons

    // Periodically check if the buttons are visible (sometimes YouTube redraws its interface).
    setInterval(()=>{
        // Creating a div that will contain buttons.
        if( document.getElementById("qualitybuttons") == undefined ){
            let parent = document.querySelector('.related-chips-slot-wrapper'); // placement of buttons
            let wrapper = document.createElement('div');
            wrapper.setAttribute("id","qualitybuttons");
            parent.insertBefore(wrapper, parent.firstChild);
            addbuttons();
        }
    }, 1000);

})();