hide-youtube-video.user.js

// ==UserScript==
// @name         YouTube Subscription Video Hider
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  Left-click: open video in background tab + hide. Right-click: hide only.
// @author       Thomas Feucht
// @match        https://www.youtube.com/feed/subscriptions*
// @grant        GM_openInTab
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // Extract video ID from URL
    function extractVideoId(element) {
        const link = element.querySelector('a#thumbnail') ||
                     element.querySelector('a[href*="/watch"]') ||
                     element.closest('a[href*="/watch"]');

        if (link && link.href) {
            const match = link.href.match(/[?&]v=([^&]+)/);
            if (match) return match[1];
        }
        return null;
    }

    // Find the video container element
    function findVideoContainer(element) {
        const selectors = [
            'ytd-rich-item-renderer',
            'ytd-grid-video-renderer',
            'ytd-video-renderer',
            'ytd-compact-video-renderer'
        ];

        for (const selector of selectors) {
            const container = element.closest(selector);
            if (container) return container;
        }
        return null;
    }

    // Find video container by video ID
    function findVideoContainerById(videoId) {
        if (!videoId) return null;

        const allVideos = document.querySelectorAll('ytd-rich-item-renderer, ytd-grid-video-renderer, ytd-video-renderer');

        for (const video of allVideos) {
            const id = extractVideoId(video);
            if (id === videoId) {
                return video;
            }
        }
        return null;
    }

    // Open link in a background tab (via Tampermonkey API)
    function openInBackgroundTab(url) {
        GM_openInTab(url, { active: false });
    }

    // Trigger YouTube's native "Hide" function
    async function triggerYouTubeHide(container, videoId) {
        if (!container) {
            console.log('[YT Hider] No container found');
            return false;
        }

        console.log(`[YT Hider] Trying to hide video: ${videoId}`);

        // Find the 3-dot menu button
        const menuButton = container.querySelector('button[aria-label="Mehr Aktionen"]') ||
                          container.querySelector('button[aria-label="More actions"]') ||
                          container.querySelector('ytd-menu-renderer button') ||
                          container.querySelector('yt-icon-button#button');

        if (!menuButton) {
            console.log('[YT Hider] Menu button not found');
            return false;
        }

        // Click the menu button
        menuButton.click();
        console.log('[YT Hider] Menu button clicked');

        // Wait for the popup to appear
        await new Promise(resolve => setTimeout(resolve, 300));

        // Find the "Hide" option in the popup menu
        const popup = document.querySelector('ytd-popup-container tp-yt-iron-dropdown') ||
                      document.querySelector('tp-yt-iron-dropdown[aria-modal="true"]') ||
                      document.querySelector('ytd-menu-popup-renderer');

        if (!popup) {
            console.log('[YT Hider] Popup not found');
            return false;
        }

        // Search all menu items
        const menuItems = popup.querySelectorAll('ytd-menu-service-item-renderer, yt-list-item-view-model');

        let hideButton = null;

        for (const item of menuItems) {
            const text = item.textContent.toLowerCase();
            if (text.includes('ausblenden') || text.includes('hide') || text.includes('not interested')) {
                hideButton = item;
                break;
            }
        }

        if (!hideButton) {
            console.log('[YT Hider] "Hide" option not found');
            // Close the menu
            document.body.click();
            return false;
        }

        // Click "Hide"
        hideButton.click();
        console.log('[YT Hider] "Hide" clicked - video is being hidden via YouTube');

        // Hide the video preview overlay
        const videoPreview = document.querySelector('ytd-video-preview');
        if (videoPreview) {
            videoPreview.style.display = 'none';
            console.log('[YT Hider] Video preview hidden');
        }

        // CSS animation for the progress bar (added once)
        if (!document.getElementById('yt-hider-styles')) {
            const style = document.createElement('style');
            style.id = 'yt-hider-styles';
            style.textContent = `
                @keyframes yt-hider-shrink {
                    from { transform: scaleX(1); }
                    to { transform: scaleX(0); }
                }
            `;
            document.head.appendChild(style);
        }

        // Wait for the "Undo" dialog
        let undoDialog = null;
        for (let i = 0; i < 20; i++) {
            await new Promise(resolve => setTimeout(resolve, 100));
            undoDialog = container.querySelector('#dismissible') ||
                         container.querySelector('ytd-item-dismissal-feedback-renderer') ||
                         container.querySelector('[id*="dismissible"]');
            if (undoDialog) break;
        }

        if (!undoDialog) {
            console.log('[YT Hider] Undo dialog not found');
            return true;
        }

        console.log('[YT Hider] Undo dialog found, starting countdown');

        // Add progress bar to the undo dialog
        const progressBar = document.createElement('div');
        progressBar.id = 'yt-hider-progress';
        progressBar.style.cssText = `
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #ff4444, #ff8800);
            transform-origin: left;
            animation: yt-hider-shrink 5s linear forwards;
            z-index: 9999;
            border-radius: 2px;
        `;

        undoDialog.style.position = 'relative';
        undoDialog.appendChild(progressBar);

        // Remove the container after 5 seconds
        setTimeout(() => {
            // Check if the undo dialog still exists (user did not click "Undo")
            if (container.contains(undoDialog)) {
                container.remove();
                console.log('[YT Hider] Video container removed');
            } else {
                console.log('[YT Hider] User clicked "Undo", container stays');
            }
        }, 5000);

        return true;
    }

    // Right-click context menu handler
    async function handleContextMenu(event) {
        const target = event.target;

        // Case 1: Click on floating video preview overlay
        const isVideoPreview = target.tagName === 'VIDEO' &&
                               (target.classList.contains('html5-main-video') ||
                                target.classList.contains('video-stream'));

        if (isVideoPreview) {
            const previewContainer = target.closest('ytd-video-preview') ||
                                     target.closest('#video-preview');
            const previewLink = target.closest('a#media-container-link') ||
                               (previewContainer && previewContainer.querySelector('a#media-container-link')) ||
                               document.querySelector('ytd-video-preview a#media-container-link');

            if (previewLink && previewLink.href) {
                const match = previewLink.href.match(/[?&]v=([^&]+)/);
                if (match) {
                    const videoId = match[1];
                    const container = findVideoContainerById(videoId);

                    if (container) {
                        event.preventDefault();
                        event.stopPropagation();
                        await triggerYouTubeHide(container, videoId);
                        return false;
                    }
                }
            }
        }

        // Case 2: Direct click on thumbnail (without preview)
        const thumbnail = target.closest('ytd-thumbnail') ||
                         target.closest('#thumbnail') ||
                         target.closest('yt-touch-feedback-shape') ||
                         target.closest('yt-image');

        const isVideoImage = target.tagName === 'IMG' &&
                            target.closest('a[href*="/watch"]');

        const isInThumbnailArea = target.closest('a#thumbnail') ||
                                  target.closest('ytd-thumbnail');

        if (thumbnail || isVideoImage || isInThumbnailArea) {
            const container = findVideoContainer(target);

            if (container) {
                event.preventDefault();
                event.stopPropagation();

                const videoId = extractVideoId(container);
                await triggerYouTubeHide(container, videoId);

                return false;
            }
        }
    }

    // Left-click handler: open video in background tab and hide
    async function handleClick(event) {
        // Left mouse button only
        if (event.button !== 0) return;

        const target = event.target;

        // Case 1: Click on floating video preview overlay
        const isVideoPreview = target.tagName === 'VIDEO' &&
                               (target.classList.contains('html5-main-video') ||
                                target.classList.contains('video-stream'));

        if (isVideoPreview) {
            const previewContainer = target.closest('ytd-video-preview') ||
                                     target.closest('#video-preview');
            const previewLink = target.closest('a#media-container-link') ||
                               (previewContainer && previewContainer.querySelector('a#media-container-link')) ||
                               document.querySelector('ytd-video-preview a#media-container-link');

            if (previewLink && previewLink.href) {
                const match = previewLink.href.match(/[?&]v=([^&]+)/);
                if (match) {
                    const videoId = match[1];
                    const container = findVideoContainerById(videoId);

                    if (container) {
                        event.preventDefault();
                        event.stopPropagation();
                        openInBackgroundTab(previewLink.href);
                        await triggerYouTubeHide(container, videoId);
                        return false;
                    }
                }
            }
        }

        // Case 2: Direct click on thumbnail (without preview)
        const thumbnail = target.closest('ytd-thumbnail') ||
                         target.closest('#thumbnail') ||
                         target.closest('yt-touch-feedback-shape') ||
                         target.closest('yt-image');

        const isVideoImage = target.tagName === 'IMG' &&
                            target.closest('a[href*="/watch"]');

        const isInThumbnailArea = target.closest('a#thumbnail') ||
                                  target.closest('ytd-thumbnail');

        if (thumbnail || isVideoImage || isInThumbnailArea) {
            const container = findVideoContainer(target);

            if (container) {
                event.preventDefault();
                event.stopPropagation();

                const videoId = extractVideoId(container);
                const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
                openInBackgroundTab(videoUrl);
                await triggerYouTubeHide(container, videoId);

                return false;
            }
        }
    }

    // Initialization
    function init() {
        document.addEventListener('click', handleClick, true);
        document.addEventListener('contextmenu', handleContextMenu, true);
        console.log('[YT Hider] YouTube Video Hider v2.1 active. Left-click: background tab + hide. Right-click: hide only.');
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

})();