☰

Reddit - Restore subscribers counter

restore subscribers counter on reddit

// ==UserScript==
// @name         Reddit - Restore subscribers counter
// @namespace    https://greasyfork.org/users/821661
// @version      1.0.4
// @description  restore subscribers counter on reddit
// @author       hdyzen
// @match        https://www.reddit.com/*
// @match        https://old.reddit.com/*
// @icon         https://www.google.com/s2/favicons?domain=www.reddit.com/&sz=64
// @grant        GM_xmlhttpRequest
// @license      GPL-3.0-only
// ==/UserScript==

function setCountersDesktop() {
    const isOldReddit = window.location.hostname.startsWith("old.");

    if (isOldReddit) {
        const subscribeButton = document.querySelector(".subscribe-button");

        getCountNumbers().then(({ subscribers, online }) => {
            const html = `
                <span class="subscribers"><span class="number">${subscribers}</span> <span class="word">readers</span></span>
                <p class="users-online"><span class="number">${online}</span> <span class="word">users here now</span></p>    
            `;

            subscribeButton.insertAdjacentHTML("afterend", html);
        });
    }

    const observer = new MutationObserver(() => {
        const node = document.querySelector("shreddit-subreddit-header:not([subscribers])");
        if (!node) return;

        const membersCount = document.querySelector("#subgrid-container div.xs\\:hidden > :nth-child(1) [number]")?.getAttribute("number");
        const onlineCount = document.querySelector("#subgrid-container div.xs\\:hidden > :nth-child(2) [number]")?.getAttribute("number");

        node.setAttribute("subscribers", membersCount);
        node.setAttribute("active", onlineCount);
        node.removeAttribute("activity-indicators-enabled");
    });

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

async function setCounterMobile() {
    const observer = new MutationObserver(async () => {
        const node = document.querySelector("#subgrid-container div.lowercase:not([processing])");
        if (!node) return;

        node.setAttribute("processing", "");

        node.outerHTML = await getCountersHTML();
    });

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

async function getCountersHTML() {
    return new Promise((resolve, reject) => {
        GM_xmlHttpRequest({
            url: window.location.href,
            responseType: "document",
            headers: {
                "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0",
            },
            onload(event) {
                try {
                    const doc = event.response;
                    const counters = doc.querySelector("#subgrid-container div.xs\\:hidden");

                    if (counters) {
                        resolve(counters.outerHTML);
                    } else {
                        reject("Counters not found");
                    }
                } catch (err) {
                    reject(err);
                }
            },
            onerror(err) {
                reject(err);
            },
        });
    });
}

async function getCountNumbers() {
    return new Promise((resolve, reject) => {
        GM_xmlhttpRequest({
            url: window.location.href.replace("old.reddit.com", "www.reddit.com"),
            responseType: "document",
            headers: {
                "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0",
            },
            onload(event) {
                try {
                    console.log("Load", event);

                    const doc = event.response;
                    const counters = doc.querySelectorAll("#subgrid-container div.xs\\:hidden faceplate-number");
                    const subscribers = counters[0].getAttribute("number");
                    const online = counters[1].getAttribute("number");

                    console.log("Counters", counters);
                    console.log(`Subscribers: ${subscribers}, Online: ${online}`);

                    if (counters) {
                        resolve({ subscribers, online });
                    } else {
                        reject("Counters not found");
                    }
                } catch (err) {
                    reject(err);
                }
            },
            onerror(err) {
                reject(err);
            },
        });
    });
}

const isMobile = GM_info?.platform?.mobile || /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);

if (isMobile) {
    setCounterMobile();
} else {
    setCountersDesktop();
}

function getCountersTemplate(membersText, onlineText) {
    return `
    <div class="flex items-center xs:items-end gap-[8px] xs:hidden sm:flex">
        <span class="lowercase text-neutral-content-weak text-[12px]">
            ${membersText}
        </span>
        <div class="flex items-center xs:items-end justify-center gap-[4px]">
            <span class="inline-flex bg-kiwigreen-400 rounded-full w-xs h-xs"></span>
            <span class="lowercase text-neutral-content-weak text-[12px]">
                ${onlineText}
            </span>
        </div>
    </div>
    `;
}

function getTemplate(subscribersCount, onlineCount) {
    return `
    <div class="flex flex-wrap text-left mt-xs gap-2xs px-md"> 
        <div class="flex flex-col items-start flex-1">
            <span class="text-neutral-content-strong">
                <strong>${subscribersCount}</strong>
            </span>
            <span class="text-[12px] text-neutral-content-weak">Membros</span>
        </div>
        <div class="flex flex-col items-start flex-1">
            <span class="text-neutral-content-strong">
                <strong>${onlineCount}</strong>
            </span>
            <span class="text-[12px] text-neutral-content-weak">
                <span class="inline-flex bg-kiwigreen-400 rounded-full w-xs h-xs"></span> Online
            </span>
        </div> 
    </div>
    `;
}

async function getSubredditCount(subredditName) {
    try {
        const res = await fetch(`https://www.reddit.com/r/${subredditName}/about.json`);
        const resInJson = await res.json();

        const subscribersCount = resInJson.data.subscribers.toLocaleString();
        console.log(subscribersCount);
    } catch (err) {
        console.error("Error on get subreddit counter:", err);
    }
}