YouTube - Proper Description

Description below the video with proper open/close toggle, instead of a side bar.
当前为 2022-02-26 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         YouTube - Proper Description
// @namespace    q1k
// @version      0.0.2b
// @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-body
// ==/UserScript==

function waitForElement(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 descriptionToggleButton(e){
    let parent = e.target.closest("ytd-expander");
    parent.collapsed = !parent.collapsed;
    if(parent.collapsed){
        lesslabel.innerHTML = morelabel.innerHTML = "Show More";
    } else {
        lesslabel.innerHTML = morelabel.innerHTML = "Show Less";
    }
    e.target.blur();
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
}

var more, morelabel, less, lesslabel;
function addSTUFF(){
    more = document.querySelector("ytd-expander #content ~ tp-yt-paper-button#more");
    morelabel = more.querySelector("yt-formatted-string");
    more.addEventListener('click',function(e){
        descriptionToggleButton(e);
    },true);
    less = document.querySelector("ytd-expander #content ~ tp-yt-paper-button#less yt-formatted-string");
    lesslabel = more.querySelector("yt-formatted-string");
    less.addEventListener('click',function(e){
        descriptionToggleButton(e);
    },true);
    lesslabel.innerHTML = morelabel.innerHTML = "Show More";

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

waitForElement("ytd-expander #content ~ tp-yt-paper-button#more").then(function(elm){
    addSTUFF();
});
欢迎访问Greasy Fork镜像
