☰

YouTube Autoplay Buttons. Adding “Play all videos” buttons back

Adds 3 buttons on each YouTube profile under Videos (All videos + shorts, All videos, Shorts only)

当前为 2024-10-04 提交的版本，查看 最新版本。

// ==UserScript==
// @name         YouTube Autoplay Buttons. Adding “Play all videos” buttons back
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Adds 3 buttons on each YouTube profile under Videos (All videos + shorts, All videos, Shorts only)
// @author       Nieme
// @match        https://www.youtube.com/*
// @grant        none
// @license      GPLv2
// ==/UserScript==

(function() {
    'use strict';

    function getChannelId() {
        let cId = null;

        if (typeof ytInitialData !== 'undefined') {
            cId = ytInitialData?.metadata?.channelMetadataRenderer?.externalId;
        }

        if (!cId) {
            cId = document.querySelector('.ytp-ce-link[href]')?.href?.split('/')?.pop() ||
                  document.querySelector('[itemprop="identifier"]')?.content;
        }

        return cId;
    }

    function addCustomButtons() {
        const chipsContainer = document.querySelector('ytd-feed-filter-chip-bar-renderer #chips');
        if (chipsContainer && !document.querySelector('.custom-play-all-button')) {
            function createButton(text, playlistLinkGenerator) {
                const newButton = document.createElement('a');
                newButton.style.marginLeft = '10px';
                newButton.href = '#';
                newButton.classList.add('custom-play-all-button');

                // Behalte die yt-chip-cloud-chip-renderer Struktur bei
                const newChip = document.createElement('yt-chip-cloud-chip-renderer');
                newChip.className = 'style-scope ytd-feed-filter-chip-bar-renderer';
                newChip.setAttribute('modern', '');
                newChip.setAttribute('aria-selected', 'false');
                newChip.setAttribute('role', 'tab');
                newChip.setAttribute('tabindex', '0');
                newChip.setAttribute('chip-style', 'STYLE_DEFAULT');

                const newText = document.createElement('span');
                newText.textContent = text;
                newChip.appendChild(newText);

                newButton.appendChild(newChip);

                newButton.addEventListener('click', (e) => {
                    e.preventDefault();

                    const cId = getChannelId();

                    if (cId) {
                        const playlistLink = playlistLinkGenerator(cId);
                        window.location.href = playlistLink;
                    } else {
                        console.error('Channel-ID konnte nicht abgerufen werden.');
                    }
                });

                chipsContainer.appendChild(newButton);
            }

            createButton('Play Standard and Shorts together', (cId) => `https://www.youtube.com/playlist?list=UU${cId.slice(2)}`);
            createButton('Play Standard only', (cId) => `https://www.youtube.com/playlist?list=UULF${cId.slice(2)}`);
            createButton('Play Shorts only', (cId) => `https://www.youtube.com/playlist?list=UUSH${cId.slice(2)}`);
        }
    }

    function checkAndAddButtons() {
        if (window.location.pathname.includes('/videos')) {
            addCustomButtons();
        }
    }

    // Stil sicherstellen für custom Buttons
    const style = document.createElement('style');
    style.innerHTML = `
        .custom-play-all-button {
            font-size: 14px;
            text-decoration: none;
        }
        .custom-play-all-button yt-chip-cloud-chip-renderer {
            display: inline-flex;
            align-items: center;
            padding: 0 12px;
            height: 36px;
            border-radius: 18px;
            background-color: #f1f1f1;
            color: #000;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .custom-play-all-button yt-chip-cloud-chip-renderer:hover {
            background-color: #e1e1e1;
        }
    `;
    document.head.appendChild(style);

    const observer = new MutationObserver(() => {
        checkAndAddButtons();
    });

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

    let oldHref = document.location.href;
    setInterval(() => {
        const currentHref = document.location.href;
        if (oldHref !== currentHref) {
            oldHref = currentHref;
            checkAndAddButtons();
        }
    }, 5000);

})();