☰

Youtube Subscription Search

Adds the ability to search though subscribed channels

// ==UserScript==
// @name         Youtube Subscription Search
// @namespace    http://tampermonkey.net/
// @version      2024-09-16
// @description  Adds the ability to search though subscribed channels
// @author       Chillfam
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function showAllSubscriptions(allSubscriptions, showLess) {
        for (let i = 0; i < allSubscriptions.length; i++) {
            allSubscriptions[i].parentNode.hidden = false;
            //showLess.click();
        }
    }

    function hideAllSubscriptions(allSubscriptions) {
        for (let i = 0; i < allSubscriptions.length; i++) {
            allSubscriptions[i].parentNode.hidden = true;
        }
    }

    let observer = new MutationObserver(function() {
        const showMore = document.querySelector("ytd-guide-collapsible-entry-renderer.style-scope:nth-child(8) > ytd-guide-entry-renderer:nth-child(1) > a:nth-child(1) > tp-yt-paper-item:nth-child(1)");
        showMore.click();
        const allSubscriptions = document.querySelectorAll('a#endpoint.yt-simple-endpoint.style-scope.ytd-guide-entry-renderer[href^="/@"]');
        const showLess = document.querySelector("ytd-guide-collapsible-entry-renderer.style-scope:nth-child(8) > div:nth-child(2) > ytd-guide-entry-renderer:nth-child(2) > a:nth-child(1) > tp-yt-paper-item:nth-child(1)");
        //showLess.click();
        const subscriptionsTitleElement = document.querySelector("ytd-guide-section-renderer.style-scope:nth-child(2) > h3:nth-child(1)");
        const backgroundElement = document.getElementById("background");
        observer.disconnect();
        const darkBackgroundColor = "rgb(15, 15, 15)";

        let searchDiv = document.createElement('div');
        searchDiv.style.marginLeft = '0px';
        searchDiv.style.paddingLeft = '8px';
        searchDiv.style.paddingRight = '8px';
        searchDiv.style.height = '25px';
        searchDiv.style.border = '1px solid rgb(51, 51, 51)';
        searchDiv.style.borderRadius = '50px';

        let searchElement = document.createElement('input');
        searchElement.setAttribute('placeholder', '\uD83D\uDD0D');
        searchElement.style.border = '0px';
        searchElement.style.paddingRight = '10px';
        searchElement.style.paddingLeft = '4px';
        searchElement.style.paddingTop = '4px';
        searchElement.style.width = '160px';
        searchElement.style.outline = 'none';
        searchElement.style.backgroundColor = 'transparent';
        searchElement.style.display = 'inline-block';

        let buttonElement = document.createElement('button');
        buttonElement.style.border = '1px';
        buttonElement.style.marginLeft = '4px';
        buttonElement.style.backgroundColor = 'transparent';
        buttonElement.textContent = 'X';
        buttonElement.style.display = 'inline-block';
        buttonElement.style.borderRadius = '50px';
        buttonElement.style.marginTop = '3px';
        buttonElement.hidden = true;

        if (window.getComputedStyle(backgroundElement).background == darkBackgroundColor) {
            searchElement.style.color = 'white';
            searchElement.style.caretColor = 'white';
            buttonElement.style.color = 'white';
        }
        else {
            searchElement.style.color = 'black';
            searchElement.style.caretColor = 'black';
            buttonElement.style.color = 'black';
        }

        searchDiv.appendChild(searchElement);
        searchDiv.appendChild(buttonElement);
        subscriptionsTitleElement.insertAdjacentElement('afterend', searchDiv);



        searchElement.addEventListener('input', function(event) {
            if (event.target.value != '') {
                //showMore.click();
                hideAllSubscriptions(allSubscriptions, showLess)
                for (let i = 0; i < allSubscriptions.length; i++) {
                    if (allSubscriptions[i].title.toLowerCase().startsWith(event.target.value.toLowerCase())) {
                        allSubscriptions[i].parentNode.hidden = false;
                    }
                }
                buttonElement.hidden = false;
            }
            else {
                showAllSubscriptions(allSubscriptions, showLess);
                buttonElement.hidden = true;
            }
        });

        searchElement.addEventListener('focus', function() {
            searchDiv.style.borderColor = 'rgb(28, 98, 185)';
        });

        searchElement.addEventListener('blur', function() {
            searchDiv.style.borderColor = 'hsla(0,0%,26%,1)';
        });

        buttonElement.addEventListener('click', function() {
            searchElement.value = '';
            buttonElement.hidden = true;
            showAllSubscriptions(allSubscriptions, showLess);
        });

        buttonElement.addEventListener('mouseover', function() {
            if (window.getComputedStyle(backgroundElement).background == darkBackgroundColor) {
                buttonElement.style.backgroundColor = 'rgb(51, 51, 51)';
            }
            else {
                buttonElement.style.backgroundColor = 'rgb(204,204,204)';
            }
        });

        buttonElement.addEventListener('mouseout', function() {
            buttonElement.style.backgroundColor = 'transparent';
        });

    });

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