YouTube Row Fix のソースコード

YouTube Row Fix

5 videos/row
右端で折り返す
// ==UserScript==
// @name         YouTube Row Fix
// @namespace    https://youtube.com/
// @version      1.4
// @description  5 videos/row
// @match        https://www.youtube.com/*
// @match        https://youtube.com/*
// @grant        none
// @run-at       document-start
// @license MIT
// ==/UserScript==

(() => {
    "use strict";

    const prfx = "row fix ignore";
    const VideoPerRow = 5;
    const ShortPerRow = 8;

    function addStyle() {
        const old = document.getElementById(prfx);

        if (old) {
            old.remove();
        }

        const style = document.createElement("style");
        style.id = prfx;
        style.textContent = `
            html,
            ytd-rich-grid-renderer {
                --ytd-rich-grid-items-per-row: ${VideoPerRow} !important;
                --ytd-rich-grid-posts-per-row: ${VideoPerRow} !important;
                --ytd-rich-grid-slim-items-per-row: ${VideoPerRow} !important;
            }

            ytd-rich-grid-renderer {
                margin-left: 8px !important;
                margin-right: 8px !important;
            }

            ytd-rich-grid-row,
            #contents.ytd-rich-grid-row,
            ytd-rich-grid-row > #contents {
                display: contents !important;
            }

            ytd-rich-item-renderer {
                max-width: none !important;
            }

            ytd-rich-shelf-renderer[is-shorts],
            ytd-rich-section-renderer {
                --ytd-rich-grid-items-per-row: ${ShortPerRow} !important;
                --ytd-rich-grid-posts-per-row: ${ShortPerRow} !important;
            }

            @media (max-width: 1200px) {
                html,
                ytd-rich-grid-renderer {
                    --ytd-rich-grid-items-per-row: 4 !important;
                    --ytd-rich-grid-posts-per-row: 4 !important;
                    --ytd-rich-grid-slim-items-per-row: 4 !important;
                }
            }

            @media (max-width: 900px) {
                html,
                ytd-rich-grid-renderer {
                    --ytd-rich-grid-items-per-row: 3 !important;
                    --ytd-rich-grid-posts-per-row: 3 !important;
                    --ytd-rich-grid-slim-items-per-row: 3 !important;
                }
            }
        `;

        document.documentElement.appendChild(style);
    }

    function patchGrid() {
        document.querySelectorAll("ytd-rich-grid-renderer").forEach((grid) => {
            grid.style.setProperty("--ytd-rich-grid-items-per-row", String(VideoPerRow), "important");
            grid.style.setProperty("--ytd-rich-grid-posts-per-row", String(VideoPerRow), "important");
            grid.style.setProperty("--ytd-rich-grid-slim-items-per-row", String(VideoPerRow), "important");
        });
    }

    function run() {
        addStyle();
        patchGrid();
    }

    run();

    window.addEventListener("yt-navigate-finish", run);
    window.addEventListener("resize", patchGrid);

    new MutationObserver(patchGrid).observe(document.documentElement, {
        childList: true,
        subtree: true
    });
})();