☰

YouTube Toggle Description Button with Empty-Space Collapse

Displays a "Toggle Description" button to the right. Also, when the description is expanded, clicking on an empty part of the description will collapse it.

Verze ze dne 08. 02. 2025. Zobrazit nejnovější verzi.

// ==UserScript==
// @name         YouTube Toggle Description Button with Empty-Space Collapse
// @namespace    http://tampermonkey.net/
// @version      1.11
// @description  Displays a "Toggle Description" button to the right. Also, when the description is expanded, clicking on an empty part of the description will collapse it.
// @match        https://www.youtube.com/*
// @author       ChatGPT
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function that simulates a click on the built-in expand/collapse buttons.
    function toggleDescription() {
        const descriptionContainer = document.querySelector('#description-inline-expander');
        if (!descriptionContainer) return;
        const collapseButton = descriptionContainer.querySelector('#collapse');
        const expandButton = descriptionContainer.querySelector('#expand');
        if (collapseButton && !collapseButton.hidden) {
            collapseButton.click();
        } else if (expandButton && !expandButton.hidden) {
            expandButton.click();
        }
    }

    // Create a toggle button styled similarly to YouTube’s native button.
    // We use flex properties to dock the button to the right.
    function createStyledToggleButton() {
        const btn = document.createElement('tp-yt-paper-button');
        btn.id = 'subtle-toggle-button';
        btn.textContent = 'Toggle Description';
        btn.className = 'style-scope tp-yt-paper-button button ytd-text-inline-expander';
        btn.setAttribute('elevation', '0');
        btn.setAttribute('role', 'button');

        btn.style.cssText = `
            color: var(--ytd-text-inline-expander-button-color, var(--yt-spec-text-secondary));
            margin: 0;
            padding: 0;
            font-family: "Roboto", "Arial", sans-serif;
            font-size: 1.4rem;
            line-height: 2rem;
            font-weight: 500;
            text-transform: none;
            background: transparent;
            border: none;
            cursor: pointer;
            white-space: pre;
            text-align: right;
            margin-left: auto;
        `;

        // Clicking the button toggles the description.
        btn.addEventListener('click', toggleDescription);
        return btn;
    }

    // Insert the toggle button into the info container and force flex layout.
    function addToggleButton() {
        const infoContainer = document.querySelector('#info-container');
        if (!infoContainer) return;

        // Force the container into a flex layout.
        infoContainer.style.setProperty('display', 'flex', 'important');
        infoContainer.style.setProperty('align-items', 'center', 'important');

        // Avoid duplicates.
        if (document.querySelector('#subtle-toggle-button')) return;
        const toggleButton = createStyledToggleButton();
        infoContainer.appendChild(toggleButton);
    }

    // Add an event listener to the description expander so that when it is expanded,
    // clicking on any non-interactive (empty) space collapses the description.
    function addDescriptionCollapseListener() {
        const descExpander = document.querySelector('#description-inline-expander');
        if (!descExpander) return;
        // Only add once.
        if (descExpander.dataset.collapseListenerAdded) return;
        descExpander.addEventListener('click', function(e) {
            // Check if the description is expanded (collapse button is visible)
            const collapseButton = descExpander.querySelector('#collapse');
            if (collapseButton && !collapseButton.hidden) {
                // Only act if you did not click on an interactive element (like a link or a button).
                if (!e.target.closest('a, button, tp-yt-paper-button')) {
                    collapseButton.click();
                    // Prevent any other click handling (for example, YouTube’s own expand logic).
                    e.stopPropagation();
                }
            }
        });
        descExpander.dataset.collapseListenerAdded = 'true';
    }

    // Combine the toggle button and the collapse listener setup.
    function addToggleButtonAndCollapseListener() {
        addToggleButton();
        // Comment below line to disable empty space collapse behaviour
        addDescriptionCollapseListener();
    }

    // Use a persistent MutationObserver to re-add the button and listener if needed.
    const observer = new MutationObserver(() => {
        addToggleButtonAndCollapseListener();
    });
    observer.observe(document.body, { childList: true, subtree: true });
})();