Подсветка количества просмотров на Ютубе

youtube-views-highlight.js

/**
 * Подсветка количества просмотров на Ютубе.
 *
 * В скрипте настраиваются пороги и цвета для двух уровней подсветки.
 * По умолчанию цвета красный и оранжевый.
 *
 * Программа следит за подгрузкой новых видео на странице и подсвечивает просмотры в них.
 *
 * Пользовательский браузерный скрипт для Дмитрия Лимонова.
 *
 * @date 2023-09-04
 * @time 18:30
 * @since 2023-09-04 Первая версия.
 * @copyright © MaximAL 2023
 * @link https://maximals.ru/
 * @link https://sijeko.ru/
 */
(function (document) {
	// Настройки

	/** Порог максимального уровня подсветки */
	const MAX_COLOR_THRESHOLD = 50 * 1000;
	/** Порог среднего уровня подсветки (должен быть меньше `MAX_COLOR_THRESHOLD`) */
	const MIDDLE_COLOR_THRESHOLD = 15 * 1000;

	/** Цвет максимального уровня подсветки */
	const MAX_COLOR = 'red';
	/** Цвет среднего уровня подсветки */
	const MIDDLE_COLOR = 'orange';

	/** Селектор для элементов с количеством просмотров */
	const VIEWS_SELECTOR =
		'#metadata-line .ytd-grid-video-renderer:nth-child(1),' +
		'#metadata-line .ytd-video-meta-block:nth-child(3)';
	// Вёрстка на Ютубе периодически меняется, нам останется только подобрать и поменять селекторы

	// Селекторы элементов, за изменениями которых нужно следить:
	/** Селектор основного списка видео */
	const OBSERVE_SELECTOR_1 = 'ytd-two-column-browse-results-renderer';
	/** Селектор предлагаемых видео (сбоку) */
	const OBSERVE_SELECTOR_2 = 'ytd-watch-next-secondary-results-renderer';


	// Поехали!


	// Подстветили
	highlightAll();

	// Следим за изменениями страницы и подсвечиваем
	const config = { childList: true, subtree: true };
	const callback = (mutationList, observer) => highlightAll();

	const observer1 = new MutationObserver(callback);
	observer1.observe(document.querySelector(OBSERVE_SELECTOR_1), config);

	const observer2 = new MutationObserver(callback);
	observer2.observe(document.querySelector(OBSERVE_SELECTOR_2), config);

	//observer1.disconnect();
	//observer2.disconnect();

	function highlightAll() {
		console.log('Запускаем подсветку...');
		document.querySelectorAll(VIEWS_SELECTOR).forEach(function (element) {
			const text = element.textContent.replace(',', '.');
			let views = parseFloat(text);
			if (text.match(/тыс/i)) {
				views *= 1000;
			} else if (text.match(/млн/i)) {
				views *= 1000 * 1000;
			} else if (text.match(/млрд/i)) {
				views *= 1000 * 1000 * 1000;
			} else if (text.match(/трлн/i)) {
				views *= 1000 * 1000 * 1000 * 1000;
			}
			if (views > MAX_COLOR_THRESHOLD) {
				element.style.color = MAX_COLOR;
				console.log('Подсвечено максимально:  ' + views);
			} else if (views > MIDDLE_COLOR_THRESHOLD) {
				element.style.color = MIDDLE_COLOR;
				console.log('Подсвечено средне:       ' + views);
			} else {
				console.log('Не подсвечено:           ' + views);
				element.style.color = 'unset';
			}
		});
	}
})(document);