YouTube - Non-Rounded Design

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

Versión del día 1/12/2022. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name         YouTube - Non-Rounded Design
// @version      2.1.3
// @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://greasyfork.org/en/users/933798
// @icon         https://www.youtube.com/favicon.ico
// @run-at       document-start
// @grant        none
// ==/UserScript==

// Attributes to remove from <html>
const ATTRS = [
];

// 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;
    }

    div#ytp-id-18.ytp-popup,ytp-settings-menu.ytp-rounded-menu {
    border-radius: 2px;
    }

    div.branding-context-container-inner.ytp-rounded-branding-context {
    border-radius: 2px;
    }

    div.ytp-sb-subscribe.ytp-sb-rounded, .ytp-sb-unsubscribe.ytp-sb-rounded {
    border-radius: 2px;
    }

    div.iv-card.iv-card-video.ytp-rounded-info {
    border-radius: 0px;
    }

    div.iv-card.iv-card-playlist.ytp-rounded-info {
    border-radius: 0px;
    }

    div.iv-card.iv-card-channel.ytp-rounded-info {
    border-radius: 0px;
    }

    div.iv-card.ytp-rounded-info {
    border-radius: 0px;
    }

    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);
}
})();