YouTube - Proper Description

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

נכון ליום 17-05-2022. ראה הגרסה האחרונה.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         YouTube - Proper Description
// @namespace    q1k
// @version      1.2.0
// @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
        });
    });
}
function watchExistingButtonForChange(oldbutton, newbutton) {
    var mo = new MutationObserver(function(mutations) {
        if(oldbutton.innerText.trim().length>0) {
            newbutton.querySelector('.desc_text').innerText = oldbutton.innerText.replace("...","").trim();
            mo.disconnect();
        }
    });
    mo.observe(oldbutton, {
        childList: true,
        subtree: true,
        characterData: true
    });
}
var more, less;
var description, button_current;
function addButton(open, idname, selector) {
    button_current = document.querySelector(selector);
    if(open) { more = button_current; }
    else { less = button_current; }
    let button = document.createElement("div");
    //button.setAttribute("id", idname);
    button.setAttribute("class","desc_toggles "+idname);
    button.innerHTML = "<div class='desc_text more-button style-scope ytd-video-secondary-info-renderer'></div>";
    button.querySelector(".desc_text").innerText = button_current.innerText.replace("...","").trim();
    description = button_current.closest("ytd-expander");
    description.appendChild(button);
    if(open){
        button.addEventListener('click', function(e) {
            description.removeAttribute("collapsed");
            more.setAttribute("hidden","");
            less.removeAttribute("hidden");
        });
    } else {
        button.addEventListener('click', function(e) {
            description.setAttribute("collapsed","");
            less.setAttribute("hidden","");
            more.removeAttribute("hidden");
        });
    }
    if(button.innerText.trim().length==0) {
        watchExistingButtonForChange(button_current, button);
    }
}

var styles = document.createElement("style");
styles.innerHTML=`
ytd-watch-metadata { display: none !important; }
#meta-contents[hidden], #info-contents[hidden]{ display: block !important; }
#meta tp-yt-paper-button#more, #meta tp-yt-paper-button#less, #meta ytd-expander[collapsed] .description_close, #meta ytd-expander:not([collapsed]) .description_open, #meta ytd-expander tp-yt-paper-button.ytd-expander[hidden] ~ tp-yt-paper-button.ytd-expander[hidden] ~ div.desc_toggles { display: none !important; }
#meta .description_open, #meta .description_close { display: inline-block; cursor: pointer; }
ytd-video-primary-info-renderer[use-yt-sans20-light] .title.ytd-video-primary-info-renderer { line-height:2.6rem !important; font-weight:400 !important; font-size:1.8rem !important; font-family:"Roboto",sans-serif !important; }

`;
/*
var styles_alt = document.createElement("style");
    styles_alt.innerHTML=`
#meta ytd-video-secondary-info-renderer, #primary #meta .desc_toggles { border-color: rgba(0,0,0,0.125); padding-bottom: 0; border-bottom: none; }
[dark] #meta ytd-video-secondary-info-renderer, [dark] #primary #meta .desc_toggles { border-color: rgba(255,255,255,0.125); }

#meta ytd-expander.ytd-video-secondary-info-renderer, #meta ytd-expander.ytd-video-secondary-info-renderer > * { margin-left: 0; }
#meta .desc_toggles { 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] #meta .desc_toggles { background: linear-gradient(rgba(255,255,255,0.02), transparent); }
#meta .desc_toggles:hover { background: rgba(0,0,0,0.03); }
[dark] #meta .desc_toggles:hover { background: rgba(255,255,255,0.03); }
#meta .desc_toggles .desc_text { margin: 0; padding: 4px; }
`;*/
document.head.appendChild(styles);

findElement("ytd-expander #content ~ tp-yt-paper-button#more").then(function(el){
    addButton(true, "description_open", "#meta ytd-video-secondary-info-renderer ytd-expander #content ~ tp-yt-paper-button#more");
});
findElement("ytd-expander #content ~ tp-yt-paper-button#less").then(function(el){
    addButton(false, "description_close", "#meta ytd-video-secondary-info-renderer ytd-expander #content ~ tp-yt-paper-button#less");
});
findElement("#info ytd-video-primary-info-renderer").then(function(el){
    el.removeAttribute("use-yt-sans20-light");
});