☰

YouTube Smaller Thumbnails

Adds 3 additional thumbnails per row

// ==UserScript==
// @name         YouTube Smaller Thumbnails
// @namespace    http://greatest.deepsurf.us
// @version      0.0.4
// @description  Adds 3 additional thumbnails per row
// @author       you
// @license      MIT
// @match        *://www.youtube.com/*
// @match        *://youtube.com/*
// @run-at       document-start
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    const DELTA = 3; // Amount of columns to add.
    const MAX_COLUMNS = 6; // Maximum amount of columns.

    const DELTA_SHORTS = 9; // Amount of columns to add.
    const MAX_SHORTS_COLUMNS = 12; // Maximum amount of columns for shorts.

    function makeShortsSmaller() {
        var style = document.createElement('style');
        style.innerText = `
ytd-rich-item-renderer[is-slim-media] {
  width: 10% !important;
}
    	`;
        document.body.appendChild(style);
        console.log('[YouTube Smaller Thumbnails] Reduced shorts size')
    }

    document.addEventListener("DOMContentLoaded", makeShortsSmaller);
    document.addEventListener("load", makeShortsSmaller);


    function installStyle(contents) {
        var style = document.createElement('style');
        style.innerHTML = contents;
        document.body.appendChild(style);
    }

    function getTargetValue(currentValue) {
        let newValue = currentValue + DELTA;

        if (newValue > MAX_COLUMNS) {
            newValue = MAX_COLUMNS;
        }

        return newValue;
    }

    function getShortsTargetValue(currentValue) {
        let newValue = currentValue + DELTA_SHORTS;

        if (newValue > MAX_SHORTS_COLUMNS) {
            newValue = MAX_SHORTS_COLUMNS;
        }

        return newValue;
    }

    function isShorts(itemElement) {
        return null !== itemElement.getAttribute('is-slim-media')
    }

    function modifyGridStyle(gridElement) {
        const currentStyle = gridElement.getAttribute('style');
        if (!currentStyle) {
            return;
        }

        const itemsPerRowMatch = currentStyle.match(/--ytd-rich-grid-items-per-row:\s*(\d+)/);
        if (!itemsPerRowMatch) {
            return;
        }

        const currentValue = parseInt(itemsPerRowMatch[1], 10);

        if (isNaN(currentValue)) {
            return;
        }

        const newValue = getTargetValue(currentValue);

        if (currentValue === newValue) {
            return;
        }

        const newStyle = currentStyle.replace(
            /--ytd-rich-grid-items-per-row:\s*\d+/,
            `--ytd-rich-grid-items-per-row: ${newValue}`
        );

        gridElement.setAttribute('style', newStyle);
        console.log(`[YouTube Smaller Thumbnails] Modified items per row: ${currentValue} -> ${newValue}`);
    }

    function modifyItemsPerRow(itemElement) {
        const currentValue = parseInt(itemElement.getAttribute('items-per-row'), 10);

        if (isNaN(currentValue)) {
            return;
        }

        const newValue = isShorts(itemElement) ?
            getShortsTargetValue(currentValue) :
            getTargetValue(currentValue);

        if (currentValue === newValue) {
            return;
        }

        itemElement.setAttribute('items-per-row', newValue);
        console.log(`[YouTube Smaller Thumbnails] Modified items per row: ${currentValue} -> ${newValue}`);
    }

    function modifyShortHidden(itemElement) {
        if (!isShorts(itemElement)) {
            return;
        }

        if (null === itemElement.getAttribute('hidden')) {
            return
        }

        itemElement.removeAttribute('hidden');
        console.log(`[YouTube Smaller Thumbnails] Modified hidden`);
    }

    function modifyShelfRenderer(itemElement) {
        const currentStyle = itemElement.getAttribute('style');
        if (!currentStyle) {
            return;
        }

        const itemsCountMatch = currentStyle.match(/--ytd-rich-shelf-items-count:\s*(\d+)/);
        if (!itemsCountMatch) {
            return;
        }

        const currentValue = parseInt(itemElement.getAttribute('elements-per-row'), 10);
        if (isNaN(currentValue)) {
            return;
        }

        const newValue = getShortsTargetValue(currentValue)
        if (currentValue === newValue) {
            return;
        }

        const newStyle = currentStyle.replace(
            /--ytd-rich-shelf-items-count:\s*\d+/,
            `--ytd-rich-shelf-items-count: ${newValue}`
        );

        itemElement.setAttribute('style', newStyle);
        itemElement.setAttribute('elements-per-row', newValue);
        console.log(`[YouTube Smaller Thumbnails] Modified elements per row: ${currentValue} -> ${newValue}`);
    }

    function processExistingElements() {
        document.querySelectorAll('ytd-rich-grid-renderer').forEach(gridElement => {
            modifyGridStyle(gridElement);
        });

        document.querySelectorAll('ytd-rich-item-renderer').forEach(itemElement => {
            modifyItemsPerRow(itemElement);
            modifyShortHidden(itemElement);
        });
    }

    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes && mutation.addedNodes.length > 0) {
                mutation.addedNodes.forEach((node) => {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        if (node.tagName === 'YTD-RICH-GRID-RENDERER') {
                            modifyGridStyle(node);
                        }
                        if (node.tagName === 'YTD-RICH-ITEM-RENDERER') {
                            modifyItemsPerRow(node);
                        }
                        if (node.tagName === 'YTD-RICH-SHELF-RENDERER') {
                            modifyShelfRenderer(node);
                        }

                        node.querySelectorAll('ytd-rich-grid-renderer').forEach(gridElement => {
                            modifyGridStyle(gridElement);
                        });
                        node.querySelectorAll('ytd-rich-item-renderer').forEach(itemElement => {
                            modifyItemsPerRow(itemElement);
                            modifyShortHidden(itemElement);
                        });
                        node.querySelectorAll('ytd-rich-shelf-renderer').forEach(itemElement => {
                            modifyShelfRenderer(itemElement);
                        });
                    }
                });
            }

            if (mutation.type === 'attributes') {
                const target = mutation.target;

                if (target.tagName === 'YTD-RICH-GRID-RENDERER' && mutation.attributeName === 'style') {
                    modifyGridStyle(target);
                }
                if (target.tagName === 'YTD-RICH-ITEM-RENDERER' && mutation.attributeName === 'items-per-row') {
                    if (mutation.attributeName === 'items-per-row') {
                        modifyItemsPerRow(target);
                    }

                    if (mutation.attributeName === 'hidden') {
                        modifyShortHidden(target);
                    }

                }
                if (target.tagName === 'YTD-RICH-SHELF-RENDERER' && mutation.attributeName === 'elements-per-row') {
                    modifyShelfRenderer(target);
                }
            }
        });
    });

    function startObserver() {
        processExistingElements();
        observer.observe(document.documentElement, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['style', 'hidden', 'items-per-row', 'elements-per-row']
        });

        console.log('[YouTube Smaller Thumbnails] Observer started');
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', startObserver);
    } else {
        startObserver();
    }

    setInterval(processExistingElements, 3000);
})();