Youtube - right side description/comments/related vids with toggle button

Relocates the description to the right side and creates a button on the header to toggle description/comments/related
当前为 2024-12-12 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name            Youtube - right side description/comments/related vids with toggle button
// @description     Relocates the description to the right side and creates a button on the header to toggle description/comments/related
// @namespace       https://greasyfork.org/en/users/758587-barn852
// @version         3.0
// @author          barn852
// @license         MIT
// @match           *://*.youtube.com/*
// @include         *://*.youtube.com/watch*
// @grant           none
// @require         https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @run-at          document-end
// @noframes
// ==/UserScript==

(function(){
    'use strict';

    const hide_related = () => $('#related').hide();
    const insert_right = () => document.querySelector('#secondary-inner').appendChild(document.getElementById('below'));
    const insert_comments = () => document.querySelector('#secondary-inner').appendChild(document.getElementById('comments'));
    const hide_comments = () => $('#comments').hide();

    const observer = new MutationObserver(function(mutations){
        mutations.forEach(function(mutation){
            if (mutation.type === 'childList'){
                mutation.addedNodes.forEach(function(node){
                    hide_related();
                    hide_comments();
                });
            };
            if (document.querySelector("#secondary-inner > #below")) { return } else { insert_right() };
            if (document.querySelector("#secondary-inner > #comments")) { return } else { insert_comments() };
        });
    });

    observer.observe(document.body, {'childList': true, 'subtree' : true});

    let target = document.querySelectorAll('body')[0];
    let options = {'childList': true, 'subtree' : true};

    let button = document.createElement('button');
    button.innerHTML = '<svg width="24" height="24" viewBox="0 0 22 22"><g fill="currentColor"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/></g></svg>';
    button.style = ` background: transparent; border: 0; color: rgb(96,96,96); outline: 0; cursor: pointer; padding-left: 24px; padding-right: 24px; `;

   let hide = 2;

    button.onclick = ()=>{

      window.scrollTo(0, 0);

            if (hide==1) {
              observer.disconnect();
              $('#related').hide();
              $('ytd-watch-metadata').show();
              $('#comments').hide();
              hide = 2;
            }

            else if (hide==2) {
              observer.disconnect();
              $('#related').show();
              $('ytd-watch-metadata').hide();
              $('#comments').hide();
              hide = 3;
            }

            else if (hide==3) {
              observer.disconnect();
              $('#related').hide();
              $('ytd-watch-metadata').hide();
              $('#comments').show();
              hide = 1;
            }
                  else
                observer.observe(target, options);
    }

/* -------------------------

    let hide = true;

    button.onclick = ()=>{
        hide = !hide;
        $('#meta-contents').show();
        if (hide){
            if ($('#related')[0])
                $('#related').hide();
            else
                observer.observe(target, options);
                console.log(`hide`);
        }
        else{
            observer.disconnect();
            console.log(`show`);
            $('#related').show();
            $('#meta-contents').hide();
        }
    }

------------------------- */

    let waitButton = setInterval(() => {
        if ($('#end').length) {
            clearInterval(waitButton);

            let menu = $('#end')[0];
            menu.insertBefore(button, menu.lastElementChild);

        }
    }, 500);

    console.log('inserted');

    window.addEventListener('yt-page-data-updated', function () {

        var checkExist = setInterval(function() {
            var ytMeta = document.querySelector('#description #expand');
            if(ytMeta){
                (ytMeta).click();
                clearInterval(checkExist);
            }
        }, 500);

    });

} )()