Fix YouTube

Fix YouTube feed bug and the hitboxes of the buttons

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 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
    });

})();