☰

YouTube Simpler Homepage

Only show one recommended video at a time with navigation buttons.

// ==UserScript==
// @name         YouTube Simpler Homepage
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Only show one recommended video at a time with navigation buttons.
// @author       Maksi
// @match        https://www.youtube.com/
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Add custom CSS for grid and buttons
    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;
        }

        .nav-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background-color: #333;
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            border: 1px solid #d3d3d3;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
            margin-top: 20px;
            margin-bottom: 20px;
            width: calc(100% - 20px);
            box-shadow: none;
        }
        .nav-button:hover {
            background-color: #555;
            border-color: #a3a3a3;
        }
        .nav-button.disabled {
            background-color: #666;
            color: #aaa;
            border-color: #666;
            cursor: not-allowed;
        }

        ytd-menu-renderer {
            display: none !important;
        }

        /* Expand container so buttons are visible */
        #content.style-scope.ytd-app {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Ensure full viewport height */
            padding-bottom: 20px; /* Add padding to ensure button visibility */
        }

        /* Fix stretching by overriding height */
        #content.style-scope.ytd-rich-item-renderer {
            height: auto !important; /* Only use as much height as needed */
        }
    `);

    let optionsButtonClicked = false;

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

        if (currentIndex > 0) {
            currentVideo.style.display = "none"; // Hide current video
            // Show the previous visible video
            for (let i = currentIndex - 1; i >= 0; i--) {
                videos[i].style.display = "";
                const style = window.getComputedStyle(videos[i]);
                if (!style.display.includes("none")) {
                    const popups = document.querySelector("ytd-popup-container");
                    const menu = currentVideo.querySelector("tp-yt-iron-dropdown");
                    if (popups && menu) {
                        popups.appendChild(menu);
                    }
                    optionsButtonClicked = false;
                    break;
                }
            }
        }
    }

    // Function to hide the current video and show the next one
    function showNextVideo(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 = ""; // Unhide 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")) {
                    const popups = document.querySelector("ytd-popup-container");
                    const menu = currentVideo.querySelector("tp-yt-iron-dropdown");
                    if (popups && menu) {
                        popups.appendChild(menu);
                    }
                    optionsButtonClicked = false;
                    break; // Exit the loop after showing the next video
                }
            }
        }
    }

    function addMenu(video) {
        const optionsButton = video.querySelector("ytd-rich-grid-media div#menu ytd-menu-renderer yt-icon-button#button.dropdown-trigger button#button.style-scope.yt-icon-button");

        if (optionsButton) {
            // Create a new mouse event
            optionsButton.click();
            optionsButtonClicked = true;

            const popupsObserver = new MutationObserver(() => {
                const menu = document.querySelector("tp-yt-iron-dropdown.ytd-popup-container");
                const contentWrapper = menu?.querySelector("#contentWrapper");

                if (menu && contentWrapper && contentWrapper.children.length > 0) {

                    // Append the cloned menu to the video container
                    video.appendChild(menu);

                    // Immediately set the CSS styles after appending
                    setTimeout(() => {
                        menu.style.position = "absolute"; // Make it position absolute
                        menu.style.top = "50%"; // Align it vertically to the middle
                        menu.style.left = "100%"; // Position it to the right of the video
                        menu.style.transform = "translateY(-50%)"; // Center it vertically
                        menu.style.zIndex = "1000"; // Bring it above other elements
                        menu.style.width = "auto"; // Set the width as needed
                        menu.style.padding = "10px"; // Add padding to the menu
                        menu.style.pointerEvents = "auto";
                        menu.style.setProperty("display", "inline", "important");
                    }, 0);

                    // Disconnect the observer once the menu is successfully moved
                    popupsObserver.disconnect();
                } else {
                    console.log("Menu or contentWrapper not found or empty. Waiting...");
                }
            });

            // Start observing the menu for changes
            const popups = document.querySelector("ytd-popup-container");
            if (popups) {
                popupsObserver.observe(popups, { attributes: true, childList: true, subtree: true });
            } else {
                console.log("Popup Container not found.");
            }
        }
    }

    // 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")) {

                        // Create a "Next Video" button if it doesn't exist
                        if (!video.querySelector('.next-button')) {
                            const nextButton = document.createElement('button');
                            nextButton.className = 'nav-button next-button';
                            nextButton.innerText = 'Next Video';
                            nextButton.onclick = () => showNextVideo(video);
                            video.appendChild(nextButton);
                        }

                        // Create a "Previous Video" button if it doesn't exist
                        if (!video.querySelector('.previous-button')) {
                            const prevButton = document.createElement('button');
                            prevButton.className = 'nav-button previous-button';
                            prevButton.innerText = 'Previous Video';
                            if (!firstVisibleVideoFound) {
                                prevButton.classList.add('disabled'); // Disable if it's the first video
                            } else {
                                prevButton.onclick = () => showPreviousVideo(video);
                            }
                            video.insertBefore(prevButton, video.firstChild);
                        }

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

                            if (optionsButtonClicked == false) {
                                addMenu(video);
                            }

                            const menu = video.querySelector("tp-yt-iron-dropdown");
                            if (menu) {
                                menu.style.position = "absolute"; // Make it position absolute
                                menu.style.top = "50%"; // Align it vertically to the middle
                                menu.style.left = "100%"; // Position it to the right of the video
                                menu.style.transform = "translateY(-50%)"; // Center it vertically
                                menu.style.zIndex = "1000"; // Bring it above other elements
                                menu.style.width = "auto"; // Set the width as needed
                                menu.style.padding = "10px"; // Add padding to the menu
                                menu.style.pointerEvents = "auto";
                                menu.style.setProperty("display", "inline", "important");
                            }
                        }
                    }
                });
            }
        });

        // Start observing the body for changes
        observer.observe(document.body, { attributes: true, childList: true, subtree: true });
    });
})();