☰

YouTube Video Hider with 🚫 Icon (Transparent)

Adds a 🚫 symbol without background in the top-left corner of the thumbnail for natively hiding videos on YouTube | Fügt ein 🚫 Symbol ohne Hintergrund links oben im Thumbnail zum nativen Ausblenden von Videos auf YouTube hinzu | Ajoute un symbole 🚫 sans fond en haut à gauche de la miniature pour masquer nativement des vidéos sur YouTube | Añade un símbolo 🚫 sin fondo en la esquina superior izquierda de la miniatura para ocultar videos de forma nativa en YouTube

// ==UserScript==
// @name         YouTube Video Hider with 🚫 Icon (Transparent)
// @namespace    http://tampermonkey.net/
// @version      1.17
// @description  Adds a 🚫 symbol without background in the top-left corner of the thumbnail for natively hiding videos on YouTube | Fügt ein 🚫 Symbol ohne Hintergrund links oben im Thumbnail zum nativen Ausblenden von Videos auf YouTube hinzu | Ajoute un symbole 🚫 sans fond en haut à gauche de la miniature pour masquer nativement des vidéos sur YouTube | Añade un símbolo 🚫 sin fondo en la esquina superior izquierda de la miniatura para ocultar videos de forma nativa en YouTube
// @icon         https://youtube.com/favicon.ico
// @author       Copiis
// @license      MIT
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==
//                    If you find this script useful and would like to support my work, consider making a small donation!
//                    Bitcoin (BTC): bc1quc5mkudlwwkktzhvzw5u2nruxyepef957p68r7
//                    PayPal: https://www.paypal.com/paypalme/Coopiis?country.x=DE&locale.x=de_DE

(function () {
    'use strict';

    function addHideButton() {
        const videoElements = document.querySelectorAll('ytd-rich-grid-media');

        console.log(`Gefundene Videos: ${videoElements.length}`); // Debugging: Anzahl der Videos

        videoElements.forEach((video, index) => {
            if (video.querySelector('.hide-video-btn')) {
                console.log(`Video ${index}: Button bereits vorhanden, überspringe`);
                return;
            }

            const thumbnailContainer = video.querySelector('#thumbnail');
            const thumbnailImage = thumbnailContainer?.querySelector('img.yt-core-image');
            if (!thumbnailContainer || !thumbnailImage) {
                console.log(`Video ${index}: Kein Thumbnail oder Bild gefunden`);
                return;
            }

            const hideButton = document.createElement('div');
            hideButton.className = 'hide-video-btn';
            hideButton.textContent = '🚫';
            Object.assign(hideButton.style, {
                position: 'absolute',
                top: '8px',
                left: '8px',
                cursor: 'pointer',
                zIndex: '9999',
                borderRadius: '50%',
                width: '32px',
                height: '32px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '18px',
                color: 'white',
                backgroundColor: 'transparent', // Kein Hintergrund
                pointerEvents: 'auto'
            });

            thumbnailContainer.style.position = 'relative';
            thumbnailContainer.appendChild(hideButton);
            console.log(`Video ${index}: Button hinzugefügt`);

            hideButton.addEventListener('click', async () => {
                try {
                    const menuButton = video.querySelector('yt-icon-button#button.dropdown-trigger');
                    if (!menuButton) {
                        console.log(`Video ${index}: Kein Menü-Button gefunden`);
                        return;
                    }

                    menuButton.querySelector('button')?.click();
                    console.log(`Video ${index}: Menü geöffnet`);
                    await new Promise(resolve => setTimeout(resolve, 300));

                    const menuItems = document.querySelectorAll('yt-formatted-string.style-scope.ytd-menu-service-item-renderer');
                    const hideOption = Array.from(menuItems).find(item => item.textContent.trim() === 'Ausblenden');

                    if (hideOption) {
                        hideOption.click();
                        console.log(`Video ${index}: Ausblenden geklickt`);
                        await new Promise(resolve => setTimeout(resolve, 200));
                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
                    } else {
                        console.log(`Video ${index}: Ausblenden-Option nicht gefunden`);
                    }
                } catch (err) {
                    console.error(`Video ${index}: Fehler beim Ausblenden:`, err);
                }
            });
        });
    }

    const style = document.createElement('style');
style.textContent = `
    .hide-video-btn {
        color: white !important;
        background-color: transparent !important; /* Kein Hintergrund */
        border-radius: 50% !important;
        font-size: 18px !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .hide-video-btn:hover {
        background-color: transparent !important; /* Kein grauer Hintergrund */
        box-shadow: 0 0 10px 2px rgba(255, 215, 0, 0.8) !important; /* Goldenes Glühen */
    }
`;
document.head.appendChild(style);

    addHideButton();

    const observer = new MutationObserver(() => {
        addHideButton();
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();