YouTube - Proper Description.user.js

// ==UserScript==
// @name         YouTube - Proper Description
// @namespace    q1k
// @version      2.1.3
// @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-start
// @compatible   Tampermonkey
// @downloadURL https://update.greasyfork.org/scripts/440613/YouTube%20-%20Proper%20Description.user.js
// @updateURL https://update.greasyfork.org/scripts/440613/YouTube%20-%20Proper%20Description.meta.js
// ==/UserScript==

var debug_mode = true;

async 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("#description-inline-expander");
    return [button_new, button_new_text];
}

var styles = document.createElement("style");
styles.innerHTML=`
/* remove */
ytd-watch-metadata #description #info-container, ytd-watch-metadata #description ytd-watch-info-text, /*view and date info*/
ytd-watch-metadata #comment-teaser, /*comment teaser*/
ytd-watch-metadata #bottom-row #description-inner #description-interaction {/*click effect on description*/
  display: none !important;
}
/*title and general look*/
ytd-watch-metadata { margin-top: 0; padding-top: 20px;/*2rem;*/ padding-bottom: 16px; border-bottom: 1px solid var(--yt-spec-10-percent-layer); }
ytd-watch-metadata #title h1 { font-family: 'Roboto',sans-serif; line-height: 2.6rem; font-weight: 400; font-size: 1.8rem; max-height: 5.2rem; }

/*moved views/date from #bottom-row #info-container*/
ytd-watch-metadata #title #info { line-height: 2rem; font-size: 1.4rem; font-weight: 400; color: var(--yt-spec-text-secondary); /*#aaa*/ display: initial; }
/**/
ytd-watch-metadata #title #info > *:nth-child(2n) { font-size: 0; }
ytd-watch-metadata #title #info > *:nth-child(2n):before { content: " • "; font-size: 1.4rem; user-select: none; }
ytd-watch-metadata #title #info { display: initial; }
ytd-watch-metadata #title #info > span { display: none; }
ytd-watch-metadata #title #info > * { font-weight: 400; }
ytd-watch-metadata #title #info > a[href*='hashtag'] ~ span { display: inline; }
/**/
ytd-watch-metadata #top-row > #info > * { /*moved views/date from #bottom-row #info-container*/ line-height: 2rem; font-size: 1.4rem; font-weight: 400; color: var(--yt-spec-text-secondary); /*#aaa*/ }
/*ytd-watch-metadata #top-row > #info > *:nth-child(2) { font-size: 0; }
ytd-watch-metadata #top-row > #info > *:nth-child(2):before { content: " • "; font-size: 1.4rem; user-select: none; }*/
/*action buttons top-row*/
ytd-watch-metadata #top-row { align-items: center; margin: 0 !important; padding-bottom: 5px !important; border-bottom: 1px solid var(--yt-spec-10-percent-layer); /*dark: rgba(255, 255, 255, 0.2), light: rgba(0, 0, 0, 0.1)*/}
ytd-watch-metadata #top-row #actions { margin-top: 0; }
/*views and date - created element populated automatically from #bottom-row #tooltip*/

/*moved channel info #owner from top-row to before bottom-row - profile pic-name, subscribe button, subs number, etc*/
ytd-watch-metadata #owner { margin: 0 0 12px 0; padding: 16px 0 0 0; }
/*general bottom-row look and other fixes*/
ytd-watch-metadata #bottom-row { margin: 0 !important; }
ytd-watch-metadata #bottom-row #description-inner { margin: 0; }
ytd-watch-metadata #bottom-row #description { cursor: auto; background: none !important; border-radius: 0; margin: 0 12px 0 0; margin: 0; /*padding-bottom: 1em;*/ /*border-bottom: 1px solid var(--yt-spec-10-percent-layer);*/ }
/*hide tooltip when hovered date info */
ytd-watch-metadata #bottom-row #description-inner > tp-yt-paper-tooltip[for="info"] { display: none; }
ytd-watch-metadata #bottom-row ytd-text-inline-expander #snippet { -webkit-mask-image: none !important; mask-image: none !important; }

ytd-watch-metadata #owner #avatar { width: 48px; height: 48px; }
ytd-watch-metadata #owner a { line-height: 1; }
ytd-watch-metadata #owner #avatar img { width: 100%; }
ytd-watch-metadata #owner ytd-video-owner-renderer { width: 100%; }

/*
ytd-watch-metadata #bottom-row #description-inner ytd-text-inline-expander[is-expanded][closed="true"] {
  max-height: 60px;
  overflow: hidden;
}
ytd-watch-metadata #bottom-row #description-inner ytd-text-inline-expander[is-expanded]:not([closed="true"]) {
  max-height: none;
}*/

ytd-watch-metadata #description [is-expanded] #ellipsis {
  display: none;
}
ytd-watch-metadata #expand.ytd-text-inline-expander,
ytd-watch-metadata #collapse.ytd-text-inline-expander {
  position: static;
  margin-top: 1rem !important;
  text-transform: uppercase;
  color: var(--yt-spec-text-secondary); /*#aaa*/
  /*font-size: 1.2rem;
  line-height: 1.8rem;*/
}
ytd-watch-metadata #expand.ytd-text-inline-expander paper-ripple,
ytd-watch-metadata #collapse.ytd-text-inline-expander paper-ripple {
  display: none !important;
}

/*******************************************************************/
/*wide show-hide buttons*/
/*ytd-watch-metadata #description #expand,
ytd-watch-metadata #description #collapse { border-color: rgba(0,0,0,0.125); padding-bottom: 0; border-bottom: none; }
[dark] ytd-watch-metadata #description #expand,
[dark] ytd-watch-metadata #description #collapse { border-color: rgba(255,255,255,0.125); }

ytd-watch-metadata #description #expand,
ytd-watch-metadata #description #collapse { margin-left: 0; }
ytd-watch-metadata #description #expand,
ytd-watch-metadata #description #collapse { 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] ytd-watch-metadata #description #expand,
[dark] ytd-watch-metadata #description #collapse { background: linear-gradient(rgba(255,255,255,0.02), transparent); }
ytd-watch-metadata #description #expand:hover,
ytd-watch-metadata #description #collapse:hover { background: rgba(0,0,0,0.03); }
[dark] ytd-watch-metadata #description #expand:hover,
[dark] ytd-watch-metadata #description #collapse:hover { background: rgba(255,255,255,0.03); }
[dark] ytd-watch-metadata #description #expand,
[dark] ytd-watch-metadata #description #collapse { margin: 0; padding: 4px; }
ytd-watch-metadata {
  border-bottom: none;
  padding-bottom: 0;
}*/
/*
ytd-watch-metadata, ytd-watch-metadata .desc_toggles { border-color: rgba(0,0,0,0.125); padding-bottom: 0; border-bottom: none; }
[dark] ytd-watch-metadata, [dark] ytd-watch-metadata .desc_toggles { border-color: rgba(255,255,255,0.125); }

#description, #description > * { margin-left: 0; }
ytd-watch-metadata .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] ytd-watch-metadata .desc_toggles { background: linear-gradient(rgba(255,255,255,0.02), transparent); }
ytd-watch-metadata .desc_toggles:hover { background: rgba(0,0,0,0.03); }
[dark] ytd-watch-metadata .desc_toggles:hover { background: rgba(255,255,255,0.03); }
ytd-watch-metadata .desc_toggles .desc_text { margin: 0; padding: 4px; }
*/
/********************************************************************/

/*ytd-watch-metadata { *//*display: none !important;*//* }
#meta-contents[hidden], #info-contents[hidden]{ display: block !important; }*/

ytd-watch-metadata tp-yt-paper-button#expand, ytd-watch-metadata tp-yt-paper-button#collapse, ytd-watch-metadata #description-inline-expander:not([is-expanded]) .description_close, ytd-watch-metadata #description-inline-expander[is-expanded] .description_open, ytd-watch-metadata #description-inline-expander tp-yt-paper-button#expand[hidden] ~ tp-yt-paper-button#collapse[hidden] ~ div.desc_toggles { display: none !important; }
ytd-watch-metadata .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; }
/*#player #cinematics, #player #cinematics canvas { display: none !important; }*/
/**/
/*game info cards*/
[dark] ytd-rich-metadata-renderer[darker-dark-theme] a { background-color: #242424;/*rgba(255,255,255,0.05;*/ }
/*uploader profile pic*/
#meta #avatar { width: 48px; height: 48px; margin-right: 16px; }
#meta #avatar img { width: 100%; }
/**/
/*general buttons, light and dark theme*/
#subscribe-button ytd-button-renderer a,
ytd-watch-metadata ytd-video-owner-renderer ytd-button-renderer a,
ytd-watch-metadata ytd-video-owner-renderer ytd-button-renderer button,
#channel-header-container #meta ~ #buttons ytd-button-renderer a,
#channel-header-container #meta ~ #buttons ytd-button-renderer button
{ border-radius: 2px !important; text-transform: uppercase !important; letter-spacing: 0.5px;
 background: /*rgb(7,92,211,0.1)*/ transparent !important; border: 1px solid #075cd3 !important; color: #075cd3 !important; }

[dark] #subscribe-button ytd-button-renderer a,
[dark] ytd-watch-metadata ytd-video-owner-renderer ytd-button-renderer a,
[dark] ytd-watch-metadata ytd-video-owner-renderer ytd-button-renderer button,
[dark] #channel-header-container #meta ~ #buttons ytd-button-renderer a,
[dark] #channel-header-container #meta ~ #buttons ytd-button-renderer button
{ background: /*rgba(62,166,255,0.1)*/ transparent !important; border: 1px solid #3ea6ff !important; color: #3ea6ff !important; }

/*
light{ background: rgba(0,0,0,0.1) !important; border: none !important; color: #000 !important; }
dark{ background: rgba(255,255,255,0.1) !important; border: none !important; color: #aaa !important; }
*/

/*owner buttons*/
#edit-buttons ytd-button-renderer a,
#edit-buttons ytd-button-renderer button
{ letter-spacing: 0.5px; background: rgb(7,92,211,0.1) !important; border: 1px solid #075cd3 !important; color: #075cd3 !important; }
[dark] #edit-buttons ytd-button-renderer a,
[dark] #edit-buttons ytd-button-renderer button
{ background: rgba(62,166,255,0.1) !important; border: 1px solid #3ea6ff !important; color: #3ea6ff !important; }
#sponsor-button ytd-button-renderer button { border-radius: 2px !important; text-transform: uppercase !important; }

/*sub button*/
#subscribe-button ytd-subscribe-button-renderer button.yt-spec-button-shape-next--filled,
#subscribe-button ytd-button-renderer button.yt-spec-button-shape-next--filled { background: #c00 !important; color: #fff; }
#subscribe-button ytd-subscribe-button-renderer button.yt-spec-button-shape-next--tonal,
#subscribe-button ytd-button-renderer button.yt-spec-button-shape-next--tonal { background: rgba(0,0,0,0.1) !important; color: #000; }
[dark] #subscribe-button ytd-subscribe-button-renderer button.yt-spec-button-shape-next--tonal,
[dark] #subscribe-button ytd-button-renderer button.yt-spec-button-shape-next--tonal { background: rgba(255,255,255,0.1) !important; color: #aaa; }
#subscribe ytd-subscribe-button-renderer button,
#subscribe ytd-button-renderer button,
#subscribe-button ytd-subscribe-button-renderer button,
#subscribe-button ytd-button-renderer button { letter-spacing: 0.5px; border-radius: 2px !important; text-transform: uppercase !important; }
/*animation*/
#subscribe-button ytd-subscribe-button-renderer .smartimation__border { border-radius: 2px !important; }

/*join/joined button */
#sponsor-button ytd-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal
{ background: /*rgb(7,92,211,0.1)*/ transparent !important; border: 1px solid #075cd3 !important; color: #075cd3 !important; }
[dark] #sponsor-button ytd-button-renderer button.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal
{ background: /*rgba(62,166,255,0.1)*/ transparent !important; border: 1px solid #3ea6ff !important; color: #3ea6ff !important; }

ytd-watch-metadata ytd-video-owner-renderer #sponsor-button ytd-button-renderer a.yt-spec-button-shape-next--tonal,
#channel-header-container #meta ~ #buttons #sponsor-button ytd-button-renderer a.yt-spec-button-shape-next--tonal
{ background: rgba(0,0,0,0.1) !important; color: #000 !important; border: none !important; }

[dark] ytd-watch-metadata ytd-video-owner-renderer #sponsor-button ytd-button-renderer a.yt-spec-button-shape-next--tonal,
[dark] #channel-header-container #meta ~ #buttons #sponsor-button ytd-button-renderer a.yt-spec-button-shape-next--tonal
{ background: rgba(255,255,255,0.1) !important; color: #aaa !important; border: none !important; }

/**/

/**/
ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { background: transparent !important; }
ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover, #info .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover { /*background: rgba(0,0,0,0.1) !important;*/ }
[dark] ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover, [dark] #info .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover { /*background: rgba(255,255,255,0.1) !important;*/ }
/**/
ytd-watch-metadata ytd-menu-renderer button, ytd-watch-metadata ytd-button-renderer yt-button-shape button, ytd-watch-metadata ytd-button-renderer yt-button-shape a { border-radius: 0 !important; }
ytd-watch-metadata ytd-toggle-button-renderer tp-yt-paper-tooltip #tooltip, #info ytd-button-renderer tp-yt-paper-tooltip #tooltip { width: max-content; }
ytd-watch-metadata #top-level-buttons-computed  button { padding: 0 12px; text-transform: uppercase; }
ytd-watch-metadata #top-level-buttons-computed ytd-button-renderer button { padding: 0 8px; text-transform: uppercase; }
ytd-watch-metadata #top-level-buttons-computed > *:not(:first-child) { margin: 0 0 0 8px; }
ytd-watch-metadata #flexible-item-buttons > * { margin-left: 8px;}
ytd-watch-metadata #flexible-item-buttons  button, ytd-watch-metadata #flexible-item-buttons a { padding: 0 8px; text-transform: uppercase; }
ytd-segmented-like-dislike-button-renderer button { padding: 0 12px !important; }

ytd-watch-metadata ytd-menu-renderer > #button-shape { margin-left: 3px !important; } /*ellipsis menu hidden actions*/

/*fix for Return Youtube Dislikes*/
/*ytd-watch-metadata #top-level-buttons-computed { position: relative; }
ytd-segmented-like-dislike-button-renderer button span#text { margin-left: 6px; }
ytd-watch-metadata ytd-menu-renderer[has-flexible-items] { *//*overflow:unset !important;*//* }
ytd-watch-metadata ytd-segmented-like-dislike-button-renderer { position: relative; }
ytd-watch-metadata ytd-segmented-like-dislike-button-renderer button > .yt-spec-button-shape-next__icon { margin-left: -4px !important}
ytd-watch-metadata ytd-segmented-like-dislike-button-renderer #segmented-dislike-button button { width: auto !important; padding: 0 12px 0 12px !important; }
ytd-watch-metadata .ryd-tooltip { position: absolute; bottom: 0px; margin: 0 !important; top: auto; left: 0; width: 100% !important; /*display: none;*//* }
ytd-watch-metadata ytd-segmented-like-dislike-button-renderer .ryd-tooltip { display: block; }
ytd-watch-metadata #ryd-bar-container { width: 100% !important; }
ytd-watch-metadata #ryd-dislike-tooltip { top: -40px !important; pointer-events: none; }*/

ytd-watch-metadata .ryd-tooltip { position: absolute; margin: 0 !important; bottom: -5px; }
ytd-watch-metadata .ryd-tooltip-bar-container { padding-bottom: 16px; }
ytd-watch-metadata #ryd-dislike-tooltip { top: auto !important; bottom: 0; pointer-events: none; }

/**/
ytd-comments#comments #replies #expander .more-button button,
ytd-comments#comments #replies #expander .less-button button { background: transparent !important; }
ytd-comments#comments #replies #expander .more-button button yt-touch-feedback-shape,
ytd-comments#comments #replies #expander .less-button button yt-touch-feedback-shape { display: none !important; }
/*remove like animation*/
ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg > g > g[clip-path*="url(#__lottie_element_"] { transform: matrix(1.0880000591278076,0,0,1.0880000591278076,69.95299530029297,67.9433822631836) !important; }
ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg g g g { transform: matrix(1,0,0,1,60,60) !important; }
ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg > g > g[clip-path*="url(#__lottie_element_"]:first-child { display: none !important; }
ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg g path { fill: #000 !important; stroke: #000; }
[dark] ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg g path { fill: #fff !important; stroke: #fff; }

ytd-segmented-like-dislike-button-renderer #segmented-like-button button svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(1) path { d:path(" M25.025999069213867,-4.00600004196167 C25.025999069213867,-4.00600004196167 5.992000102996826,-3.996999979019165 5.992000102996826,-3.996999979019165 C5.992000102996826,-3.996999979019165 11.012999534606934,-22.983999252319336 11.012999534606934,-22.983999252319336 C12.230999946594238,-26.90399932861328 13,-31.94300079345703 8.994000434875488,-31.981000900268555 C7,-32 5,-32 4.021999835968018,-31.007999420166016 C4.021999835968018,-31.007999420166016 -19.993000030517578,-5.03000020980835 -19.993000030517578,-5.03000020980835 C-19.993000030517578,-5.03000020980835 -20.027999877929688,32.025001525878906 -20.027999877929688,32.025001525878906 C-20.027999877929688,32.025001525878906 20.97599983215332,31.986000061035156 20.97599983215332,31.986000061035156 C25.010000228881836,31.986000061035156 26.198999404907227,29.562000274658203 26.99799919128418,25.985000610351562 C26.99799919128418,25.985000610351562 31.972000122070312,4.026000022888184 31.972000122070312,4.026000022888184 C33,-0.6930000185966492 30.392000198364258,-4.00600004196167 25.025999069213867,-4.00600004196167z") !important; }
ytd-segmented-like-dislike-button-renderer #segmented-like-button button svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(3) path { d:path(" M-27.993000030517578,-4.015999794006348 C-27.993000030517578,-4.015999794006348 -36.02799987792969,-3.996999979019165 -36.02799987792969,-3.996999979019165 C-36.02799987792969,-3.996999979019165 -36,31.9950008392334 -36,31.9950008392334 C-36,31.9950008392334 -28.027999877929688,31.976999282836914 -28.027999877929688,31.976999282836914 C-28.027999877929688,31.976999282836914 -27.993000030517578,-4.015999794006348 -27.993000030517578,-4.015999794006348z") !important; }
ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="false"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(1),
ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="false"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(3) { display: none !important; }
ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="true"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(1),
ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="true"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(3) { display: block !important; }

ytd-segmented-like-dislike-button-renderer #segmented-like-button button svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(2) path { d:path(" M25.025999069213867,-4.00600004196167 C25.025999069213867,-4.00600004196167 5.992000102996826,-3.996999979019165 5.992000102996826,-3.996999979019165 C5.992000102996826,-3.996999979019165 11.012999534606934,-22.983999252319336 11.012999534606934,-22.983999252319336 C12.230999946594238,-26.90399932861328 13,-31.94300079345703 8.994000434875488,-31.981000900268555 C7,-32 5,-32 4.021999835968018,-31.007999420166016 C4.021999835968018,-31.007999420166016 -19.993000030517578,-5.03000020980835 -19.993000030517578,-5.03000020980835 C-19.993000030517578,-5.03000020980835 -20.027999877929688,32.025001525878906 -20.027999877929688,32.025001525878906 C-20.027999877929688,32.025001525878906 20.97599983215332,31.986000061035156 20.97599983215332,31.986000061035156 C25.010000228881836,31.986000061035156 26.198999404907227,29.562000274658203 26.99799919128418,25.985000610351562 C26.99799919128418,25.985000610351562 31.972000122070312,4.026000022888184 31.972000122070312,4.026000022888184 C33,-0.6930000185966492 30.392000198364258,-4.00600004196167 25.025999069213867,-4.00600004196167z") !important; }
ytd-segmented-like-dislike-button-renderer #segmented-like-button button svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(4) path { d:path(" M-19.986000061035156,-4.03000020980835 C-19.986000061035156,-4.03000020980835 -36.020999908447266,-3.996999979019165 -36.020999908447266,-3.996999979019165 C-36.020999908447266,-3.996999979019165 -36.00199890136719,31.993000030517578 -36.00199890136719,31.993000030517578 C-36.00199890136719,31.993000030517578 -20.030000686645508,32.02299880981445 -20.030000686645508,32.02299880981445 C-20.030000686645508,32.02299880981445 -19.986000061035156,-4.03000020980835 -19.986000061035156,-4.03000020980835z") !important; }
ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="false"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(2),
ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="false"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(4) { display: block !important; }
ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="true"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(2),
ytd-segmented-like-dislike-button-renderer #segmented-like-button button[aria-pressed="true"] svg g g[clip-path*="url(#__lottie_element_"] > :nth-child(4) { display: none !important; }

`;
/*
var styles_alt = document.createElement("style");
    styles_alt.innerHTML=`
ytd-watch-metadata, ytd-watch-metadata .desc_toggles { border-color: rgba(0,0,0,0.125); padding-bottom: 0; border-bottom: none; }
[dark] ytd-watch-metadata, [dark] ytd-watch-metadata .desc_toggles { border-color: rgba(255,255,255,0.125); }

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


//prevent description opening when clicked anywhere on it
Element.prototype._addEventListenerPD = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(a,b,c) {
    if(this.id=="description" && this.classList.contains("ytd-watch-metadata")) {
        return
    }
    this._addEventListenerPD(a,b,c);
    if(!this.eventListenerList) this.eventListenerList = {};
    if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
    this.eventListenerList[a].push(b);
};

var more2;
function expand_button(el){
    //more = el;
    let buttons = addButton(true, "description_open", el);
    more2 = buttons[0];
    buttons[0].addEventListener('click', function(e) {
        description.setAttribute("is-expanded","");
        more.removeAttribute("hidden");
        less.setAttribute("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]);
}
function collapse_button(el){
    //less = el;
    let buttons = addButton(false, "description_close", el);
    buttons[0].addEventListener('click', function(e) {
        description.removeAttribute("is-expanded");
        less.removeAttribute("hidden");
        more.setAttribute("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]);
}


function watchVideoInfoForChange(info1,custom_info2){
    if(info1.innerText.indexOf('•') > 0) {
        custom_info2.innerText = info1.innerText.split('•')[0].trim() + ' • ' + info1.innerText.split('•')[1].trim();
    } else {
        custom_info2.innerText = info1.innerText.trim();
    }
    var obs = new MutationObserver(function(mutations){
        if(info1.innerText.indexOf('•') > 0) {
            custom_info2.innerText = info1.innerText.split('•')[0].trim() + ' • ' + info1.innerText.split('•')[1].trim();
        } else {
            custom_info2.innerText = info1.innerText.trim();
        }
    });

    obs.observe(info1, {
        childList: true,
        subtree: true,
        characterData: true
    });
}
function createCustomInfo(date_info, top_row){
    let custom_info = document.createElement("span");
    custom_info.setAttribute("id","info");
    custom_info.innerHTML = "<span class='views-and-date'></span>";
    let custom_info2 = custom_info.querySelector(".views-and-date");

    top_row.prepend(custom_info);

    watchVideoInfoForChange(date_info,custom_info2);
}

(async function(){
    debug_mode && console.log("searching for elements");
    let top_row = await findElement("ytd-watch-metadata #top-row");
    debug_mode && console.log("found: #top-row");
    let bottom_row = await findElement("ytd-watch-metadata #bottom-row");
    debug_mode && console.log("found: #bottom-row");
    let uploader = await findElement("ytd-watch-metadata #owner");
    debug_mode && console.log("found: #owner");
    let date_info = await findElement("ytd-watch-metadata #bottom-row #description ytd-watch-info-text tp-yt-paper-tooltip #tooltip, ytd-watch-metadata #bottom-row #description > tp-yt-paper-tooltip #tooltip");
    debug_mode && console.log("found: #tooltip");
    let description_expander = await findElement("ytd-watch-metadata #description #description-inline-expander");
    debug_mode && console.log("found: #description");

    more = await findElement("ytd-watch-metadata #expand");
    debug_mode && console.log("found: #expand");
    less = await findElement("ytd-watch-metadata #collapse");
    debug_mode && console.log("found: #collapse");

    expand_button(more)
    collapse_button(less);

    bottom_row.parentNode.insertBefore(uploader, bottom_row); // move uploader info before #bottom-row

    createCustomInfo(date_info, top_row);

    document.head.appendChild(styles);

    findElement("ytd-watch-metadata > ytd-metadata-row-container-renderer").then(function(el){
        more2.parentNode.insertBefore(el, more2); // move game_info cards inside description
    });
    debug_mode && console.log("ytpd-done");

})();