Description below the video with proper open/close toggle, instead of a side bar.
// ==UserScript==
// @name YouTube - Proper Description
// @namespace q1k
// @version 0.3
// @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 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, opened){
let parent = e.target.closest("ytd-expander");
if(opened){
parent.removeAttribute("collapsed");
more.setAttribute("hidden","");
less.removeAttribute("hidden");
} else {
parent.setAttribute("collapsed","");
less.setAttribute("hidden","");
more.removeAttribute("hidden");
}
e.target.blur();
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
var more, less;
function addSTUFF(){
more = document.querySelector("ytd-expander #content ~ tp-yt-paper-button#more");
more.addEventListener('click',function(e){
descriptionToggleButton(e, true);
},true);
less = document.querySelector("ytd-expander #content ~ tp-yt-paper-button#less");
less.addEventListener('click',function(e){
descriptionToggleButton(e, false);
},true);
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, #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(el){
addSTUFF();
});
function removeSideDescription(){
waitForElement("ytd-engagement-panel-section-list-renderer[target-id='engagement-panel-structured-description']").then(function(el) {
el.remove();
});
}
window.addEventListener("yt-page-data-updated", removeSideDescription, true);