YouTube: Hide Watched Videos

Hides watched videos from your YouTube subscriptions page.

目前為 2016-09-26 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         YouTube: Hide Watched Videos
// @version      0.1
// @description  Hides watched videos from your YouTube subscriptions page.
// @author       Chocospleen
// @grant        GM_addStyle
// @include      http://*.youtube.com/*
// @include      http://youtube.com/*
// @include      https://*.youtube.com/*
// @include      https://youtube.com/*
// @namespace https://greasyfork.org/users/59385
// ==/UserScript==

(function (undefined) {

    GM_addStyle("\
.GR-WATCHED {\
display: none;\
}\
.GR-BUTTON {\
cursor: pointer;\
position: fixed;\
right: 80px;\
top: 10px;\
}\
.GR-BUTTON-LABEL {\
pointer-events: none;\
}\
.GR-BUTTON-CHECKBOX {\
pointer-events: none;\
margin-right: 10px;\
vertical-align: -3px;\
}\
");

    // ===========================================================

    var findWatchedElements = function () {
        return document.getElementsByClassName('watched');
    };

    // ===========================================================

    var findParentByClass = function(el, cls) {
        while ((el = el.parentElement) && !el.classList.contains(cls));
        return el;
    };

    // ===========================================================

    var findButtonTarget = function () {
        return document.getElementById('browse-items-primary');
    };

    // ===========================================================

    var isButtonAlreadyThere = function () {
        var button = document.getElementsByClassName('GR-BUTTON');
        return button && button.length;
    };

    // ===========================================================

    var addClassToWatchedRows = function () {
        var items = findWatchedElements() || [];
        for (var i = 0, l = items.length; i < l; i++) {
            var item = items[i];

            // "Subscription" section needs us to hide the "feed-item-container",
            // but in the "Trending" section, that class will hide everything.
            // So there, we need to hide the "expanded-shelf-content-item-wrapper"
            var row;
            if (window.location.href.indexOf('/feed/subscriptions') > 0) {
                row = findParentByClass(item, 'feed-item-container');
            } else {
                row = findParentByClass(item, 'expanded-shelf-content-item-wrapper');
            }

            var gridItem = findParentByClass(item, 'yt-shelf-grid-item');

            // If we're in grid view, we will hide the "grid" item,
            // otherwise we'll hide the item row
            var itemToHide = gridItem ? gridItem : row;

            if (localStorage.GRWATCHED === 'true') {
                itemToHide.classList.add('GR-WATCHED');
            } else {
                itemToHide.classList.remove('GR-WATCHED');
            }
        }
    };

    // ===========================================================

    var addCheckboxButton = function () {
        if (isButtonAlreadyThere()) return;

        // Find button target
        var target = findButtonTarget();
        if (!target) return;

        // Add label
        var label = document.createElement('label');
        label.className = 'GR-BUTTON-LABEL';

        // Add checkbox
        var checkbox = document.createElement('input');
        checkbox.checked = localStorage.GRWATCHED === 'true' ? 'checked' : null;
        checkbox.className = 'GR-BUTTON-CHECKBOX';
        checkbox.type = 'checkbox';
        label.appendChild(checkbox);

        // Add label text
        var textnode = document.createTextNode("Hide Watched");
        label.appendChild(textnode);

        // Create <button>
        var button = document.createElement('button');
        button.className = 'yt-uix-button yt-uix-button-size-default yt-uix-button-default yt-uix-button-has-icon yt-uix-button-reverse inq-no-click GR-BUTTON';
        button.appendChild(label);
        button.addEventListener('click', function (event) {
            var value = localStorage.GRWATCHED === 'true' ? 'false' : 'true';
            localStorage.GRWATCHED = value;
            console.log(localStorage.GRWATCHED, Boolean(localStorage.GRWATCHED), value);
            checkbox.checked = value === 'true';
            addClassToWatchedRows();
        });

        target.appendChild(button);
    };

    var run = function () {
        addClassToWatchedRows();
        addCheckboxButton();
    };

    // ===========================================================

    // Hijack all XHR calls
    var send = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function (data) {
        this.addEventListener("readystatechange", function () {
            if (
                // Anytime more videos are fetched -- re-run script
                this.responseURL.indexOf('browse_ajax?action_continuation') > 0
            ) {
                setTimeout(function () {
                    run();
                }, 0);
            }
        }, false);
        send.call(this, data);
    };

    // ===========================================================

    var observeDOM = (function(){
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
            eventListenerSupported = window.addEventListener;

        return function(obj, callback){
            if( MutationObserver ){
                // define a new observer
                var obs = new MutationObserver(function(mutations, observer){
                    if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                        callback();
                });
                // have the observer observe foo for changes in children
                obs.observe( obj, { childList:true, subtree:true });
            }
            else if( eventListenerSupported ){
                obj.addEventListener('DOMNodeInserted', callback, false);
                obj.addEventListener('DOMNodeRemoved', callback, false);
            }
        };
    })();

    // YouTube does weird things during navigation. This seems to be the only reliable way to
    // check when user moves from one page to another.
    observeDOM(document.body, function () {
        run();
    });

    // ===========================================================

    run();
}());