Modify YouTube Shorts

yts.js

// ==UserScript==
// @name         Youtube Shorts
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Modify the visiblity of Youtube Shorts
// @author       John-John Tedro <[email protected]>
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        GM_registerMenuCommand
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    let mode = GM_getValue("mode", "opacity");
    let subs = null, setup = null, refresh = null, observeSubs = null;

    const toggle = GM_registerMenuCommand("Toggle Hide/Opacity", _ => {
        mode = mode === "opacity" ? "hide" : "opacity";
        GM_setValue("mode", mode);
        refresh();
    });

    const findParent = el => {
        while (el && el.tagName !== "YTD-GRID-VIDEO-RENDERER" && el.tagName !== "YTD-ITEM-SECTION-RENDERER") {
            el = el.parentNode;
        }

        return el;
    };

    let set = el => {
        let fields = mode === "opacity" ? {display: null, opacity: 0.4} : {display: "none", opacity: null};
        Object.assign(el.style, fields);
    };

    let observe = callback => {
        let o = null;
        o = new MutationObserver(() => callback(o));
        return obj => o.observe(obj, { childList: true, subtree: true });
    };

    let debounce = (millis, callback) => {
        let obj = null, location = null;

        return () => {
            if (!!obj) {
                clearTimeout(obj);
                obj = null;
            }

            if (location !== document.location) {
                location = document.location;
                callback();
            } else {
                obj = setTimeout(callback, millis);
            }
        };
    };

    refresh = debounce(100, () => {
        if (!document.contains(subs)) {
            subs = null;
            setup(document);
            return;
        }

        for (let el of subs.querySelectorAll(".yts-set")) {
            el.style = null;
        }

        for (let el of subs.querySelectorAll("ytd-thumbnail a.ytd-thumbnail")) {
            let parent = findParent(el);

            if (!!parent) {
                if (!!el && el.getAttribute("href").startsWith("/shorts/")) {
                    set(parent);
                    parent.classList.add("yts-set");
                } else {
                    parent.classList.remove("yts-set");
                }
            }
        }
    });

    observeSubs = observe(refresh);

    setup = observe(obs => {
        subs = document.querySelector("ytd-section-list-renderer[page-subtype=\"subscriptions\"]");

        if (!!subs) {
            obs.disconnect();
            observeSubs(subs);
        }
    });

    setup(document);
})();