☰

Twitch [Chatters Count]

Shows the amount of people in the chat

// ==UserScript==
// @name           Twitch [Chatters Count]
// @name:pl        Twitch [Ilość Czatowników]
// @description    Shows the amount of people in the chat
// @description:pl Pokazuje liczbę użytkowników na czacie
// @version        1.2.1
// @author         Pabli
// @namespace      https://github.com/pabli24
// @homepageURL    https://github.com/pabli24/twitch-chatters-count
// @supportURL     https://github.com/pabli24/twitch-chatters-count/issues
// @license        MIT
// @match          https://www.twitch.tv/*
// @match          https://m.twitch.tv/*
// @icon           data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iI2ZmODI4MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTU2LjYgMTk2LjNhOTkuNCA5OS40IDAgMSAxIDEyMy4xIDk2LjUgMzkuNyAzOS43IDAgMCAwIDM1LjkgMjIuN2gxOS45YTU5LjYgNTkuNiAwIDAgMSA1OS42IDU5LjZ2MzkuOGgtMzkuOHYtMzkuOGMwLTExLTguOS0xOS45LTE5LjktMTkuOWgtMTkuOWE3OS40IDc5LjQgMCAwIDEtNTkuNi0yNi45IDc5LjUgNzkuNSAwIDAgMS01OS42IDI2LjloLTE5LjljLTExIDAtMTkuOSA4LjktMTkuOSAxOS45djM5LjhoLTM5Ljh2LTM5LjhhNTkuNiA1OS42IDAgMCAxIDU5LjYtNTkuNmgxOS45YzE1LjQgMCAyOS40LTguOCAzNS45LTIyLjdhOTkuNCA5OS40IDAgMCAxLTc1LjctOTYuNlpNMjU2IDI1NmE1OS42IDU5LjYgMCAxIDEgMC0xMTkuMiA1OS42IDU5LjYgMCAwIDEgMCAxMTkuMloiLz48cGF0aCBmaWxsPSIjZmY4MjgwIiBkPSJNMCA1MTJWMGgxMTYuOHYzNi4xSDQzLjN2NDQxLjNoNzMuNlY1MTJIMFpNNTEyIDB2NTEySDM5NS4ydi0zNi4xaDczLjZWMzQuNmgtNzMuNlYwSDUxMloiLz48L3N2Zz4=
// @run-at         document-end
// @grant          GM_info
// @grant          GM_notification
// @grant          GM_openInTab
// @grant          GM_setValue
// @grant          GM_getValue
// @grant          GM_registerMenuCommand
// @grant          GM_unregisterMenuCommand
// ==/UserScript==

(async () => {
'use strict';

let settings = {
	previewCards: {
		value: await GM_getValue('previewCards', true),
		label: 'Show for preview cards in the main/directory page',
	},
	underPlayer: {
		value: await GM_getValue('underPlayer', true),
		label: 'Show under the player next to the viewer count',
	},
	theatreMode: {
		value: await GM_getValue('theatreMode', true),
		label: 'Show in the theatre mode when mousing over the player',
	},
	topChat: {
		value: await GM_getValue('topChat', false),
		label: 'Show at the top of the chat',
	},
	numberFormat: {
		value: await GM_getValue('numberFormat', true),
		label: 'Number format based on your language (en-US if disabled)',
	},
};
let menuCommands = {};
async function updateMenu() {
	Object.keys(menuCommands).forEach(key => GM_unregisterMenuCommand(menuCommands[key]));
	Object.entries(settings).forEach(([key, config]) => {
		menuCommands[key] = GM_registerMenuCommand(
			`${config.value ? '☑' : '☐'} ${config.label}`,
			async () => {
				settings[key].value = !settings[key].value;
				await GM_setValue(key, settings[key].value);
				GM_notification(`${config.label} is now ${config.value ? 'enabled' : 'disabled'}`, GM_info.script.name, GM_info.script.icon);
				updateMenu();
			}
		);
	});
}
updateMenu();

let updater = null;
let currentChannel = '';
const isMobile = window.location.host === 'm.twitch.tv' ? true : false;

setInterval(() => {
	const path = window.location.pathname;
	
	if (settings.previewCards.value && (path === '/' || path.startsWith('/directory'))) {
		checkForNewCards(path);
		return;
	}
	
	let channelName = path.split('/')[1];
	if (!channelName || ['videos', 'settings', 'subscriptions', 'inventory', 'wallet', 'privacy', 'turbo', 'downloads', 'p', 'annual-recap'].includes(channelName)) return;
	
	if (channelName === 'popout') {
		channelName = path.split('/')[2];
	}
	
	if (currentChannel !== channelName) {
		currentChannel = channelName;
		if (updater) {
			clearInterval(updater);
			updater = null;
		}
	}
	
	if (settings.underPlayer.value) {
		chattersCount();
		ffzChattersCount();
	} else if (ct) {
		ct.remove();
		ct = null;
		ffzCt.remove();
		ffzCt = null;
	}
	if (settings.theatreMode.value) {
		tmChattersCount();
	} else if (tmCt) {
		tmCt.remove();
		tmCt = null;
	}
	if (settings.topChat.value) {
		chatChattersCount();
	} else if (chatCt) {
		chatCt.remove();
		chatCt = null;
	}
	
	if (!updater) {
		updateCount(channelName);
		updater = setInterval(() => updateCount(channelName), 60000);
	}
}, 1234);

let ct = null;
let tmCt = null;
let chatCt = null;
let ffzCt = null;
let chatters = '⏳';

async function updateCount(channelName) {
	chatters = await getChatters(channelName);
	
	[ct, tmCt, chatCt, ffzCt].forEach(el => { 
		if (el) el.textContent = `[${chatters}]`;
	});
}

function createChattersCounter(id) {
	const counter = document.createElement('span');
	const lang = document.documentElement.getAttribute('lang') || 'en-US';
	
	counter.id = id;
	counter.title = lang === 'pl-PL' ? 'Ilość Czatowników' : 'Chatters Count';
	counter.textContent = `[${chatters}]`;
	counter.style.cssText = `
		color: var(--color-text-live, #ff8280);
		font-size: var(--font-size-base, 1.3rem);
		font-weight: var(--font-weight-semibold, 600);
		font-feature-settings: "tnum";
		line-height: var(--line-height-body, 1.5);
		margin-left: 0.5rem;
		align-content: center;
	`;
	return counter;
}

function chattersCount() {
	ct = document.getElementById('chatters-count');
	if (ct != null) return;
	const viewersCount = !isMobile
		? document.querySelector('main [data-a-target="animated-channel-viewers-count"]')?.parentElement
		: document.querySelector('#channel-player [data-a-target="tw-stat-value"]')?.parentElement;
	if (!viewersCount) return;
	
	ct = createChattersCounter('chatters-count');
	viewersCount.appendChild(ct);
}

function tmChattersCount() {
	tmCt = document.getElementById('tm-chatters-count');
	if (tmCt != null) return;
	const tmInfoCard = document.querySelector('p[data-test-selector="stream-info-card-component__description"]');
	if (!tmInfoCard) return;
	
	tmCt = createChattersCounter('tm-chatters-count');
	tmInfoCard.appendChild(tmCt);
}

function chatChattersCount() {
	chatCt = document.getElementById('chat-chatters-count');
	if (chatCt != null) return;
	const chatHeader = document.querySelector('button[data-test-selector="chat-viewer-list"]')?.parentElement;
	if (!chatHeader) return;
	
	chatCt = createChattersCounter('chat-chatters-count');
	chatHeader.prepend(chatCt);
}

function ffzChattersCount() {
	ffzCt = document.getElementById('ffz-chatters-count');
	if (ffzCt != null) return;
	
	setTimeout(() => {
		const ffzAlternativeViewerCount = document.querySelector('main .ffz--meta-tray [data-key="viewers"]')
		if (!ffzAlternativeViewerCount) return;

		ffzCt = createChattersCounter('ffz-chatters-count');
		ffzCt.style.order = '1';
		ffzAlternativeViewerCount.appendChild(ffzCt);
	}, 500);
}

function checkForNewCards(path) {
	let previewCards = null;
	
	if (!isMobile) {
		previewCards = document.querySelectorAll('a[data-a-target="preview-card-image-link"]');
	} else {
		if (path.startsWith('/directory/following')) {
			previewCards = document.querySelectorAll('main > div > div > h2 + div:first-of-type > div');
		} else {
			previewCards = document.querySelectorAll('main article');
		}
	}
	
	previewCards.forEach(addChattersToCard);
}

async function addChattersToCard(card) {
	const cardStat = card.querySelector('div.tw-media-card-stat');
	if (!cardStat || card.dataset.chattersCount === 'true' || card.dataset.chattersLoading === 'true') return;
	
	card.dataset.chattersCount = 'true';
	
	const channelName = card.getAttribute('href')?.slice(1) || card.querySelector('a.tw-link')?.getAttribute('href')?.slice(1);
	if (!channelName || channelName.startsWith("videos/")) return;
	
	const counter = document.createElement('span');
	counter.className = 'directory-chatters-count';
	counter.style.paddingLeft = '0.4rem';
	
	const count = await getChatters(channelName);
	counter.textContent = `[${count}]`;
	
	cardStat.appendChild(counter);
}

async function getChatters(channel) {
	const lang = settings.numberFormat.value ? document.documentElement.getAttribute('lang') : 'en-US';
	
	const data = await graphqlQuery(query, { name: channel });
	const count = data?.data?.channel?.chatters?.count;
	
	return count != null && !isNaN(count) ? new Intl.NumberFormat(lang || 'en-US').format(count) : 'N/A';
}

const query = {
	kind: 'Document',
	definitions: [
		{
			kind: 'OperationDefinition',
			operation: 'query',
			name: {
				kind: 'Name',
				value: 'GetChannelChattersCount',
			},
			variableDefinitions: [
				{
					kind: 'VariableDefinition',
					variable: {
						kind: 'Variable',
						name: {
							kind: 'Name',
							value: 'name',
						},
					},
					type: {
						kind: 'NonNullType',
						type: {
							kind: 'NamedType',
							name: {
								kind: 'Name',
								value: 'String',
							},
						},
					},
					directives: [],
				},
			],
			directives: [],
			selectionSet: {
				kind: 'SelectionSet',
				selections: [
					{
						kind: 'Field',
						name: {
							kind: 'Name',
							value: 'channel',
						},
						arguments: [
							{
								kind: 'Argument',
								name: {
									kind: 'Name',
									value: 'name',
								},
								value: {
									kind: 'Variable',
									name: {
										kind: 'Name',
										value: 'name',
									},
								},
							},
						],
						directives: [],
						selectionSet: {
							kind: 'SelectionSet',
							selections: [
								{
									kind: 'Field',
									name: {
										kind: 'Name',
										value: 'chatters',
									},
									arguments: [],
									directives: [],
									selectionSet: {
										kind: 'SelectionSet',
										selections: [
											{
												kind: 'Field',
												name: {
													kind: 'Name',
													value: 'count',
												},
												arguments: [],
												directives: [],
											},
										],
									},
								},
							],
						},
					},
				],
			},
		},
	],
	loc: {
		start: 0,
		end: 191,
	},
};

// https://github.com/night/betterttv/blob/master/src/utils/twitch.js
function searchReactChildren(node, predicate, maxDepth = 15, depth = 0) {
	try {
		if (predicate(node)) {
			return node;
		}
	} catch (_) {}
	
	if (!node || depth > maxDepth) {
		return null;
	}
	
	const {child, sibling} = node;
	if (child || sibling) {
		return (
			searchReactChildren(child, predicate, maxDepth, depth + 1) ||
			searchReactChildren(sibling, predicate, maxDepth, depth + 1)
		);
	}
	
	return null;
}

function getReactRoot(element) {
	for (const key in element) {
		if (key.startsWith('_reactRootContainer') || key.startsWith('__reactContainer$')) {
			return element[key];
		}
	}
	
	return null;
}

function getApolloClient() {
	let client;
	try {
		const reactRoot = getReactRoot(document.getElementById('root'));
		const node = searchReactChildren(
			reactRoot?._internalRoot?.current ?? reactRoot,
			(n) => n.pendingProps?.value?.client
		);
		client = node.pendingProps.value.client;
	} catch (_) {}
	
	return client;
}

async function graphqlQuery(query, variables, options = {}) {
	const client = getApolloClient();
	if (!client) return;
	
	return client.query({ query, variables, ...options });
}

})();