YouTube - Non-Rounded Design

This script disables YouTube's new rounded corners (reverts back to the layout from 2021.)

Versão de: 13/11/2022. Veja: a última versão.

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name         YouTube - Non-Rounded Design
// @version      2.1.2
// @description  This script disables YouTube's new rounded corners (reverts back to the layout from 2021.)
// @author       Magma_Craft
// @license MIT
// @match        *://*.youtube.com/*
// @namespace    https://greatest.deepsurf.us/en/users/933798
// @icon         https://www.youtube.com/favicon.ico
// @run-at       document-start
// @grant        none
// ==/UserScript==

// Attributes to remove from <html>
const ATTRS = [
    "typography",
    "typography-spacing"
];

// Regular config keys.
const CONFIGS = {
    BUTTON_REWORK: false
}

// Experiment flags.
const EXPFLAGS = {
    kevlar_watch_metadata_refresh: false,
    kevlar_watch_modern_metapanel: false,
    kevlar_watch_modern_panels: false,
    web_rounded_containers: false,
    web_rounded_thumbnails: false,
    web_modern_dialogs: false,
    web_modern_chips: false,
    web_modern_subscribe: false,
    web_modern_buttons: false,
    web_modern_playlists: false,
    enable_programmed_playlist_redesign: false,
    web_amsterdam_playlists: false,
    web_searchbar_style: "default",
    web_button_rework: false,
    web_darker_dark_theme: false,
    kevlar_watch_cinematics: false,
    kevlar_refresh_on_theme_change: false,
    web_guide_ui_refresh: false,
    web_sheets_ui_refresh: false,
    web_snackbar_ui_refresh: false,
    web_segmented_like_dislike_button: false,
    web_animated_like: false,
    web_animated_like_lazy_load: false,
    kevlar_use_ytd_player: false
}

// Player flags
// !!! USE STRINGS FOR VALUES !!!
// For example: "true" instead of true
const PLYRFLAGS = {
    web_player_move_autonav_toggle: "true"
}

class YTP {
    static observer = new MutationObserver(this.onNewScript);

    static _config = {};

    static isObject(item) {
        return (item && typeof item === "object" && !Array.isArray(item));
    }

    static mergeDeep(target, ...sources) {
        if (!sources.length) return target;
        const source = sources.shift();

        if (this.isObject(target) && this.isObject(source)) {
            for (const key in source) {
                if (this.isObject(source[key])) {
                    if (!target[key]) Object.assign(target, { [key]: {} });
                    this.mergeDeep(target[key], source[key]);
                } else {
                    Object.assign(target, { [key]: source[key] });
                }
            }
        }

        return this.mergeDeep(target, ...sources);
    }


    static onNewScript(mutations) {
        for (var mut of mutations) {
            for (var node of mut.addedNodes) {
                YTP.bruteforce();
            }
        }
    }

    static start() {
        this.observer.observe(document, {childList: true, subtree: true});
    }

    static stop() {
        this.observer.disconnect();
    }

    static bruteforce() {
        if (!window.yt) return;
        if (!window.yt.config_) return;

        this.mergeDeep(window.yt.config_, this._config);
    }

    static setCfg(name, value) {
        this._config[name] = value;
    }

    static setCfgMulti(configs) {
        this.mergeDeep(this._config, configs);
    }

    static setExp(name, value) {
        if (!("EXPERIMENT_FLAGS" in this._config)) this._config.EXPERIMENT_FLAGS = {};

        this._config.EXPERIMENT_FLAGS[name] = value;
    }

    static setExpMulti(exps) {
        if (!("EXPERIMENT_FLAGS" in this._config)) this._config.EXPERIMENT_FLAGS = {};

        this.mergeDeep(this._config.EXPERIMENT_FLAGS, exps);
    }

    static decodePlyrFlags(flags) {
        var obj = {},
            dflags = flags.split("&");

        for (var i = 0; i < dflags.length; i++) {
            var dflag = dflags[i].split("=");
            obj[dflag[0]] = dflag[1];
        }

        return obj;
    }

    static encodePlyrFlags(flags) {
        var keys = Object.keys(flags),
            response = "";

        for (var i = 0; i < keys.length; i++) {
            if (i > 0) {
                response += "&";
            }
            response += keys[i] + "=" + flags[keys[i]];
        }

        return response;
    }

    static setPlyrFlags(flags) {
        if (!window.yt) return;
        if (!window.yt.config_) return;
        if (!window.yt.config_.WEB_PLAYER_CONTEXT_CONFIGS) return;
        var conCfgs = window.yt.config_.WEB_PLAYER_CONTEXT_CONFIGS;
        if (!("WEB_PLAYER_CONTEXT_CONFIGS" in this._config)) this._config.WEB_PLAYER_CONTEXT_CONFIGS = {};

        for (var cfg in conCfgs) {
            var dflags = this.decodePlyrFlags(conCfgs[cfg].serializedExperimentFlags);
            this.mergeDeep(dflags, flags);
            this._config.WEB_PLAYER_CONTEXT_CONFIGS[cfg] = {
                serializedExperimentFlags: this.encodePlyrFlags(dflags)
            }
        }
    }
}

window.addEventListener("yt-page-data-updated", function tmp() {
    YTP.stop();
    for (i = 0; i < ATTRS.length; i++) {
        document.getElementsByTagName("html")[0].removeAttribute(ATTRS[i]);
    }
    window.removeEventListener("yt-page-date-updated", tmp);
});

YTP.start();

YTP.setCfgMulti(CONFIGS);
YTP.setExpMulti(EXPFLAGS);
YTP.setPlyrFlags(PLYRFLAGS);

function $(q) {
    return document.querySelector(q);
}

// Fix for Return YouTube Dislike
addEventListener('yt-page-data-updated', function() {
    if(!location.pathname.startsWith('/watch')) return;

    var lds = $('ytd-video-primary-info-renderer div#top-level-buttons-computed');
    var like = $('ytd-video-primary-info-renderer div#segmented-like-button > ytd-toggle-button-renderer');
    var share = $('ytd-video-primary-info-renderer div#top-level-buttons-computed > ytd-segmented-like-dislike-button-renderer + ytd-button-renderer');

    lds.insertBefore(like, share);

    like.setAttribute('class', like.getAttribute('class').replace('ytd-segmented-like-dislike-button-renderer', 'ytd-menu-renderer force-icon-button'));
    like.removeAttribute('is-paper-button-with-icon');
    like.removeAttribute('is-paper-button');
    like.setAttribute('style-action-button', '');
    like.setAttribute('is-icon-button', '');
    like.querySelector('a').insertBefore(like.querySelector('yt-formatted-string'), like.querySelector('tp-yt-paper-tooltip'));
    try { like.querySelector('paper-ripple').remove(); } catch(e) {}
    var paper = like.querySelector('tp-yt-paper-button');
    paper.removeAttribute('style-target');
    paper.removeAttribute('animated');
    paper.removeAttribute('elevation');
    like.querySelector('a').insertBefore(paper.querySelector('yt-icon'), like.querySelector('yt-formatted-string'));
    paper.outerHTML = paper.outerHTML.replace('<tp-yt-paper-button ', '<yt-icon-button ').replace('</tp-yt-paper-button>', '</yt-icon-button>');
    paper = like.querySelector('yt-icon-button');
    paper.querySelector('button#button').appendChild(like.querySelector('yt-icon'));

    var dislike = $('ytd-video-primary-info-renderer div#segmented-dislike-button > ytd-toggle-button-renderer');
    lds.insertBefore(dislike, share);
    $('ytd-video-primary-info-renderer ytd-segmented-like-dislike-button-renderer').remove();
    dislike.setAttribute('class', dislike.getAttribute('class').replace('ytd-segmented-like-dislike-button-renderer', 'ytd-menu-renderer force-icon-button'));
    dislike.removeAttribute('has-no-text');
    dislike.setAttribute('style-action-button', '');
    var dlabel = document.createElement('yt-formatted-stringx');
    dlabel.setAttribute('id', 'text');
    if(dislike.getAttribute('class').includes('style-default-active'))
        dlabel.setAttribute('class', dlabel.getAttribute('class').replace('style-default', 'style-default-active'));
    dislike.querySelector('a').insertBefore(dlabel, dislike.querySelector('tp-yt-paper-tooltip'));

    $('ytd-video-primary-info-renderer').removeAttribute('flex-menu-enabled');
});

// CSS adjustments (causes issues with this script)
(function() {
ApplyCSS();
function ApplyCSS() {
var styles = document.createElement("style");
styles.innerHTML=`
    div#clarify-box.attached-message.style-scope.ytd-watch-flexy {
    display: none;
    }

    #cinematics.ytd-watch-flexy {
    display: none;
    }

    yt-formatted-string.style-scope.ytd-button-renderer.style-suggestive.size-small {
    letter-spacing: 0.5px;
    }

    yt-formatted-string.style-scope.ytd-button-renderer.style-suggestive.size-default {
    letter-spacing: 0.5px;
    }

    yt-formatted-string#text.style-scope.ytd-button-renderer.style-destructive.size-default {
    letter-spacing: 0.5px;
    }

    yt-formatted-string.style-scope.ytd-toggle-button-renderer.style-text {
    letter-spacing: 0.5px;
    }

    yt-formatted-string.style-scope.ytd-button-renderer.style-default.size-default {
    letter-spacing: 0.5px;
    }

    yt-formatted-string.style-scope.ytd-toggle-button-renderer.style-default-active {
    letter-spacing: 0.5px;
    }

    yt-formatted-string#text.style-scope.ytd-button-renderer {
    letter-spacing: 0.5px;
    }

    yt-formatted-stringx#text {
    letter-spacing: 0.5px;
    }

    div#icon-label.yt-dropdown-menu {
    letter-spacing: 0.5px;
    }

    tp-yt-paper-tab tp-yt-paper-tab .tp-yt-paper-tab[style-target=tab-content], .tp-yt-paper-tab[style-target=tab-content] {
    letter-spacing: 0.5px;
    }

    yt-formatted-string#guide-section-title.style-scope.ytd-guide-section-renderer {
    letter-spacing: 0.5px;
    }

    yt-formatted-string.style-scope.yt-chip-cloud-chip-renderer {
    font-size: 1.4rem;;
    letter-spacing: 0.2px;
    padding-bottom: 1px;
    }`
document.head.appendChild(styles);
}
})();