☰

Greasy Fork is available in English.

Youtube play all from channel

add button to play all videos from channel

// ==UserScript==
// @name            	Youtube play all from channel
// @namespace       	https://greasyfork.org/users/821661
// @match           	https://www.youtube.com/*
// @grant           	none
// @version         	1.2
// @author          	hdyzen
// @description     	add button to play all videos from channel
// @license         	MIT
// ==/UserScript==
'use strict';

// Get channel id
async function getChannelId() {
    try {
        const response = await fetch(window.location.href);

        if (!response.ok) {
            throw new Error('Error loading data');
        }

        const data = await response.text();
        const result = /(?<="channelId":)"(.*?)"/.exec(data);

        return `UU${result[1].substring(2)}`;
    } catch (error) {
        console.error('Error:', error);
    }
}

// Add param to url
function addParam(url, key = 'list', value) {
    const urlObj = new URL(url);
    urlObj.searchParams.set(key, value);
    return urlObj.toString();
}

// Add play all button style
(function addBtnStyle() {
    const btnStyle = document.createElement('style');

    btnStyle.textContent = `
    #playAll {
        background-color: var(--yt-spec-badge-chip-background);
        color: var(--yt-spec-text-primary);
        transition: background-color .5s cubic-bezier(.05,0,0,1);
        height: 32px;
        min-width: 12px;
        padding: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        outline: none;
        overflow: hidden;
        cursor: pointer;
        user-select: none;
        position: relative;
        font-family: "Roboto","Arial",sans-serif;
        font-size: 1.4rem;
        line-height: 2rem;
        font-weight: 500;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        flex-direction: row;
        -moz-box-align: center;
        align-items: center;
        display: inline-flex;
        text-wrap: nowrap;
        text-decoration: none;
    }
    #playAll:hover {
        background-color: var(--yt-spec-button-chip-background-hover);
    }
    iron-selector#chips yt-chip-cloud-chip-renderer + #playAll {
        margin-left: 12px;
    }
    #owner #playAll {
        padding: 0 16px;
        height: 36px;
        font-size: 14px;
        line-height: 36px;
        border-radius: 18px;
        margin-left: 8px;
    }
    #header.ytd-rich-grid-renderer:has(> #playAll) {
        margin-top: 16px;
        margin-bottom: -8px;
        display: unset !important;
    }      
    `;

    document.head.appendChild(btnStyle);
})();

// Create/Update play all button
document.addEventListener('yt-page-data-updated', async e => {
    if (!/\/videos$|^\/watch/.test(window.location.pathname)) return;

    const playAllButton = document.querySelector(':is(ytd-watch-flexy, ytd-browse[page-subtype="channels"]):not([hidden]) #playAll');
    const channelId = await getChannelId();
    const toAppend = document.querySelector(':is(ytd-browse[page-subtype="channels"], ytd-watch-flexy):not([hidden]) :is(iron-selector#chips, #owner.ytd-watch-metadata), #header.ytd-rich-grid-renderer[hidden]:empty');
    const getFistVideo = document.getElementById('video-title-link');

    if (!playAllButton && channelId && toAppend) {
        const aEl = document.createElement('a');
        aEl.textContent = 'Play All';
        aEl.id = 'playAll';
        aEl.href = window.location.pathname === '/watch' ? addParam(document.URL, 'list', channelId) : addParam(getFistVideo.href, 'list', channelId);
        toAppend.appendChild(aEl);
    }

    if (playAllButton) {
        playAllButton.href = window.location.pathname === '/watch' ? addParam(document.URL, 'list', channelId) : addParam(getFistVideo.href, 'list', channelId);
    }
});