YouTube Simpler Homepage

Set YouTube homepage recommendations to display in a single column and hide already hidden videos.
目前为 2024-11-03 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         YouTube Simpler Homepage
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Set YouTube homepage recommendations to display in a single column and hide already hidden videos.
// @author       Maksi
// @match        https://www.youtube.com/*
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Add custom CSS to adjust grid items per row
    GM_addStyle(`
        ytd-rich-grid-renderer {
            --ytd-rich-grid-items-per-row: 1 !important;
        }
        ytd-feed-filter-chip-bar-renderer[fluid-width] #chips-content.ytd-feed-filter-chip-bar-renderer {
            max-width: fit-content !important;
        }
        .hide-video-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background-color: #333; /* Dark gray background */
            color: #fff; /* White text */
            font-size: 16px; /* Larger font size */
            font-weight: 500;
            border: 1px solid #d3d3d3; /* Border to match filter buttons */
            border-radius: 20px; /* Rounded corners */
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
            margin-top: 10px;
            width: calc(100% - 20px); /* Full width minus padding */
            box-shadow: none; /* No shadow for a flatter look */
        }
        .hide-video-button:hover {
            background-color: #555; /* Slightly brighter dark gray on hover */
            border-color: #a3a3a3; /* Darker border on hover */
        }
    `);

     // Function to hide the current video and show the next one
    function hideVideo(currentVideo) {
        const videos = Array.from(document.querySelectorAll("ytd-rich-item-renderer"));
        const currentIndex = videos.indexOf(currentVideo);

        if (currentIndex !== -1) {
            currentVideo.style.display = "none"; // Hide current video
            if (currentIndex + 1 == videos.length) {
                const continuationItem = document.querySelector("ytd-continuation-item-renderer");
                if (continuationItem) {
                    continuationItem.style.display = ""; // Hide the continuation item
                    return;
                }
            }
            // Show the next visible video
            for (let i = currentIndex + 1; i < videos.length; i++) {
                videos[i].style.display = ""; // Show next video
                const style = window.getComputedStyle(videos[i]);
                if (!style.display.includes("none")) {
                    break; // Exit the loop after showing the next video
                }
            }
        }
    }


    // Wait until the page is fully loaded
    window.addEventListener("load", function() {
        // Create an observer to monitor changes in the body
        const observer = new MutationObserver(() => {
            const recommendedVideos = document.querySelectorAll("ytd-rich-item-renderer");
            const continuationItem = document.querySelector("ytd-continuation-item-renderer");

            if (recommendedVideos.length) {
                if (continuationItem) {
                    continuationItem.style.display = "none"; // Hide the continuation item
                }

                // Track if we found a visible video
                let firstVisibleVideoFound = false;

                recommendedVideos.forEach((video, index) => {
                    const style = window.getComputedStyle(video);
                    // Check if the video is already hidden
                    if (!style.display.includes("none")) {

                        // Hide all but the first visible video
                        if (firstVisibleVideoFound) {
                            video.style.display = "none"; // Hide all but the first visible video
                        }
                        else {
                            firstVisibleVideoFound = true;
                        }

                        // Create a button to hide this video and show the next one
                        if (!video.querySelector('.hide-video-button')) {
                            const button = document.createElement('button');
                            button.className = 'hide-video-button';
                            button.innerText = 'Next Video';
                            button.onclick = () => hideVideo(video);
                            video.appendChild(button);
                        }
                    }
                });

                // If the first video is hidden, reveal the next visible video
                if (!firstVisibleVideoFound && recommendedVideos[0]) {
                    recommendedVideos[0].style.display = ""; // Show the first video if no visible ones are found
                }
            }
        });

        // Start observing the body for changes
        observer.observe(document.body, { childList: true, subtree: true });
    });
})();
欢迎访问Greasy Fork镜像
