☰

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)

As of 2024-10-04. See the latest version.

// ==UserScript==
// @name         YouTube Autoplay Buttons. Adding “Play all videos” buttons back
// @namespace    http://tampermonkey.net/
// @version      0.6
// @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
// @run-at       document-end
// ==/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) {
            console.error('Userscript YouTube Autoplay Error: Chips container not found. Contact me on Discord: Nieme');
            return;
        }

        if (!document.querySelector('.custom-play-all-button')) {
            function createButton(text, playlistLinkGenerator) {
                const newButton = document.createElement('button'); // Verwende ein Button-Element
                newButton.style.marginLeft = '10px';
                newButton.classList.add('custom-play-all-button');
                newButton.textContent = text; // Setze den Button-Text direkt

                // CSS-Eigenschaften basierend auf deinen Vorgaben hinzufügen
                newButton.style.marginLeft = '10px';
                newButton.style.padding = '6px 12px';
                newButton.style.border = '0px';
                newButton.style.backgroundColor = 'var(--yt-spec-badge-chip-background)';
                newButton.style.color = 'var(--yt-spec-text-primary)';
                newButton.style.borderRadius = '7px';
                newButton.style.cursor = 'pointer';
                newButton.style.fontFamily = '"Roboto","Arial",sans-serif';
                newButton.style.fontSize = '1.4rem';
                newButton.style.lineHeight = '2rem';
                newButton.style.fontWeight = '500';

                // Hover-Effekte
                newButton.addEventListener('mouseover', () => {
                    newButton.style.backgroundColor = 'var(--yt-spec-button-chip-background-hover)';
                });

                newButton.addEventListener('mouseout', () => {
                    newButton.style.backgroundColor = 'var(--yt-spec-badge-chip-background)';
                });

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

                    const cId = getChannelId();

                    if (cId) {
                        const playlistLink = playlistLinkGenerator(cId);
                        window.location.href = playlistLink;
                    } else {
                        console.error('Userscript YouTube Autoplay Error: Channel ID could not be retrieved. Contact me on Discord: Nieme');
                    }
                });

                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() {
        setTimeout(() => {
            if (window.location.pathname.includes('/videos')) {
                addCustomButtons();
            }
        }, 1000); // Verzögerung von 1 Sekunde
    }

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

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

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