☰

YouTube - Proper Description

Description below the video with proper open/close toggle, instead of a side bar.

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

// ==UserScript==
// @name         YouTube - Proper Description
// @namespace    q1k
// @version      0.6
// @description  Description below the video with proper open/close toggle, instead of a side bar.
// @author       q1k
// @match        *://www.youtube.com/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

function findElement(selector) {
    return new Promise(function(resolve) {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }
        const observer = new MutationObserver(function(mutations) {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });
        observer.observe(document, {
            childList: true,
            subtree: true
        });
    });
}
var mutationConfig={
    childList: true,
    subtree: true,
    characterData: true
};
function watchMoreElement(element) {
    var mutationobserver = new MutationObserver(function(mutations) {
        button_open.querySelector('.desc_text').innerText = element.innerText.trim();
        if(button_open.innerText.trim().length>0){
            mutationobserver.disconnect();
        }
    });
    mutationobserver.observe(element, mutationConfig);
}
function watchLessElement(element) {
    var mutationobserver = new MutationObserver(function(mutations) {
        button_close.querySelector('.desc_text').innerText = element.innerText.trim();
        if(button_close.innerText.trim().length>0){
            mutationobserver.disconnect();
        }
    });
    mutationobserver.observe(element, mutationConfig);
}
var more, less, description;
var button_open, button_close;
function addSTUFF(){
    more = document.querySelector("#meta ytd-video-secondary-info-renderer ytd-expander #content ~ tp-yt-paper-button#more");
    less = document.querySelector("#meta ytd-video-secondary-info-renderer ytd-expander #content ~ tp-yt-paper-button#less");
    button_open = document.createElement("div");
    button_close = document.createElement("div");
    button_open.setAttribute("id","description_open");
    button_close.setAttribute("id","description_close");
    button_open.innerHTML = button_close.innerHTML = "<div class='desc_text more-button style-scope ytd-video-secondary-info-renderer'></div>";
    button_open.querySelector(".desc_text").innerText = more.innerText.trim();
    button_close.querySelector(".desc_text").innerText = less.innerText.trim();
    description=more.closest("ytd-expander");
    description.appendChild(button_open);
    description.appendChild(button_close);
    button_open.addEventListener('click', function(e){
        description.removeAttribute("collapsed");
        more.setAttribute("hidden","");
        less.removeAttribute("hidden");
    });
    button_close.addEventListener('click', function(e){
        description.setAttribute("collapsed","");
        less.setAttribute("hidden","");
        more.removeAttribute("hidden");
    });
    watchMoreElement(more);
    watchLessElement(less);

    var styles = document.createElement("style");
    styles.innerHTML=`
ytd-video-secondary-info-renderer, #primary #meta #description_open, #primary #meta #description_close { border-color: rgba(0,0,0,0.125); padding-bottom: 0; border-bottom: none; }
[dark] ytd-video-secondary-info-renderer, [dark] #primary #meta #description_open, [dark] #primary #meta #description_close { border-color: rgba(255,255,255,0.125); padding-bottom: 0; border-bottom: none; }
ytd-watch-metadata { display: none !important; }
#meta-contents[hidden], #info-contents[hidden]{ display: block !important; }
tp-yt-paper-button#more, tp-yt-paper-button#less, tp-yt-paper-button#more[hidden] ~ #description_open, tp-yt-paper-button#less[hidden] ~ #description_close { display: none !important; }
#meta ytd-expander.ytd-video-secondary-info-renderer, #meta ytd-expander.ytd-video-secondary-info-renderer > * { margin-left: 0; }
#description_open, #description_close { width: 100%; border-top: 1px solid; border-radius: 0; text-align: center; cursor: pointer; margin-top: 1em; background: linear-gradient(rgba(0,0,0,0.02), transparent); }
[dark] #description_open, [dark] #description_close { background: linear-gradient(rgba(255,255,255,0.02), transparent); }
#description_open:hover, #description_close:hover { background: rgba(0,0,0,0.03); }
[dark] #description_open:hover, [dark] #description_close:hover { background: rgba(255,255,255,0.03); }
#description_open .desc_text, #description_close .desc_text { margin: 0; padding: 4px; }
`;
    document.head.appendChild(styles);
}
findElement("ytd-expander #content ~ tp-yt-paper-button#more").then(function(el){
    addSTUFF();
});