☰

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.

  1. // ==UserScript==
  2. // @name         YouTube Grid Row Controller
  3. // @namespace    https://github.com/HageFX-78
  4. // @version      0.5
  5. // @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.
  6. // @author       HageFX78
  7. // @license      MIT
  8. // @match        *://www.youtube.com/*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  10. // @grant        GM_setValue
  11. // @grant        GM_getValue
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.     'use strict';
  16.  
  17.     // Configurable options
  18.     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
  19.     const hideControls = false; // set true to hide UI controls, it will use the default values instead
  20.  
  21.     const transparentButtons = false; // set true to make the buttons transparent and less intrusive, only applies if hideControls is false
  22.  
  23.     const defaultSettingValue = {
  24.         // Default values mainly used when if you want to hide the buttons, change the values to your liking
  25.         content: 4,
  26.         news: 5,
  27.         shorts: 6,
  28.     };
  29.  
  30.     let currentSettingValues = {
  31.         content: GM_getValue('itemPerRow', defaultSettingValue.content),
  32.         news: GM_getValue('newsPerRow', defaultSettingValue.news),
  33.         shorts: GM_getValue('shortsPerRow', defaultSettingValue.shorts),
  34.     };
  35.  
  36.     // Styles
  37.     const style = (css) => {
  38.         const el = document.createElement('style');
  39.         el.textContent = css;
  40.         document.head.appendChild(el);
  41.         return el;
  42.     };
  43.  
  44.     style(`
  45. 		${
  46.             hideControls
  47.                 ? ''
  48.                 : '#right-arrow {right: 10% !important;} #chips-wrapper {justify-content: left !important;}#chips-content{width: 90% !important;}'
  49.         }
  50.  
  51. 		.justify-left-custom {
  52. 			justify-content: left !important;
  53. 		}
  54.  
  55.         ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
  56.             margin-left: calc(var(--ytd-rich-grid-item-margin) / 2) !important;
  57.         }
  58. 		
  59. 		ytd-rich-item-renderer[hidden][is-responsive-grid], [is-slim-media]{
  60. 			display: block !important;
  61. 		}
  62.  
  63. 		ytd-rich-item-renderer{
  64. 			margin-bottom: var(--ytd-rich-grid-row-margin) !important;
  65. 		}
  66.  
  67. 		.button-container.ytd-rich-shelf-renderer {
  68. 			display: none !important;
  69. 		}
  70. 		
  71. 		#dismissible.ytd-rich-shelf-renderer {
  72. 			padding-bottom: 0 !important;
  73. 			border-bottom: none !important;
  74. 		}
  75. 		.itemPerRowControl {
  76.             display: flex;
  77.             justify-content: right;
  78.             align-items: center;
  79.  
  80.             flex: 1;         
  81.             gap: 10px;
  82.             box-sizing: border-box;
  83.             user-select: none;
  84. 			${embedInChips ? '' : 'width: 100%;'};
  85.         }
  86.  
  87.         .itemPerRowControl button {
  88.  
  89.             border: none;
  90.             color: var(--yt-spec-text-primary);
  91.             background-color:${transparentButtons ? 'transparent' : 'var(--yt-spec-badge-chip-background)'};
  92.             font-size: 24px;
  93.             
  94.             text-align: center;
  95.             display: inline-block;
  96.  
  97.  
  98.             height: 30px;
  99.             aspect-ratio: 1/1;
  100.             border-radius: 50%;
  101.         }
  102.  
  103.         .itemPerRowControl button:hover {
  104.             background-color: var(--yt-spec-button-chip-background-hover);
  105.             cursor: pointer;
  106.         }
  107. 	`);
  108.  
  109.     const dynamicStyle = style('');
  110.  
  111.     function updatePageLayout() {
  112.         dynamicStyle.textContent = `
  113. 			ytd-rich-grid-renderer {
  114. 				--ytd-rich-grid-items-per-row: ${hideControls ? defaultSettingValue.content : currentSettingValues.content} !important;
  115. 			}
  116. 			ytd-rich-shelf-renderer:not([is-shorts]) {
  117. 				--ytd-rich-grid-items-per-row: ${hideControls ? defaultSettingValue.news : currentSettingValues.news} !important;
  118. 			}
  119. 			ytd-rich-shelf-renderer[is-shorts] {
  120. 				--ytd-rich-grid-slim-items-per-row: ${hideControls ? defaultSettingValue.shorts : currentSettingValues.shorts} !important;
  121.                 --ytd-rich-grid-items-per-row: ${hideControls ? defaultSettingValue.shorts : currentSettingValues.shorts} !important;
  122. 			}
  123. 		`;
  124.     }
  125.  
  126.     function saveValues() {
  127.         GM_setValue('itemPerRow', currentSettingValues.content);
  128.         GM_setValue('newsPerRow', currentSettingValues.news);
  129.         GM_setValue('shortsPerRow', currentSettingValues.shorts);
  130.     }
  131.  
  132.     function updateAndSave() {
  133.         updatePageLayout();
  134.         saveValues();
  135.     }
  136.  
  137.     function waitForElement(baseQuery, selector) {
  138.         return new Promise((resolve) => {
  139.             const observer = new MutationObserver(() => {
  140.                 const el = baseQuery.querySelector(selector);
  141.                 if (el) {
  142.                     observer.disconnect();
  143.                     resolve(el);
  144.                 }
  145.             });
  146.  
  147.             observer.observe(baseQuery, { childList: true, subtree: true });
  148.         });
  149.     }
  150.  
  151.     function watchMainContent(container) {
  152.         const observer = new MutationObserver((mutations) => {
  153.             mutations.forEach(({ addedNodes }) => {
  154.                 for (let node of addedNodes) {
  155.                     if (node.nodeType === 1 && node.matches('ytd-rich-section-renderer')) {
  156.                         const ref = node.querySelector('#menu-container');
  157.                         const hasControlDiv = node.querySelector('.itemPerRowControl') !== null;
  158.                         const isShorts = node.querySelector('[is-shorts]') !== null;
  159.  
  160.                         if (hasControlDiv) continue; // Skip if already exists
  161.  
  162.                         createControlDiv(ref, isShorts ? 'shorts' : 'news', true);
  163.                     }
  164.                 }
  165.             });
  166.         });
  167.  
  168.         observer.observe(container, { childList: true, subtree: true });
  169.     }
  170.  
  171.     function createControlDiv(target, type, insertBefore = false) {
  172.         const controlDiv = document.createElement('div');
  173.         controlDiv.classList.add('style-scope', 'ytd-rich-grid-renderer', 'itemPerRowControl');
  174.  
  175.         ['-', '+'].forEach((symbol) => {
  176.             const btn = document.createElement('button');
  177.             btn.innerText = symbol;
  178.             btn.addEventListener('click', () => {
  179.                 if (symbol === '+') {
  180.                     currentSettingValues[type]++;
  181.                     console.log(currentSettingValues[type]);
  182.                 } else if (currentSettingValues[type] > 1) {
  183.                     currentSettingValues[type]--;
  184.                 }
  185.                 updateAndSave();
  186.             });
  187.             controlDiv.appendChild(btn);
  188.         });
  189.  
  190.         if (insertBefore) target.parentNode.insertBefore(controlDiv, target);
  191.         else target.appendChild(controlDiv);
  192.         if (!insertBefore) controlDiv.classList.add('justify-left-custom');
  193.     }
  194.  
  195.     function init(queryStartLocation) {
  196.         updatePageLayout();
  197.  
  198.         if (hideControls) return;
  199.  
  200.         if (embedInChips) {
  201.             waitForElement(queryStartLocation, '#chips-wrapper').then((el) => createControlDiv(el, 'content'));
  202.         } else {
  203.             waitForElement(queryStartLocation, '#contents.ytd-rich-grid-renderer').then((el) => createControlDiv(el, 'content', true));
  204.         }
  205.  
  206.         // Start watching for newly loaded sections
  207.         waitForElement(queryStartLocation, '#contents.ytd-rich-grid-renderer').then(watchMainContent);
  208.  
  209.         // Cleanup after init
  210.         window.removeEventListener('yt-navigate-finish', handlePageContentChanged);
  211.     }
  212.  
  213.     // Workaround when reloaded on creator's home page and going back to main page will hide the buttons
  214.     let firstLoad = true;
  215.     function handlePageContentChanged() {
  216.         if (location.href.endsWith('youtube.com/')) {
  217.             let browseElements = document.querySelectorAll('ytd-browse');
  218.  
  219.             if (firstLoad || browseElements.length <= 1) {
  220.                 init(browseElements[0]);
  221.             } else {
  222.                 // If reloaded on creator's home page, second ytd-browse will be the main page
  223.                 init(browseElements[1]);
  224.             }
  225.         }
  226.         firstLoad = false;
  227.     }
  228.  
  229.     // ----------------------------------- Main Execution -----------------------------------
  230.  
  231.     window.addEventListener('yt-navigate-finish', handlePageContentChanged);
  232. })();