content.js

// ==UserScript==
// @name         Channel Blocker v1.2 (Bugs Fixed)
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Blocks YouTube Shorts channels based on a simple user-managed list. Fixes gray overlay and double skip issues.
// @author       UserScript Author
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // --- CONFIGURATION ---
    const CONFIG = {
        SAVE_DEBOUNCE_MS: 5000,
        STORAGE_KEY: 'ChannelBlockerList' 
    };

    // --- DATA STRUCTURES ---
    let BlockedChannelsWithTime = []; // Array of { name: string, blockedAt: number }
    let BlockedChannelNamesFastLookup = new Set();
    let saveTimer = null;

    // --- STATE ---
    let activeChannelNameRaw = "";
    let userHasInteracted = false;
    let isCurrentChannelBlocked = false;

    // --- UTILS ---
    function triggerSkipToNextVideo() {
        const nextBtn = document.querySelector('[aria-label="Next video"]');
        if (nextBtn) {
            nextBtn.click();
        } else {
            const event = new KeyboardEvent('keydown', {
                key: 'ArrowDown', code: 'ArrowDown', keyCode: 40, bubbles: true, cancelable: true
            });
            document.dispatchEvent(event);
        }
    }

    // --- PERSISTENCE ---
    function loadBlockList() {
        try {
            if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
                chrome.storage.local.get([CONFIG.STORAGE_KEY], (result) => {
                    if (result[CONFIG.STORAGE_KEY] && Array.isArray(result[CONFIG.STORAGE_KEY])) {
                        BlockedChannelsWithTime = result[CONFIG.STORAGE_KEY];
                        BlockedChannelNamesFastLookup = new Set(BlockedChannelsWithTime.map(item => item.name));
                    }
                });
            }
        } catch (e) { /* Storage access failed silently */ }
    }

    function scheduleSave() {
        if (saveTimer) clearTimeout(saveTimer);
        saveTimer = setTimeout(() => {
            try {
                if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
                    chrome.storage.local.set({ [CONFIG.STORAGE_KEY]: BlockedChannelsWithTime });
                }
            } catch (e) { /* Save failed silently */ }
        }, CONFIG.SAVE_DEBOUNCE_MS);
    }

    // --- FEEDBACK & UI ACTIONS ---
    function flashFeedback(text) {
        const el = document.getElementById('blocker-feedback');
        if (el) {
            el.innerText = text;
            el.style.opacity = '1';
            setTimeout(() => { 
                el.style.opacity = '0'; 
                setTimeout(() => updateOverlay(activeChannelNameRaw, isCurrentChannelBlocked), 100); 
            }, 1200);
        }
    }

    // --- BLOCK LIST CORE LOGIC ---
    function isChannelNameBlocked(channelName) {
        if (!channelName) return false;
        return BlockedChannelNamesFastLookup.has(channelName.toLowerCase());
    }

    function handleBlockCurrentChannel() {
        if (!activeChannelNameRaw) {
            flashFeedback("Error: No channel detected.");
            return;
        }

        const channelKeyLowercase = activeChannelNameRaw.toLowerCase();
        let feedbackMessage = "Already Blocked.";

        if (!BlockedChannelNamesFastLookup.has(channelKeyLowercase)) {
            const newItem = { name: channelKeyLowercase, blockedAt: Date.now() };
            BlockedChannelsWithTime.push(newItem);
            BlockedChannelNamesFastLookup.add(channelKeyLowercase);
            feedbackMessage = `Blocked: ${activeChannelNameRaw}`;
            isCurrentChannelBlocked = true; 
            
            // ⭐️ FIX: Only trigger skip here, immediately after blocking.
            setTimeout(triggerSkipToNextVideo, 400);
        }

        scheduleSave();
        flashFeedback(feedbackMessage);
        checkActiveVideoAndFilter(); // Re-check to update the UI button status
    }
    
    function unblockChannel(channelName) {
        const channelKeyLowercase = channelName.toLowerCase();
        
        if (BlockedChannelNamesFastLookup.delete(channelKeyLowercase)) {
            BlockedChannelsWithTime = BlockedChannelsWithTime.filter(item => item.name !== channelKeyLowercase);
            scheduleSave();
            
            if (activeChannelNameRaw.toLowerCase() === channelKeyLowercase) {
                isCurrentChannelBlocked = false;
                checkActiveVideoAndFilter();
            }
            return true;
        }
        return false;
    }

    // --- MANAGEMENT MODAL ---
    function showManagementModal() {
        const existing = document.getElementById('blocker-list-modal');
        if (existing) {
            existing.remove();
            return;
        }

        const sortedList = [...BlockedChannelsWithTime].sort((a, b) => b.blockedAt - a.blockedAt);
        const modalElement = document.createElement('div');
        modalElement.id = 'blocker-list-modal';
        
        const baseStyle = `
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 350px; max-height: 80vh; background: rgba(10, 10, 10, 0.98);
            border: 1px solid #444; border-radius: 12px; z-index: 100000;
            color: #fff; font-family: sans-serif; display: flex; flex-direction: column;
            box-shadow: 0 0 50px rgba(0,0,0,0.8); backdrop-filter: blur(10px);
        `;
        modalElement.style.cssText = baseStyle;

        const listContent = sortedList.map(item => {
            const dateStr = new Date(item.blockedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
            return `
                <div class="list-item" data-channel="${item.name}" style="display:flex; justify-content:space-between; align-items:center; padding:6px 12px; border-bottom:1px solid #222;">
                    <span style="font-size: 13px; color: #a855f7;">@${item.name}</span>
                    <div style="display:flex; align-items:center;">
                        <span style="font-size: 10px; color: #6b7280; margin-right: 10px;">${dateStr}</span>
                        <button class="btn-unblock" data-channel="${item.name}" style="background:#060; border:none; color:#fff; cursor:pointer; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: bold;">
                            Re-Allow
                        </button>
                    </div>
                </div>
            `;
        }).join('');
        
        const emptyState = '<div style="padding:20px; text-align:center; color:#555;">No channels currently blocked.</div>';

        modalElement.innerHTML = `
            <div style="padding: 12px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; background: #111; border-radius: 12px 12px 0 0;">
                <span style="font-weight: bold; color: #4ade80; font-size: 14px;">Blocked Channel List (${BlockedChannelsWithTime.length})</span>
                <button id="btn-close-list" style="background:none; border:none; color:#fff; cursor:pointer; font-size:16px;">✕</button>
            </div>
            <div id="list-content" style="overflow-y: auto; padding: 0; font-size: 12px; scrollbar-width: thin; scrollbar-color: #444 #111;">
                ${sortedList.length > 0 ? listContent : emptyState}
            </div>
        `;

        document.body.appendChild(modalElement);
        document.getElementById('btn-close-list').onclick = () => modalElement.remove();
        
        modalElement.querySelectorAll('.btn-unblock').forEach(button => {
            button.onclick = (e) => {
                const channelToUnblock = e.target.getAttribute('data-channel');
                if (unblockChannel(channelToUnblock)) {
                    e.target.closest('.list-item').remove();
                    
                    const header = modalElement.querySelector('span');
                    if (header) header.textContent = `Blocked Channel List (${BlockedChannelsWithTime.length})`;
                    
                    if (BlockedChannelsWithTime.length === 0) {
                         document.getElementById('list-content').innerHTML = emptyState;
                    }
                }
            };
        });
    }

    // --- UI INJECTION ---
    function createOverlay() {
        const OVERLAY_ID = 'channel-blocker-overlay';
        const existing = document.getElementById(OVERLAY_ID);
        if (existing) return existing;

        const overlayElement = document.createElement('div');
        overlayElement.id = OVERLAY_ID;
        
        const overlayStyle = `
            position: fixed; top: 70px; right: 20px; z-index: 99999;
            background: rgba(10, 10, 10, 0.95); border: 1px solid #333;
            color: #fff; padding: 12px; border-radius: 12px;
            font-family: 'Roboto', sans-serif; width: 220px; 
            backdrop-filter: blur(4px); box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        `;
        overlayElement.style.cssText = overlayStyle;

        const CSS_STYLES = `
            .block-btn { 
                color: #fff; 
                border: 1px solid; 
                border-radius: 4px; 
                cursor: pointer; 
                font-weight: bold;
                transition: transform 0.1s, background 0.2s, border-color 0.2s, opacity 0.2s; 
                flex-shrink: 0; 
                width: 28px; 
                height: 28px; 
                padding: 0; 
                font-size: 14px; 
                margin-right: 6px;
            }
            .block-btn:active { transform: scale(0.95); }
        `;
        
        // Inject styles
        if (!document.getElementById('blocker-styles')) {
            const style = document.createElement('style');
            style.id = 'blocker-styles';
            style.innerHTML = CSS_STYLES;
            document.head.appendChild(style);
        }

        overlayElement.innerHTML = `
            <div id="blocker-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                <div style="font-size: 10px; color: #888; letter-spacing: 1px; font-weight:700;">CHANNEL FILTER</div>
                <button id="btn-list-manage" title="Manage Block List" style="background:none; border:none; color:#a855f7; cursor:pointer; font-size:14px; padding:0;">
                    📋
                </button>
            </div>

            <div id="blocker-body">
                <div style="display: flex; align-items: center; justify-content: flex-start;">
                    
                    <button id="btn-block-action" class="block-btn">
                        ⛔
                    </button>
                    
                    <div id="channel-display" style="font-size: 14px; color: #a855f7; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 34px);">
                        Fetching Channel...
                    </div>
                </div>
            </div>
            <div id="blocker-feedback" style="position: absolute; inset:0; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity 0.2s; text-align: center; padding: 10px; font-size: 12px; z-index:2;"></div>
        `;

        document.body.appendChild(overlayElement);

        // Handlers
        document.getElementById('btn-block-action').onclick = (e) => {
            e.stopPropagation();
            handleBlockCurrentChannel();
        };
        
        document.getElementById('btn-list-manage').onclick = (e) => {
            e.stopPropagation();
            showManagementModal();
        };

        return overlayElement;
    }

    // --- UPDATE OVERLAY (Visual State Changes) ---
    function updateOverlay(channelName, isBlocked) {
        const overlayElement = createOverlay();

        const channelDisplayElement = document.getElementById('channel-display');
        if (channelDisplayElement) channelDisplayElement.textContent = channelName ? `@${channelName}` : "Unknown Channel";

        const blockButton = document.getElementById('btn-block-action');

        if (isBlocked) {
            // Blocked State: Button muted, Channel name red
            blockButton.style.opacity = '0.7'; 
            blockButton.style.pointerEvents = 'none';
            blockButton.style.backgroundColor = '#600'; 
            blockButton.style.borderColor = '#f87171'; 
            channelDisplayElement.style.color = '#f87171'; 
        } else {
            // Allowed State: Button active, Channel name original color
            blockButton.style.opacity = '1';
            blockButton.style.pointerEvents = 'auto';
            blockButton.style.backgroundColor = '#222'; 
            blockButton.style.borderColor = '#444'; 
            channelDisplayElement.style.color = '#a855f7';
        }
    }
    
    // --- YOUTUBE CHANNEL NAME FETCHING ---
    function getActiveChannelName() {
        const activeRenderer = document.querySelector('ytd-reel-video-renderer[is-active]') || document.querySelector('ytd-shorts-player-page') || document;
        
        if (!activeRenderer) return null;

        let channel = "";
        
        // Selector chain for robustness across different layouts
        let channelElement = activeRenderer.querySelector('a.yt-core-attributed-string__link[href*="/shorts"]') 
                           || activeRenderer.querySelector('#channel-info .yt-core-attributed-string')
                           || activeRenderer.querySelector('.ytd-channel-name yt-formatted-string')
                           || activeRenderer.querySelector('ytd-video-owner-renderer a#owner-text');

        if (channelElement) channel = channelElement.innerText.trim().replace(/^@/, ''); 
        
        // Check for sponsored/ad content
        const badges = Array.from(activeRenderer.querySelectorAll('.yt-badge-shape__text'));
        if (badges.some(el => el.innerText.trim() === 'Sponsored')) return { isSponsored: true };

        return { channel: channel || "Unknown", isSponsored: false, el: activeRenderer };
    }


    // --- ENGINE ---
    function checkActiveVideoAndFilter() {
        const videoData = getActiveChannelName();
        if (!videoData) return;

        // Skip ads and reset interaction status
        if (videoData.isSponsored) {
            updateOverlay("AD", false);
            if (!userHasInteracted) {
                 userHasInteracted = true;
                 setTimeout(triggerSkipToNextVideo, 400);
            }
            return;
        }
        
        const newChannelName = videoData.channel;

        if (newChannelName !== activeChannelNameRaw) {
            activeChannelNameRaw = newChannelName;
            userHasInteracted = false;
            
            isCurrentChannelBlocked = isChannelNameBlocked(activeChannelNameRaw);
        }

        updateOverlay(activeChannelNameRaw, isCurrentChannelBlocked);


        if (isCurrentChannelBlocked && !userHasInteracted) {
            userHasInteracted = true;
            triggerSkipToNextVideo(); 
        }
    }

    function startEngine() {
        loadBlockList();
        createOverlay();

        const observer = new MutationObserver((mutations) => {
            let shouldCheck = false;
            for (const m of mutations) {
                if (m.type === 'attributes' && m.attributeName === 'is-active') {
                    shouldCheck = true;
                    break;
                }
                if (m.type === 'childList' && m.addedNodes.length > 0) {
                    shouldCheck = true;
                }
            }
            if (shouldCheck) checkActiveVideoAndFilter();
        });

        const targetNode = document.getElementById('shorts-inner-container') || document.body;
        observer.observe(targetNode, {
            attributes: true, subtree: true, childList: true, attributeFilter: ['is-active']
        });

        setInterval(checkActiveVideoAndFilter, 300);
    }

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