Description below the video with proper open/close toggle, instead of a side bar.
As of
// ==UserScript==
// @name YouTube - Proper Description
// @namespace q1k
// @version 1.1.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, 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_open.setAttribute("class","desc_toggles");
button_close.setAttribute("id","description_close");
button_close.setAttribute("class","desc_toggles");
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.replace("...","").trim();
button_close.querySelector(".desc_text").innerText = less.innerText.replace("...","").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");
});
if(button_open.innerText.trim().length==0) {
watchExistingButtonForChange(more, button_open);
}
if(button_close.innerText.trim().length==0) {
watchExistingButtonForChange(less, button_close);
}
var styles = document.createElement("style");
styles.innerHTML=`
[dark] #meta ytd-video-secondary-info-renderer, [dark] #primary #meta #description_open, [dark] #primary #meta #description_close { border-color: rgba(255,255,255,0.125); }
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; }
`;
/* var styles_alt = document.createElement("style");
styles_alt.innerHTML=`
#meta 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; }
#meta ytd-expander.ytd-video-secondary-info-renderer, #meta ytd-expander.ytd-video-secondary-info-renderer > * { margin-left: 0; }
#meta #description_open, #meta #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] #meta #description_open, [dark] #meta #description_close { background: linear-gradient(rgba(255,255,255,0.02), transparent); }
#meta #description_open:hover, #meta #description_close:hover { background: rgba(0,0,0,0.03); }
[dark] #meta #description_open:hover, [dark] #meta #description_close:hover { background: rgba(255,255,255,0.03); }
#meta #description_open .desc_text, #meta #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();
});