Fix YouTube

Fix YouTube feed bug and the hitboxes of the buttons

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Fix YouTube
// @namespace    http://tampermonkey.net/
// @version      2.5
// @description  Fix YouTube feed bug and the hitboxes of the buttons
// @author       Kalakaua
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Remove extra hitbox on fullscreen button
    const removeFullscreenHitbox = () => {
        const fullscreenStyle = '.ytp-fullscreen-button::after { content: none !important; }';
        const style = document.createElement('style');
        style.innerHTML = fullscreenStyle;
        document.head.appendChild(style);
    };

    // Remove extra hitbox on Play or Pause button
    const removePlayHitbox = () => {
        const playHitboxStyle = '#contentContainer::after, .ytp-play-button::before { content: none !important; }';
        const style = document.createElement('style');
        style.innerHTML = playHitboxStyle;
        document.head.appendChild(style);
    };

    // Find and delete rows with the blank space bug
    const deleteRowsWithBlankSpace = () => {
        const rows = document.querySelectorAll('ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer');
        rows.forEach(row => {
            const contents = row.querySelector('div#contents.style-scope.ytd-rich-grid-row');
            if (!contents) return;

            const itemRenderers = row.querySelectorAll('ytd-rich-item-renderer.style-scope.ytd-rich-grid-row');
            if (itemRenderers.length !== 6) return;

            const contentDivs = [...itemRenderers].map(itemRenderer => itemRenderer.querySelector('div#content.style-scope.ytd-rich-item-renderer'));
            if (!contentDivs.every(div => div)) return;

            const isValidRow = contentDivs.every(div => {
                const mediaElements = div.querySelectorAll('ytd-rich-grid-media.style-scope.ytd-rich-item-renderer');
                return mediaElements.length === 1;
            });

            if (!isValidRow) {
                row.remove();
            }
        });
    };

    // Function to delete rows containing `ytd-rich-section-renderer`
    const deleteRichSectionRows = () => {
        const sections = document.querySelectorAll('ytd-rich-section-renderer.style-scope.ytd-rich-grid-renderer');
        sections.forEach(section => {
            if (section) {
                section.remove(); // Remove the section itself
            }
        });
    };

    // Function to run all removals
    const runAllRemovals = () => {
        removeFullscreenHitbox();
        removePlayHitbox();
        deleteRowsWithBlankSpace();
        deleteRichSectionRows(); // Delete rows with ytd-rich-section-renderer
    };

    // Run the functions initially
    runAllRemovals();

    // Observe changes in the DOM to catch newly added elements
    const observer = new MutationObserver(() => {
        runAllRemovals();
    });

    // Observe the entire body for new nodes being added
    observer.observe(document.body, {
        childList: true,
        subtree: true // Watch deeply inside the DOM
    });

})();