Hide Watched YouTube Videos

hide-watched-youtube.user.js

// ==UserScript==
// @name         Hide Watched YouTube Videos
// @namespace    https://chriskyfung.github.io/
// @version      0.5.1
// @description  Hide 100% watched videos in suggested video grid or list on YouTube
// @author       Chris KY Fung (https://chriskyfung.github.io)
// @updateURL    https://gist.github.com/chriskyfung/95fe7fe24ae06930f25ce19c4a73c5e8/raw/
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(async function() {
    let ableHide = false;

    // Create a custom button for the HIDE function
    function button() {
        let myhidebtn = document.createElement('button');
        myhidebtn.id = "my-hide-btn";
        myhidebtn.addEventListener("click", toggleHideStatus);
        myhidebtn.innerText = "HIDE";
        document.getElementById("buttons").insertAdjacentElement( "beforebegin", myhidebtn);
    };

    // Insert the button at the page top-right if the YouTube buttons have been loaded
    let loadingBtn = setInterval( function () {
        if( document.getElementById("avatar-btn") && !document.getElementById("my-hide-btn")) {
            clearInterval(loadingBtn);
            button();
        }
    },1000);

    // Determine the page type by URL and return the corresponding CSS selector for video grid or list
    function getListSelector() {
        if (document.URL.indexOf("/watch?") > 0) {
            return "#related";
        };
        if (document.URL.indexOf("/results?") > 0) {
            return ".ytd-search";
        };
        return "#content";
    };

    // Find and hide video items that have 100% progress
    function findAndHideWatched() {
        let listSelector = getListSelector();
        let list = document.querySelector(listSelector);
        let progressbars = list.querySelectorAll("#progress[style='width: 100%;']");
        progressbars.forEach( i => {
                i.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.style.display = "none";
        });
    };

    function toggleHideStatus(){
        let myhidebtn = document.getElementById("my-hide-btn");
            if (ableHide) {
                ableHide = false;
                myhidebtn.style.color = "";
            } else {
                ableHide = true;
                myhidebtn.style.color = "lightblue";
                findAndHideWatched();
            };
    };

    // Shortcut key 'H'
    document.onkeyup = function(e) {
        if (e.which == 72) {
            toggleHideStatus();
        }
    };

    window.addEventListener('scroll', function() {
        if (ableHide) {
            findAndHideWatched();
        }
    });

})();