// ==UserScript==
// @name Stop Gif Autoloading
// @include *
// @grant GM_getResourceURL
// @grant GM_addStyle
// @resource placeholder data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQAQAAAADRoQmIAAAAO0lEQVR42mNQUlJg+P//A0P9/x8MBR0GDPm3PzC8B+L82z8Y8m8UgPlvgDjv9g8g/sBQ0P0Brl5JSQEAEV0g/OxTjp0AAAAASUVORK5CYII=
// ==/UserScript==

"use strict";
const placeholderAttr = "fktjifsj";
GM_addStyle(`
    [${placeholderAttr}] {
        cursor: pointer !important;
        image-rendering: -moz-crisp-edges !important;
        image-rendering: crisp-edges !important;
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: pixelated !important;
    }
`);

new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            if (node.tagName == "IMG") {
                stopGif(node);
            } else if (node.firstChild) {
                for (const img of node.getElementsByTagName("img")) {
                    stopGif(img);
                }
            }
        });
    });
}).observe(document.body, { childList: true, subtree: true });

for (const img of document.images) {
    stopGif(img);
}

function stopGif(img) {
    let urlObj;

    try {
        urlObj = new URL(img.src);
    } catch {
        return;
    }

    if (urlObj.pathname.endsWith(".gif")) {
        const origUrl = img.src;
        img.src = GM_getResourceURL("placeholder");
        img.setAttribute(placeholderAttr, "");

        img.addEventListener("click", async () => {
            if (!img.alt) img.alt = "GIF";
            img.src = "";
            img.removeAttribute(placeholderAttr);
            await sleep(0);
            img.src = origUrl;
        }, { once: true });
    }
}

function sleep(delay) {
    return new Promise(resolve => setTimeout(resolve, delay));
}