☰

讓 YouTube 的推薦影片變回4個一行

這個腳本會將YouTube的推薦影片從三個一排，變回四個一排

// ==UserScript==
// @name         讓 YouTube 的推薦影片變回4個一行
// @name:en      Change YouTube's recommended videos back to 4 rows
// @namespace    http://tampermonkey.net/
// @version      2025-05-11 1.10
// @description  這個腳本會將YouTube的推薦影片從三個一排，變回四個一排
// @description:en This script will change YouTube's recommended videos from three in a row to four in a row
// @author       bahamutID：ra45388791
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=wayne-blog.com
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    let IronIndex = 0
    let VideoCount = 0
    const rowBtnCount = 4
    let lastPath = ""
    // let settime

    new MutationObserver((e) => {

        if (location.pathname !== "/") {
            //切換頁面行為重置影片數量觸發機制
            if (document.VideoCount !== 0) {
                document.VideoCount = 0
            }
            return;
        }
        let cnt = document.querySelector("#contents");

        //狀態檢查
        //是否渲染過
        if (cnt.dataset.isActiveScript === "true") {
            //是否變更過推薦類別
            // if (IronIndex === activeIronIndex) {
            //     console.log("推薦中止")
            //     return;
            // }
            //影片數量是否不同
            if (cnt.children.length === document.VideoCount) {
                //第8位是否是非影片按鈕
                if (cnt.children[8].tagName === "YTD-RICH-SECTION-RENDERER") {
                    return;
                }
            }
        }
        //設定狀態
        cnt.dataset.isActiveScript = "true"
        // IronIndex = activeIronIndex
        cnt.style = `--ytd-rich-grid-items-per-row: ${rowBtnCount};`

        if (document.settime !== undefined) {
            clearInterval(document.settime)
        }
        //確保頁面渲染完成
        document.settime = setInterval(() => {
            // const lastVideoSrc = cnt.children[0].querySelector("#thumbnail yt-image img")
            // console.log("1:" + lastVideoSrc)
            // console.log("2:" + document.lastVideo)
            // if (document.lastVideo !== lastVideoSrc) {
            //     document.VideoCount = 0
            //     document.lastVideo = lastVideoSrc
            // }


            checkStructure(cnt)
            clearInterval(document.settime)
        }, 500);

    }).observe(document, {
        childList: true,
        // attributes: true,
        subtree: true
    });

})();


function checkStructure(cnt) {
    let cntBtns = cnt.children

    //第8位沒有 isSet 判斷結構改變
    if (cnt.children.length > 8 && cnt.children[8].dataset.isSet !== "true") {
        const tagCount = Array.from(cnt.children).filter(e => { return e.tagName === "YTD-RICH-SECTION-RENDERER" }).length
        if (tagCount !== 0) {
            document.VideoCount = 0
        }
    }
    //影片數量是否不同
    if (cnt.children.length === document.VideoCount) {
        return;
    }

    if (cntBtns.length > 4) {
        let count = cnt.children.length

        //影片數量變更時重新定位
        for (let btn of cntBtns) {
            if (btn.dataset.isSet === "true") {
                btn.dataset.isSet = ""
            }
        }
        document.VideoCount = count
        //移動節點
        moveElement()
    }
}



//取得目前推薦類別序號
function getIronIndex() {
    const irons = document.querySelectorAll("#chips > yt-chip-cloud-chip-renderer")

    for (let i = 0; i < irons.length; i++) {
        const haveClass = irons[i].classList.contains("iron-selected")
        if (haveClass) {
            return i + 1
        }
    }
    return 0
}

function moveElement() {
    let cnt = document.querySelector("#contents").children;
    let count = 0;   //待移動節點數量
    if (cnt.length < 9) { return }

    //把節點移到最後
    for (let i = 0; i < cnt.length; i++) {
        const e = cnt[i];
        if (e.tagName === "YTD-RICH-SECTION-RENDERER") {
            if (e.dataset.isSet !== "true") {       //已定位不允許再移動
                e.parentNode.insertBefore(e, cnt[cnt.length - 1])
                count++
            }
        }
    }

    //移動節點
    let setIndex = 0
    for (let i = 0; i < count; i++) {
        let index
        //紀錄需要移動的節點
        for (let j = setIndex; j < cnt.length; j++) {
            const e = cnt[j];
            if (e.tagName === "YTD-RICH-SECTION-RENDERER") {
                if (e.dataset.isSet !== "true") {   //已定位不允許再移動
                    index = j
                    break;
                }
            }
        }

        //以8個為一組
        setIndex += 8 + i

        const targetIndex = cnt[index]
        //將 targetIndex 移動到 setIndex 之前
        cnt[0].parentNode.insertBefore(targetIndex, cnt[setIndex])
        //該節點狀態設為已定位
        targetIndex.dataset.isSet = "true"
    }
}