Sort YouTube Subscriptions Left UI alphabatically

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

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==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 });
})();