☰

Sort YouTube Subscriptions Left UI alphabatically

When you click "show more", you channel list from left menu sort alphabatically.

// ==UserScript==
// @name         Sort YouTube Subscriptions Left UI alphabatically
// @namespace    https://github.com/heyqule/youtube_subscription_sort
// @version      0.3
// @description  When you click "show more", you channel list from left menu sort alphabatically.
// @author       heyqule
// @match        https://www.youtube.com/*
// ==/UserScript==

(function() {
    'use strict';

    function sortChannels(a, b)
    {
        let nameA = a.querySelector("#endpoint").textContent.trim().toLowerCase();
        let nameB = b.querySelector("#endpoint").textContent.trim().toLowerCase();
        return nameA.localeCompare(nameB);
    }

    function sortSub(event) {
        let subscriptionList = document.querySelectorAll('div#sections ytd-guide-section-renderer:nth-child(2)')[0]
        if (!subscriptionList) return;

        let channels = Array.from(subscriptionList.querySelectorAll('div#items ytd-guide-entry-renderer'));
        let expandable_channels = Array.from(subscriptionList.querySelectorAll('ytd-guide-collapsible-entry-renderer div#expandable-items ytd-guide-entry-renderer'));

        channels.concat(expandable_channels)
        channels.sort(sortChannels);

        let trustedPolicy = null;
        if (window.trustedTypes && window.trustedTypes.createPolicy) {
            trustedPolicy = window.trustedTypes.createPolicy('youtube_subscription_sort', {
                createHTML: (string, sink) => string
            });
        }


        if (trustedPolicy) {
            subscriptionList.innerHTML = trustedPolicy.createHTML('');
        }
        else
        {
            subscriptionList.innerHTML = '';
        }

        channels.forEach(channel => {
            //Exclude show more and show less, they break after the sort.
            if (channel.id != 'collapser-item' && channel.id != 'expander-item') {
                subscriptionList.appendChild(channel)
            }
        });
    }


    const observer = new MutationObserver(() => {
        let show_more = document.querySelectorAll('div#sections ytd-guide-section-renderer:nth-child(2) ytd-guide-entry-renderer#expander-item')[0]

        if (show_more) {
            console.log('Adding click event...')
            show_more.addEventListener("click", sortSub);
            observer.disconnect();
        }
    });

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