☰

YouTube Grid Row Controller

Adds simple buttons to control items per row on Youtube's home feed, works for shorts and news sections too. Buttons can be hidden if needed.

Stan na 02-05-2025. Zobacz najnowsza wersja.

// ==UserScript==
// @name         YouTube Grid Row Controller
// @namespace    https://github.com/HageFX-78
// @version      0.3
// @description  Adds simple buttons to control items per row on Youtube's home feed, works for shorts and news sections too. Buttons can be hidden if needed.
// @author       HageFX78
// @license      MIT
// @match        *://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function () {
	"use strict";

	// Configurable options
	const embedInChips = true; // Only applies to the one that is attached to the categories bar, set false if you have another script that removes the bar
	const hideControls = false; // set true to hide UI controls, it will use the default values instead

	const transparentButtons = false; // set true to make the buttons transparent and less intrusive, only applies if hideControls is false

	const defaultCounts = {
		// Default values mainly used when if you want to hide the buttons, change the values to your liking
		content: 4,
		news: 5,
		shorts: 6,
	};

	let currentCounts = {
		content: GM_getValue("itemPerRow", defaultCounts.content),
		news: GM_getValue("newsPerRow", defaultCounts.news),
		shorts: GM_getValue("shortsPerRow", defaultCounts.shorts),
	};

	// Styles
	const style = (css) => {
		const el = document.createElement("style");
		el.textContent = css;
		document.head.appendChild(el);
		return el;
	};

	style(`
		${
			hideControls
				? ""
				: "#right-arrow {right: 10% !important;} #chips-wrapper {justify-content: left !important;}#chips-content{width: 90% !important;}"
		}

		.justify-left-custom {
			justify-content: left !important;
		}

        ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
            margin-left: calc(var(--ytd-rich-grid-item-margin) / 2) !important;
        }
		
		ytd-rich-item-renderer[hidden][is-responsive-grid], [is-slim-media]{
			display: block !important;
		}

		ytd-rich-item-renderer{
			margin-bottom: var(--ytd-rich-grid-row-margin) !important;
		}

		.button-container.ytd-rich-shelf-renderer {
			display: none !important;
		}
		
		#dismissible.ytd-rich-shelf-renderer {
			padding-bottom: 0 !important;
			border-bottom: none !important;
		}
		.itemPerRowControl {
            display: flex;
            justify-content: right;
            align-items: center;

            flex: 1;         
            gap: 10px;
            box-sizing: border-box;
            user-select: none;
			${embedInChips ? "" : "width: 100%;"};
        }

        .itemPerRowControl button {

            border: none;
            color: white;
            background-color:${
				transparentButtons
					? "transparent"
					: "var(--yt-spec-badge-chip-background)"
			};
            font-size: 24px;
            
            text-align: center;
            display: inline-block;


            height: 30px;
            aspect-ratio: 1/1;
            border-radius: 50%;
        }

        .itemPerRowControl button:hover {
            background-color: var(--yt-spec-button-chip-background-hover);
            cursor: pointer;
        }
	`);

	const dynamicStyle = style("");

	function applyCounts() {
		dynamicStyle.textContent = `
			ytd-rich-grid-renderer {
				--ytd-rich-grid-items-per-row: ${
					hideControls ? defaultCounts.content : currentCounts.content
				} !important;
			}
			ytd-rich-shelf-renderer {
				--ytd-rich-grid-items-per-row: ${
					hideControls ? defaultCounts.news : currentCounts.news
				} !important;
			}
			ytd-rich-shelf-renderer[is-shorts] {
				--ytd-rich-grid-slim-items-per-row: ${
					hideControls ? defaultCounts.shorts : currentCounts.shorts
				} !important;
			}
		`;
	}

	function saveCounts() {
		GM_setValue("itemPerRow", currentCounts.content);
		GM_setValue("newsPerRow", currentCounts.news);
		GM_setValue("shortsPerRow", currentCounts.shorts);
	}

	function updateAndSave() {
		applyCounts();
		saveCounts();
	}

	function waitForElement(baseQuery, selector) {
		return new Promise((resolve) => {
			const observer = new MutationObserver(() => {
				const el = baseQuery.querySelector(selector);
				if (el) {
					observer.disconnect();
					resolve(el);
				}
			});
			observer.observe(baseQuery, {
				childList: true,
				subtree: true,
			});
		});
	}

	function watchMainContent(container) {
		const observer = new MutationObserver((mutations) => {
			mutations.forEach(({ addedNodes }) => {
				addedNodes.forEach((node) => {
					if (
						node.nodeType === 1 &&
						node.matches("ytd-rich-section-renderer")
					) {
						const ref = node.querySelector("#menu-container");
						const isShorts =
							node.querySelector("[is-shorts]") !== null;

						createControlDiv(
							ref,
							isShorts ? "shorts" : "news",
							true
						);
					}
				});
			});
		});
		observer.observe(container, { childList: true, subtree: true });
	}

	function createControlDiv(target, type, insertBefore = false) {
		const controlDiv = document.createElement("div");
		controlDiv.classList.add(
			"style-scope",
			"ytd-rich-grid-renderer",
			"itemPerRowControl"
		);

		["-", "+"].forEach((symbol) => {
			const btn = document.createElement("button");
			btn.innerText = symbol;
			btn.addEventListener("click", () => {
				if (symbol === "+") {
					currentCounts[type]++;
					console.log(currentCounts[type]);
				} else if (currentCounts[type] > 1) {
					currentCounts[type]--;
				}
				updateAndSave();
			});
			controlDiv.appendChild(btn);
		});

		if (insertBefore) target.parentNode.insertBefore(controlDiv, target);
		else target.appendChild(controlDiv);
		if (!insertBefore) controlDiv.classList.add("justify-left-custom");
	}

	function init(queryStartLocation) {
		applyCounts();

		if (hideControls) {
			return;
		}

		if (embedInChips) {
			waitForElement(queryStartLocation, "#chips-wrapper").then((el) =>
				createControlDiv(el, "content")
			);
		} else {
			waitForElement(
				queryStartLocation,
				"#contents.ytd-rich-grid-renderer"
			).then((el) => createControlDiv(el, "content", true));
		}

		// Start watching for newly loaded sections
		waitForElement(
			queryStartLocation,
			"#contents.ytd-rich-grid-renderer"
		).then(watchMainContent);

		// Cleanup after init
		window.removeEventListener(
			"yt-navigate-finish",
			handlePageContentChanged
		);
	}

	// Workaround when reloaded on creator's home page and going back to main page will hide the buttons
	let firstLoad = true;
	function handlePageContentChanged() {
		if (location.href.endsWith("youtube.com/")) {
			let browseElements = document.querySelectorAll("ytd-browse");

			if (firstLoad) {
				init(browseElements[0]);
			} else {
				// If reloaded on creator's home page, second ytd-browse will be the main page
				init(browseElements[1]);
			}
		}
		firstLoad = false;
	}

	// ----------------------------------- Main Execution -----------------------------------

	window.addEventListener("yt-navigate-finish", handlePageContentChanged);
})();