YouTube - Force Compact Grid (increases max # videos per row)

youtube-force-compact-grid.user.js

// ==UserScript==
// @name         YouTube - Force Compact Grid (increases max # videos per row)
// @namespace    https://gist.github.com/lbmaian/8c6961584c0aebf41ee7496609f60bc3
// @downloadURL  https://gist.github.com/lbmaian/8c6961584c0aebf41ee7496609f60bc3/raw/youtube-force-compact-grid.user.js
// @updateURL    https://gist.github.com/lbmaian/8c6961584c0aebf41ee7496609f60bc3/raw/youtube-force-compact-grid.user.js
// @version      0.5
// @description  Force YouTube to show compact grid (max 6 videos per row) rather than "slim" grid (max 3 videos per row)
// @author       lbmaian
// @match        https://www.youtube.com/*
// @exclude      https://www.youtube.com/embed/*
// @icon         https://www.youtube.com/favicon.ico
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const DEBUG = false;

    const logContext = '[YouTube - Force Compact Grid]';

    var debug;
    if (DEBUG) {
        debug = function(...args) {
            console.debug(logContext, ...args);
        };
    } else {
        debug = function() {};
    }

    function log(...args) {
        console.log(logContext, ...args);
    }

    function info(...args) {
        console.info(logContext, ...args);
    }

    function warn(...args) {
        console.warn(logContext, ...args);
    }

    function error(...args) {
        console.error(logContext, ...args);
    }

    // Updates richGridRenderer data to coerce unknown/slim grid style to compact style.
    function updateResponseData(response, logContext) {
        const tabs = response?.contents?.twoColumnBrowseResultsRenderer?.tabs;
        if (DEBUG) {
            debug(logContext, 'contents.twoColumnBrowseResultsRenderer.tabs (snapshot)', window.structuredClone(tabs));
        }
        if (tabs) {
            for (let i = 0; i < tabs.length; i++) {
                const tab = tabs[i];
                const tabRenderer = tab.tabRenderer;
                if (tabRenderer) {
                    const richGridRenderer = tabRenderer.content?.richGridRenderer;
                    if (richGridRenderer && (!richGridRenderer.style || richGridRenderer.style == 'RICH_GRID_STYLE_SLIM')) {
                        const logTabContext = logContext + ' tab ' + (tabRenderer.title ?? tabRenderer.tabIdentifier ?? i);
                        // /feed/playlists page (and possibly other pages) have additional properties:
                        // layoutSizing: 'RICH_GRID_LAYOUT_SIZING_COMPACT'
                        // layoutType: 'RICH_GRID_LAYOUT_TYPE_COMPACT_LIST'
                        // These need to be deleted when setting style, or otherwise, the page can hang.
                        if (richGridRenderer.layoutSizing) {
                            log(logTabContext, 'tabRenderer.content.richGridRenderer.layoutSizing:', richGridRenderer.layoutSizing, '=> (none)');
                            delete richGridRenderer.layoutSizing;
                        }
                        if (richGridRenderer.layoutType) {
                            log(logTabContext, 'tabRenderer.content.richGridRenderer.layoutType:', richGridRenderer.layoutType, '=> (none)');
                            delete richGridRenderer.layoutType;
                        }
                        log(logTabContext, 'tabRenderer.content.richGridRenderer.style:', richGridRenderer.style, '=> RICH_GRID_STYLE_COMPACT');
                        richGridRenderer.style = 'RICH_GRID_STYLE_COMPACT';
                    }
                }
            }
        }
    }

    // Note: Both of the following commented-out event listeners are too late:
    // ytd-app's own yt-page-data-fetched event listener (onYtPageDataFetched) already fires
    // by the time our own yt-page-data-fetched event listener fires,
    // and yt-navigate-finish fires after yt-page-data-fetched fires.

    // document.addEventListener('yt-page-data-fetched', evt => {
    //     debug('Navigated to', evt.detail.pageData.url);
    //     debug(evt);
    //     updateResponseData(evt.detail.pageData.response, 'yt-page-data-fetched pageData.response');
    // });

    // document.addEventListener('yt-navigate-finish', evt => {
    //     debug('Navigated to', evt.detail.response.url);
    //     debug(evt);
    //     updateResponseData(evt.detail.response.response, 'yt-navigate-finish response.response');
    // });

    const symSetup = Symbol(logContext + ' setup');

    // yt-page-data-fetched event fires on both new page load and channel tab change.
    // Need to hook into ytd-app's ytd-app's own yt-page-data-fetched event listener (onYtPageDataFetched),
    // so that we can modify the data before that event listener fires.
    function setupYtdApp(ytdApp, logContext, errorFunc=error) {
        // ytd-app's prototype is initialized after the element is created,
        // so need to check that the onYtPageDataFetched method exists.
        if (!ytdApp || !ytdApp.onYtPageDataFetched) {
            return errorFunc('unexpectedly could not find ytd-app.onYtPageDataFetched');
        }
        if (ytdApp[symSetup]) {
            return;
        }
        debug('found yt-App', ytdApp, logContext);
        const origOnYtPageDataFetched = ytdApp.onYtPageDataFetched;
        ytdApp.onYtPageDataFetched = function(evt, detail) {
            debug(evt);
            updateResponseData(evt.detail.pageData.response, 'at yt-page-data-fetched pageData.response');
            return origOnYtPageDataFetched.call(this, evt, detail);
        };
        debug('ytd-app onYtPageDataFetched hook set up');
        ytdApp[symSetup] = true;
    }

    // Need to hook into ytd-page-manager's attachPage to hook into ytd-browse.
    function setupYtdPageManager(ytdPageManager, logContext, errorFunc=error) {
        if (!ytdPageManager || !ytdPageManager.attachPage) {
            return errorFunc('unexpectedly could not find ytd-page-manager.attachPage');
        }
        if (ytdPageManager[symSetup]) {
            return;
        }
        debug('found ytd-page-manager', ytdPageManager, logContext);
        const origAttachPage = ytdPageManager.attachPage;
        ytdPageManager.attachPage = function(page) {
            debug('attachPage', page);
            if (page.is === 'ytd-browse') {
                setupYtdBrowse(page, 'at ytd-page-manager.attachPage');
            }
            return origAttachPage.call(this, page);
        };
        debug('ytd-page-manager attachPage hook set up');
        ytdPageManager[symSetup] = true;
    }

    // Need to hook into ytd-browse's computeFluidWidth(data, selectedTab, pageSubtype)
    // (formerly computeRichGridValue(pageSubtype)) to ensure returns false for home page
    // to match that of the subscription/channel pages.
    function setupYtdBrowse(ytdBrowse, logContext, errorFunc=error) {
        if (!ytdBrowse || !ytdBrowse.computeFluidWidth) {
            return errorFunc('unexpectedly could not find ytd-browse.computeFluidWidth');
        }
        if (!ytdBrowse) {
            return errorFunc('unexpectedly could not find ytd-browse');
        }
        if (ytdBrowse[symSetup]) {
            return;
        }
        debug('found ytd-browse', ytdBrowse, logContext);
        const origComputeFluidWidth = ytdBrowse.computeFluidWidth;
        ytdBrowse.computeFluidWidth = function(data, selectedTab, pageSubtype) {
            debug('computeFluidWidth', pageSubtype);
            if (pageSubtype === 'home') {
                return false;
            }
            return origComputeFluidWidth.call(this, pageSubtype);
        };
        debug('ytd-app computeFluidWidth hook set up');
        ytdBrowse[symSetup] = true;
    }

    // Note: Following didn't work to force ytd-browse's computeFluidWidth to return false for home page,
    // since in the EXPERIMENT_FLAGS.rich_grid_browse_compute_kill_switch=false case,
    // that function still ends up returning true for non-channel pages.
    // function setupExperimentFlags(logContext) {
    //     const ytcfg = window.ytcfg;
    //     if (ytcfg) {
    //         const expFlags = ytcfg.get('EXPERIMENT_FLAGS');
    //         if (expFlags && expFlags.rich_grid_browse_compute_kill_switch !== false) {
    //             log(logContext, 'ytcfg.EXPERIMENT_FLAGS.rich_grid_browse_compute_kill_switch:',
    //                 expFlags.rich_grid_browse_compute_kill_switch, '=>', false);
    //             expFlags.rich_grid_browse_compute_kill_switch = false;
    //         }
    //     }
    // }

    // By the time ytd-page-manager's attached event fires, ytd-app both exists
    // and has its prototype initialized as needed in the above setup functions.
    // (This also fires sooner than a MutationObserver would find such a ytd-app.)
    // This is also the perfect hook for hooking into ytd-page-manager,
    // which in turn allows hooking into ytd-browse's computeFluidWidth.
    document.addEventListener('attached', evt => {
        const ytdApp = document.getElementsByTagName('ytd-app')[0];
        debug(evt);
        setupYtdApp(ytdApp, 'at ytd-page-manager.attached');
        const ytdPageManager = evt.srcElement;
        setupYtdPageManager(ytdPageManager, 'at ytd-page-manager.attached');
    });
    // In case, ytd-app somehow already exists at this point.
    const ytdApp = document.getElementsByTagName('ytd-app')[0];
    setupYtdApp(ytdApp, 'at document-start', () => {});
    //setupExperimentFlags('at document-start');

    // Note: updating ytInitialData may not be necessary, since yt-page-data-fetched also fires for new page load,
    // and in that case, the event's detail.pageData.response is the same object as ytInitialData,
    // but DOMContentLoaded sometimes fires before ytd-app's onYtPageDataFetched fires (or rather, before we can hook into it),
    // so this is done just in case.
    document.addEventListener('DOMContentLoaded', evt => {
        debug('ytInitialData', window.ytInitialData);
        updateResponseData(window.ytInitialData, 'at DOMContentLoaded ytInitialData');
        //setupExperimentFlags('at DOMContentLoaded');
    });
})();

An addon to make youtube look like the older UI, https://addons.mozilla.org/en-US/firefox/addon/youtube-redux/
It's far more heavy than this little script though.

Yeah, I only really want the thumbnail fixes, Redux is more than I'd like to have changed.

Sadly, the script definitely is conflicting with uBo, as there are zero ads coming through when this is disabled, regardless of account used.

This in Stylus seems to remove the sponsored ads:

/*=> removes sponsored ads on main feed */
ytd-ad-slot-renderer,
ytd-rich-item-renderer:has(

#content
> ytd-ad-slot-renderer
){
display: none;
}

Has there been another youtube change recently? Need to refresh a couple of times for it to work as of yesterday, had no luck investigating why this is happening.

As AliceMousie pointed out, I've also noticed an issue over the last couple of days.

It seems to work fine if you refresh or open in a new tab, and it applies the compact grid properly, but if you click through on the same page, even one with proper compact grid applied, it does not render compact grid on page changes...at least, that's what it seems to be on my end...

Do you have an example screenshot and URL? This might be due to a new YouTube layout, which I haven't seen yet.

It seems to have reverted temporarily, but the next time it happens, I will screenshot!

0.5: Fix /feed/playlists page hanging