☰

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...)

Fra og med 16.10.2023. Se den nyeste version.

// ==UserScript==
// @name         m.YouTube.com quality change buttons
// @namespace    m-youtube-com-quality-change-buttons
// @version      1.5
// @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("50","").replace("60","");
            button.className = "qualitybutton";

            button.style.margin = "5px";
            button.style.padding = "5px";
            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 div = document.querySelector('.related-chips-slot-wrapper');
            div.insertBefore(button, div.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);

})();