Youtube watched hider

Hide already watched (progress bar at 100%) video on user's, channel's and subscriptions' pages
当前为 2018-08-17 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Youtube watched hider
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Hide already watched (progress bar at 100%) video on user's, channel's and subscriptions' pages
// @author       Arus Joshua
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // CONSTANTS

    var IMG_GRAY = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMTAgMzEwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMTAgMzEwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCI+CjxnIGlkPSJYTUxJRF84MjJfIj4KCTxwYXRoIGlkPSJYTUxJRF84MjNfIiBkPSJNMjk3LjkxNyw2NC42NDVjLTExLjE5LTEzLjMwMi0zMS44NS0xOC43MjgtNzEuMzA2LTE4LjcyOEg4My4zODZjLTQwLjM1OSwwLTYxLjM2OSw1Ljc3Ni03Mi41MTcsMTkuOTM4ICAgQzAsNzkuNjYzLDAsMTAwLjAwOCwwLDEyOC4xNjZ2NTMuNjY5YzAsNTQuNTUxLDEyLjg5Niw4Mi4yNDgsODMuMzg2LDgyLjI0OGgxNDMuMjI2YzM0LjIxNiwwLDUzLjE3Ni00Ljc4OCw2NS40NDItMTYuNTI3ICAgQzMwNC42MzMsMjM1LjUxOCwzMTAsMjE1Ljg2MywzMTAsMTgxLjgzNXYtNTMuNjY5QzMxMCw5OC40NzEsMzA5LjE1OSw3OC4wMDYsMjk3LjkxNyw2NC42NDV6IE0xOTkuMDIxLDE2Mi40MWwtNjUuMDM4LDMzLjk5MSAgIGMtMS40NTQsMC43Ni0zLjA0NCwxLjEzNy00LjYzMiwxLjEzN2MtMS43OTgsMC0zLjU5Mi0wLjQ4NC01LjE4MS0xLjQ0NmMtMi45OTItMS44MTMtNC44MTktNS4wNTYtNC44MTktOC41NTR2LTY3Ljc2NCAgIGMwLTMuNDkyLDEuODIyLTYuNzMyLDQuODA4LTguNTQ2YzIuOTg3LTEuODE0LDYuNzAyLTEuOTM4LDkuODAxLTAuMzI4bDY1LjAzOCwzMy43NzJjMy4zMDksMS43MTgsNS4zODcsNS4xMzQsNS4zOTIsOC44NjEgICBDMjA0LjM5NCwxNTcuMjYzLDIwMi4zMjUsMTYwLjY4NCwxOTkuMDIxLDE2Mi40MXoiIGZpbGw9IiNhMGEwYTAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K";
    var IMG_BLACK = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDkwLjI0LDExMy45MmMtMTMuODg4LTI0LjcwNC0yOC45Ni0yOS4yNDgtNTkuNjQ4LTMwLjk3NkMzOTkuOTM2LDgwLjg2NCwzMjIuODQ4LDgwLDI1Ni4wNjQsODAgICAgYy02Ni45MTIsMC0xNDQuMDMyLDAuODY0LTE3NC42NTYsMi45MTJjLTMwLjYyNCwxLjc2LTQ1LjcyOCw2LjI3Mi01OS43NDQsMzEuMDA4QzcuMzYsMTM4LjU5MiwwLDE4MS4wODgsMCwyNTUuOTA0ICAgIEMwLDI1NS45NjgsMCwyNTYsMCwyNTZjMCwwLjA2NCwwLDAuMDk2LDAsMC4wOTZ2MC4wNjRjMCw3NC40OTYsNy4zNiwxMTcuMzEyLDIxLjY2NCwxNDEuNzI4ICAgIGMxNC4wMTYsMjQuNzA0LDI5LjA4OCwyOS4xODQsNTkuNzEyLDMxLjI2NEMxMTIuMDMyLDQzMC45NDQsMTg5LjE1Miw0MzIsMjU2LjA2NCw0MzJjNjYuNzg0LDAsMTQzLjg3Mi0xLjA1NiwxNzQuNTYtMi44MTYgICAgYzMwLjY4OC0yLjA4LDQ1Ljc2LTYuNTYsNTkuNjQ4LTMxLjI2NEM1MDQuNzA0LDM3My41MDQsNTEyLDMzMC42ODgsNTEyLDI1Ni4xOTJjMCwwLDAtMC4wOTYsMC0wLjE2YzAsMCwwLTAuMDY0LDAtMC4wOTYgICAgQzUxMiwxODEuMDg4LDUwNC43MDQsMTM4LjU5Miw0OTAuMjQsMTEzLjkyeiBNMTkyLDM1MlYxNjBsMTYwLDk2TDE5MiwzNTJ6IiBmaWxsPSIjMjQwMDI0Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==";
    var IMG_RED = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0NjEuMDAxIDQ2MS4wMDEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ2MS4wMDEgNDYxLjAwMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxwYXRoIHN0eWxlPSJmaWxsOiNGNjFDMEQ7IiBkPSJNMzY1LjI1Nyw2Ny4zOTNIOTUuNzQ0QzQyLjg2Niw2Ny4zOTMsMCwxMTAuMjU5LDAsMTYzLjEzN3YxMzQuNzI4ICBjMCw1Mi44NzgsNDIuODY2LDk1Ljc0NCw5NS43NDQsOTUuNzQ0aDI2OS41MTNjNTIuODc4LDAsOTUuNzQ0LTQyLjg2Niw5NS43NDQtOTUuNzQ0VjE2My4xMzcgIEM0NjEuMDAxLDExMC4yNTksNDE4LjEzNSw2Ny4zOTMsMzY1LjI1Nyw2Ny4zOTN6IE0zMDAuNTA2LDIzNy4wNTZsLTEyNi4wNiw2MC4xMjNjLTMuMzU5LDEuNjAyLTcuMjM5LTAuODQ3LTcuMjM5LTQuNTY4VjE2OC42MDcgIGMwLTMuNzc0LDMuOTgyLTYuMjIsNy4zNDgtNC41MTRsMTI2LjA2LDYzLjg4MUMzMDQuMzYzLDIyOS44NzMsMzA0LjI5OCwyMzUuMjQ4LDMwMC41MDYsMjM3LjA1NnoiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==";
    var COOKIE_NAME = "";
    var HIDE = false;
    var CURRENT_URL = null;
    var CURRENT_PAGE = null;
    var PAGES = [
        {
            regex: /https:\/\/www\.youtube\.com\/.*\/(.*)\/videos/g,
            displayStyle: "inline-block",
            querySelector: "ytd-grid-video-renderer"
        },
        {
            regex: /https:\/\/www\.youtube\.com\/feed\/history/g,
            displayStyle: "flex",
            cookieName: "history",
            querySelector: "ytd-video-renderer"
        },
        {
            regex: /https:\/\/www\.youtube\.com\/feed\/subscriptions/g,
            displayStyle: "inline-block",
            cookieName: "subscriptions",
            querySelector: "ytd-grid-video-renderer"
        },
        {
            regex: /https:\/\/www\.youtube\.com\/playlist\?list=(.*)/g,
            displayStyle: "flex",
            querySelector: "ytd-playlist-video-renderer"
        },
        {
            regex: /https:\/\/www\.youtube\.com\/watch\?.*/g,
            displayStyle: "inline-block",
            cookieName: "watch",
            querySelector: "ytd-compact-video-renderer"
        }
    ];



    // FUNCTIONS

    var setCookie = function(cvalue) {
        var d = new Date();
        d.setTime(d.getTime() + (60 * 24 * 60 * 60 * 1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = COOKIE_NAME + "=" + cvalue + ";" + expires + ";path=/";
    }

    var getCookie = function() {
        var name = COOKIE_NAME + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) === 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    var displayOrHide = function() {
        if (CURRENT_PAGE === null) {
            return;
        }

        document.querySelectorAll(CURRENT_PAGE.querySelector).forEach(function(element){
            var progressBar = element.getElementsByClassName("ytd-thumbnail-overlay-resume-playback-renderer");
            if (progressBar.length > 0)
            {
                var avancement = progressBar[0].style.width;
                if (HIDE && avancement == "100%")
                {
                    element.style.display = "none";
                } else {
                    element.style.display = CURRENT_PAGE.displayStyle;
                }
            }
        });
    };

    var addButton = function() {
        var img = document.createElement('img');
        img.src = HIDE ? IMG_RED : IMG_GRAY;
        img.width = "20";
        img.height = "20";

        var ytIcon = document.createElement("yt-icon");
        ytIcon.classList.add("guide-icon");
        ytIcon.classList.add("style-scope");
        ytIcon.classList.add("ytd-guide-entry-renderer");

        var ytIconButton = document.createElement("yt-icon-button");
        ytIconButton.classList.add("style-scope");
        ytIconButton.classList.add("ytd-topbar-menu-button-renderer");
        ytIconButton.classList.add("style-default");

        var aImg = document.createElement("a");
        aImg.href = "";
        aImg.onclick = function() {
            HIDE = !HIDE;
            setCookie(HIDE ? "true" : "false");
            displayOrHide();
            img.src = HIDE ? IMG_RED : IMG_GRAY;
            return false;
        }

        var divHide = document.createElement("ytd-topbar-menu-button-renderer");
        divHide.id = "youtubeWatchedHiderDiv";
        divHide.classList.add("style-scope");
        divHide.classList.add("ytd-masthead");
        divHide.classList.add("style-default");

        var buttonBar = document.getElementById("buttons");

        buttonBar.insertBefore(divHide, buttonBar.firstChild);
        divHide.querySelector("div").appendChild(aImg);
        aImg.appendChild(ytIconButton);
        ytIconButton.querySelector("button").appendChild(ytIcon);
        ytIcon.appendChild(img);
    };

    var init = function() {
        CURRENT_URL = window.location.href;
        CURRENT_PAGE = null;
        PAGES.some(function(page) {
            if (CURRENT_URL.match(page.regex)) {
                CURRENT_PAGE = page;
                return true;
            }
        });

        if (CURRENT_PAGE === null) {
            return;
        }

        COOKIE_NAME = CURRENT_PAGE.cookieName !== undefined ? CURRENT_PAGE.cookieName : "youtubeWatchedHiderCookie_" + CURRENT_PAGE.regex.exec(CURRENT_URL)[1];
        HIDE = getCookie() == "true";

        addButton();
    }


    // AUTOMATIC UPDATE OF THE PAGE

    setInterval(function(){
        if (document.getElementById("buttons").childElementCount == 5) {
            init();
        }
        displayOrHide();
    }, 1000);

})();