☰

YouTube Watched Video Dimmer

Dims watched YouTube videos proportionally to the watched time.

// ==UserScript==
// @name         YouTube Watched Video Dimmer
// @namespace    https://greasyfork.org/users/1458847
// @version      1.1
// @license      MIT
// @description  Dims watched YouTube videos proportionally to the watched time.
// @author       Ev Haus, netjeff, actionless
// @match        https://*.youtube.com/*
// @match        https://youtube.com/*
// @noframes
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

/*
 * This script is based on the original "YouTube: Hide Watched Videos" by Ev Haus, netjeff, and actionless.
 * Modifications include:
 * - Simplified the code by removing Shorts and hide options.
 * - Implemented proportional dimming based on watched time.
 * - Settings for dimming are now configurable directly within the code.
 */

(function () {
    "use strict";

    const WATCHED_THRESHOLD_PERCENT = 10;
    const MIN_DIM_OPACITY = 0.2;
    const MAX_DIM_OPACITY = 0.9;
    const DEBUG = false;

    if (
        typeof trustedTypes !== 'undefined' &&
        trustedTypes.defaultPolicy === null
    ) {
        const s = (s) => s;
        trustedTypes.createPolicy('default', {
            createHTML: s,
            createScriptURL: s,
            createScript: s,
        });
    }

    const logDebug = (...msgs) => {
        if (DEBUG) console.debug('[YT-HWV]', msgs);
    };

    const addStyle = (aCss) => {
        const head = document.getElementsByTagName('head')[0];
        if (head) {
            const style = document.createElement('style');
            style.setAttribute('type', 'text/css');
            style.textContent = aCss;
            head.appendChild(style);
            return style;
        }
        return null;
    };

    const css = `
    .YT-HWV-WATCHED-HIDDEN {
        display: none !important
    }

    .YT-HWV-HIDDEN-ROW-PARENT {
        padding-bottom: 10px
    }

    .YT-HWV-BUTTONS {
        background: transparent;
        border: 1px solid var(--ytd-searchbox-legacy-border-color);
        border-radius: 40px;
        display: flex;
        gap: 5px;
        margin: 0 20px;
    }

    .YT-HWV-BUTTON {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 40px;
        color: var(--yt-spec-icon-inactive);
        cursor: pointer;
        display: flex;
        height: 40px;
        justify-content: center;
        outline: 0;
        width: 40px;
    }

    .YT-HWV-BUTTON:focus,
    .YT-HWV-BUTTON:hover {
        background: var(--yt-spec-badge-chip-background);
    }

    .YT-HWV-BUTTON-DISABLED {
        color: var(--yt-spec-icon-disabled)
    }
    `;
    addStyle(css);

    const BUTTONS = [
        {
            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48"><path fill="currentColor" d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"/></svg>',
            name: 'Toggle Watched Videos',
            stateKey: 'YTHWV_STATE',
            type: 'toggle',
        },
    ];

    const debounce = function (func, wait, immediate) {
        let timeout;
        return (...args) => {
            const later = () => {
                timeout = null;
                if (!immediate) func.apply(this, args);
            };
            const callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(this, args);
        };
    };

    const findWatchedElements = () => {
        const watched = document.querySelectorAll([
                '.ytd-thumbnail-overlay-resume-playback-renderer',
                '.ytThumbnailOverlayProgressBarHostWatchedProgressBarSegmentModern',
            ].join(','),
        );

        const withThreshold = Array.from(watched).filter((bar) => {
            return (
                bar && bar.style.width &&
                Number.parseInt(bar.style.width, 10) >= WATCHED_THRESHOLD_PERCENT
            );
        });

        logDebug(
            `Found ${watched.length} watched elements, ${withThreshold.length} meeting threshold (${WATCHED_THRESHOLD_PERCENT}%)`
        );

        return withThreshold;
    };

    const findButtonAreaTarget = () => {
        return document.querySelector('#container #end #buttons');
    };

    const determineYoutubeSection = () => {
        const { href } = window.location;

        let youtubeSection = 'misc';
        if (href.includes('/watch?')) {
            youtubeSection = 'watch';
        } else if (
            href.match(/.*\/(user|channel|c)\/.+\/videos/u) ||
            href.match(/.*\/@.*/u)
        ) {
            youtubeSection = 'channel';
        } else if (href.includes('/feed/subscriptions')) {
            youtubeSection = 'subscriptions';
        } else if (href.includes('/feed/history')) {
             youtubeSection = 'history';
        } else if (href.includes('/feed/trending')) {
            youtubeSection = 'trending';
        } else if (href.includes('/playlist?')) {
            youtubeSection = 'playlist';
        } else if (href.includes('/results?')) {
            youtubeSection = 'search';
        } else if (href === 'https://www.youtube.com/' || href === 'http://www.youtube.com/') {
            youtubeSection = 'home';
        }

        return youtubeSection;
    };

    const calculateOpacity = (percentage) => {
        const sigmoidFactor = 4;

        const clampedPercent = Math.max(WATCHED_THRESHOLD_PERCENT, Math.min(100, percentage));
        const normalizedPercentage = (clampedPercent - WATCHED_THRESHOLD_PERCENT) / (100 - WATCHED_THRESHOLD_PERCENT);
        const shiftedPercentage = (normalizedPercentage - 0.5) * sigmoidFactor;
        const sigmoid = 1 / (1 + Math.exp(-shiftedPercentage));
        const invertedSigmoid = 1 - sigmoid;
        const opacity = MIN_DIM_OPACITY + invertedSigmoid * (MAX_DIM_OPACITY - MIN_DIM_OPACITY);

        return Math.max(MIN_DIM_OPACITY, Math.min(MAX_DIM_OPACITY, opacity));
    };

    const updateClassOnWatchedItems = async () => {
        document
            .querySelectorAll('.YT-HWV-WATCHED-HIDDEN')
            .forEach((el) => el.classList.remove('YT-HWV-WATCHED-HIDDEN'));

        const potentialItems = document.querySelectorAll(
            'ytd-rich-item-renderer, ytd-grid-video-renderer, ytd-item-section-renderer, ytd-playlist-video-renderer, ytd-compact-video-renderer, ytd-playlist-panel-video-renderer, ytd-video-renderer'
        );
        potentialItems.forEach(el => {
             if (el.style.opacity) {
                 el.style.opacity = '';
             }
             el.classList.remove('YT-HWV-HIDDEN-ROW-PARENT');
        });

        if (window.location.href.includes('/feed/history')) return;

        const section = determineYoutubeSection();
        const state = await GM_getValue(`YTHWV_STATE_${section}`, 'normal');

        if (state === 'normal') return;

        findWatchedElements().forEach((progressBarElement) => {
            const percentage = Number.parseInt(progressBarElement.style.width, 10);
            if (isNaN(percentage)) return;

            let itemToModify;
            let itemToDimOnly;

            if (section === 'subscriptions') {
                 itemToModify =
                    progressBarElement.closest('.ytd-rich-item-renderer') ||
                    progressBarElement.closest('.ytd-grid-video-renderer') ||
                    progressBarElement.closest('ytd-item-section-renderer');

            } else if (section === 'playlist') {
                itemToModify = progressBarElement.closest('ytd-playlist-video-renderer');
            } else if (section === 'watch') {
                itemToModify = progressBarElement.closest('ytd-compact-video-renderer');

                if (itemToModify?.closest('ytd-compact-autoplay-renderer')) {
                    itemToModify = null;
                }

                const watchedItemInPlaylistPanel = progressBarElement.closest('ytd-playlist-panel-video-renderer');
                if (!itemToModify && watchedItemInPlaylistPanel) {
                    itemToDimOnly = watchedItemInPlaylistPanel;
                }
            } else {
                 itemToModify =
                    progressBarElement.closest('ytd-rich-item-renderer') ||
                    progressBarElement.closest('ytd-video-renderer') ||
                    progressBarElement.closest('ytd-grid-video-renderer');
            }

            if (itemToModify) {
                itemToModify.style.opacity = '';
                itemToModify.classList.remove('YT-HWV-WATCHED-HIDDEN');
               itemToModify.classList.remove('YT-HWV-HIDDEN-ROW-PARENT');

                if (state === 'dimmed') {
                    const opacity = calculateOpacity(percentage);
                    itemToModify.style.opacity = opacity.toFixed(2);
                    logDebug(`Dimming item: ${itemToModify.tagName} to opacity ${opacity.toFixed(2)} (${percentage}%)`);
                }
            }

            if (itemToDimOnly && state === 'dimmed') {
                 itemToDimOnly.style.opacity = '';
                itemToModify?.classList.remove('YT-HWV-WATCHED-HIDDEN');

                const opacity = calculateOpacity(percentage);
                itemToDimOnly.style.opacity = opacity.toFixed(2);
                logDebug(`Dimming only item: ${itemToDimOnly.tagName} to opacity ${opacity.toFixed(2)} (${percentage}%)`);
            }
        });
    };

    const renderButtons = async () => {
        const target = findButtonAreaTarget();
        if (!target) return;

        const existingButtons = target.parentNode.querySelector('.YT-HWV-BUTTONS');

        const buttonArea = document.createElement('div');
        buttonArea.classList.add('YT-HWV-BUTTONS');

        for (const { icon, name, stateKey, type } of BUTTONS) {
            if (type === 'toggle') {
                const section = determineYoutubeSection();
                 if (section === 'history') {
                     if (existingButtons) existingButtons.remove();
                     return;
                 }

                const storageKey = `${stateKey}_${section}`;
                const toggleButtonState = await GM_getValue(storageKey, 'normal');

                const button = document.createElement('button');
                button.title = `${name} : currently "${toggleButtonState}" for section "${section}"`;
                button.classList.add('YT-HWV-BUTTON');
                if (toggleButtonState === 'dimmed') {
                    button.classList.add('YT-HWV-BUTTON-DISABLED');
                }
                let currentIcon = icon;
                button.innerHTML = currentIcon;
                buttonArea.appendChild(button);

                button.addEventListener('click', async () => {
                    const currentState = await GM_getValue(storageKey, 'normal');
                    logDebug(`Button ${name} clicked. Current state: ${currentState}, Section: ${section}`);

                    let newState = 'dimmed';
                     if (currentState === 'dimmed') {
                         newState = 'normal';
                     }

                    logDebug(`Setting new state to: ${newState}`);
                    await GM_setValue(storageKey, newState);

                    await updateClassOnWatchedItems();
                    await renderButtons();
                });
            }
        }

        if (buttonArea.hasChildNodes()) {
            if (existingButtons) {
                 if (existingButtons.innerHTML !== buttonArea.innerHTML) {
                     target.parentNode.replaceChild(buttonArea, existingButtons);
                     logDebug('Re-rendered menu buttons');
                 }
            } else {
                target.parentNode.insertBefore(buttonArea, target);
                logDebug('Rendered menu buttons');
            }
        } else if (existingButtons) {
             existingButtons.remove();
             logDebug('Removed menu buttons');
        }
    };

    const run = debounce(async (mutations) => {
        if (
            mutations &&
            mutations.length > 0 &&
             mutations.every(m =>
                m.target.classList?.contains('YT-HWV-BUTTON') ||
                m.target.classList?.contains('YT-HWV-BUTTONS') ||
                 m.addedNodes?.[0]?.classList?.contains('YT-HWV-BUTTONS') ||
                 m.removedNodes?.[0]?.classList?.contains('YT-HWV-BUTTONS')
            )
        ) {
            return;
        }

        logDebug('Running check for watched videos due to DOM change or initial load');
        await updateClassOnWatchedItems();
        await renderButtons();
    }, 250);

    const send = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function (data) {
        this.addEventListener(
            'readystatechange',
            function () {
                 if (this.readyState === 4 && (
                     this.responseURL.includes('/browse_ajax') ||
                     this.responseURL.includes('/player') ||
                     this.responseURL.includes('/search') ||
                     this.responseURL.includes('/next')
                    ))
                 {
                    logDebug(`AJAX detected (${this.responseURL}), scheduling update.`);
                    setTimeout(run, 500);
                }
            },
            false,
        );
        send.call(this, data);
    };

    const observeDOM = (() => {
        const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

        return (obj, callback) => {
            if (!obj || !MutationObserver) {
                 console.warn('[YT-HWV] MutationObserver not available.');
                 return;
             }

            logDebug('Attaching DOM listener');
            const obs = new MutationObserver((mutations) => {
                 if (mutations.some(m => m.addedNodes.length > 0 || m.removedNodes.length > 0)) {
                    callback(mutations);
                }
            });

            obs.observe(obj, { childList: true, subtree: true });
        };
    })();

    logDebug('Starting Script (Simplified GM with Variable Dimming)');
    observeDOM(document.body, run);
    run();

})();