YouTube - Proper Description

Watch page description below the video with proper open/close toggle, instead of a side bar.
当前为 2022-07-01 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         YouTube - Proper Description
// @namespace    q1k
// @version      1.3.7
// @description  Watch page 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, newbuttontext) {
    if(newbutton.innerText.trim().length>0) {
        return;
    }
    newbuttontext.innerText = oldbutton.innerText.replace("...","").trim();
    var mo = new MutationObserver(function(mutations) {
        if(oldbutton.innerText.trim().length>0) {
            newbuttontext.innerText = oldbutton.innerText.replace("...","").trim();
            mo.disconnect();
        }
    });
    mo.observe(oldbutton, {
        childList: true,
        subtree: true,
        characterData: true
    });
}
var more, less, description;
function addButton(open, idname, button_current) {
    let button_new = document.createElement("div");
    //button.setAttribute("id", idname);
    button_new.setAttribute("class","desc_toggles "+idname);
    button_new.innerHTML = "<div class='desc_text more-button style-scope ytd-video-secondary-info-renderer'></div>";
    let button_new_text = button_new.querySelector(".desc_text");
    button_current.parentNode.appendChild(button_new);
    description = button_current.closest("ytd-expander");
    return [button_new, button_new_text];
}

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 .desc_toggles { 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("#meta ytd-video-secondary-info-renderer ytd-expander tp-yt-paper-button#more").then(function(el){
    more = el;
    let buttons = addButton(true, "description_open", el);
    buttons[0].addEventListener('click', function(e) {
        description.removeAttribute("collapsed");
        more.setAttribute("hidden","");
        less.removeAttribute("hidden");
    });
    if(typeof yt !== "undefined")
        yt.msgs_.SHOW_MORE ? buttons[1].innerText=yt.msgs_.SHOW_MORE : buttons[1].innerText = more.innerText.replace("...","").trim();
    watchExistingButtonForChange(el, buttons[0], buttons[1]);
});
findElement("#meta ytd-video-secondary-info-renderer ytd-expander tp-yt-paper-button#less").then(function(el){
    less = el;
    let buttons = addButton(false, "description_close", el);
    buttons[0].addEventListener('click', function(e) {
        description.setAttribute("collapsed","");
        less.setAttribute("hidden","");
        more.removeAttribute("hidden");
    });
    if(typeof yt !== "undefined")
        yt.msgs_.SHOW_LESS ? buttons[1].innerText=yt.msgs_.SHOW_LESS : buttons[1].innerText = less.innerText.replace("...","").trim();
    watchExistingButtonForChange(el, buttons[0], buttons[1]);
});
findElement("#info ytd-video-primary-info-renderer").then(function(el){
    el.removeAttribute("use-yt-sans20-light");
});
欢迎访问Greasy Fork镜像
