YouTube Sub Feed Filter 2

Filters your YouTube subscriptions feed.
目前為 2023-11-26 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name        YouTube Sub Feed Filter 2
// @version     1.12
// @description Filters your YouTube subscriptions feed.
// @author      Callum Latham
// @namespace   https://greasyfork.org/users/696211-ctl2
// @license     MIT
// @match       *://www.youtube.com/*
// @match       *://youtube.com/*
// @require     https://update.greasyfork.org/scripts/446506/1284830/%24Config.js
// @grant       GM.setValue
// @grant       GM.getValue
// @grant       GM.deleteValue
// ==/UserScript==
 
// Don't run in frames (e.g. stream chat frame)
if (window.parent !== window) {
    // noinspection JSAnnotator
    return;
}
 
// User config
 
const LONG_PRESS_TIME = 400;
const REGEXP_FLAGS = 'i';
 
// Dev config
 
const VIDEO_TYPE_IDS = {
    'GROUPS': {
        'ALL': 'All',
        'STREAMS': 'Streams',
        'PREMIERS': 'Premiers',
        'NONE': 'None'
    },
    'INDIVIDUALS': {
        'STREAMS_SCHEDULED': 'Scheduled Streams',
        'STREAMS_LIVE': 'Live Streams',
        'STREAMS_FINISHED': 'Finished Streams',
        'PREMIERS_SCHEDULED': 'Scheduled Premiers',
        'PREMIERS_LIVE': 'Live Premiers',
        'SHORTS': 'Shorts',
        'NORMAL': 'Basic Videos'
    }
};
 
const CUTOFF_VALUES = [
    'Minimum',
    'Maximum'
];
 
const BADGE_VALUES = [
    'Exclude',
    'Include',
    'Require'
];
 
const TITLE = 'YouTube Sub Feed Filter';
 
const $config = new $Config(
    'YTSFF_TREE',
    (() => {
        const regexPredicate = (value) => {
            try {
                RegExp(value);
            } catch (_) {
                return 'Value must be a valid regular expression.';
            }
 
            return true;
        };
 
        return {
            'children': [
                {
                    'label': 'Filters',
                    'children': [],
                    'seed': {
                        'label': 'Filter Name',
                        'value': '',
                        'children': [
                            {
                                'label': 'Channel Regex',
                                'children': [],
                                'seed': {
                                    'value': '^',
                                    'predicate': regexPredicate
                                }
                            },
                            {
                                'label': 'Video Regex',
                                'children': [],
                                'seed': {
                                    'value': '^',
                                    'predicate': regexPredicate
                                }
                            },
                            {
                                'label': 'Video Types',
                                'children': [{
                                    'value': VIDEO_TYPE_IDS.GROUPS.ALL,
                                    'predicate': Object.values(VIDEO_TYPE_IDS.GROUPS).concat(Object.values(VIDEO_TYPE_IDS.INDIVIDUALS))
                                }],
                                'seed': {
                                    'value': VIDEO_TYPE_IDS.GROUPS.NONE,
                                    'predicate': Object.values(VIDEO_TYPE_IDS.GROUPS).concat(Object.values(VIDEO_TYPE_IDS.INDIVIDUALS))
                                },
                                'childPredicate': (children) => {
                                    try {
                                        getVideoTypes(children);
                                    } catch ({message}) {
                                        return message;
                                    }
 
                                    return true;
                                }
                            }
                        ]
                    }
                },
                {
                    'label': 'Cutoffs',
                    'children': [
                        {
                            'label': 'Watched (%)',
                            'children': [],
                            'seed': {
                                'childPredicate': ([{'value': boundary}, {value}]) => {
                                    if (boundary === CUTOFF_VALUES[0]) {
                                        return value < 100 ? true : 'Minimum must be less than 100%';
                                    }
 
                                    return value > 0 ? true : 'Maximum must be greater than 0%';
                                },
                                'children': [
                                    {
                                        'value': CUTOFF_VALUES[1],
                                        'predicate': CUTOFF_VALUES
                                    },
                                    {
                                        'value': 100
                                    }
                                ]
                            }
                        },
                        {
                            'label': 'View Count',
                            'children': [],
                            'seed': {
                                'childPredicate': ([{'value': boundary}, {value}]) => {
                                    if (boundary === CUTOFF_VALUES[1]) {
                                        return value > 0 ? true : 'Maximum must be greater than 0';
                                    }
 
                                    return true;
                                },
                                'children': [
                                    {
                                        'value': CUTOFF_VALUES[0],
                                        'predicate': CUTOFF_VALUES
                                    },
                                    {
                                        'value': 0,
                                        'predicate': (value) => Math.floor(value) === value ? true : 'Value must be an integer'
                                    }
                                ]
                            }
                        },
                        {
                            'label': 'Duration (Minutes)',
                            'children': [],
                            'seed': {
                                'childPredicate': ([{'value': boundary}, {value}]) => {
                                    if (boundary === CUTOFF_VALUES[1]) {
                                        return value > 0 ? true : 'Maximum must be greater than 0';
                                    }
 
                                    return true;
                                },
                                'children': [
                                    {
                                        'value': CUTOFF_VALUES[0],
                                        'predicate': CUTOFF_VALUES
                                    },
                                    {
                                        'value': 0
                                    }
                                ]
                            }
                        }
                    ]
                },
                {
                    'label': 'Badges',
                    'children': [
                        {
                            'label': 'Verified',
                            'value': BADGE_VALUES[1],
                            'predicate': BADGE_VALUES
                        },
                        {
                            'label': 'Official Artist',
                            'value': BADGE_VALUES[1],
                            'predicate': BADGE_VALUES
                        }
                    ]
                }
            ]
        };
    })(),
    ([filters, cutoffs, badges]) => ({
        'filters': (() => {
            const getRegex = ({children}) => new RegExp(children.length === 0 ? '' :
                children.map(({value}) => `(${value})`).join('|'), REGEXP_FLAGS);
 
            return filters.children.map(({'children': [channel, video, type]}) => ({
                'channels': getRegex(channel),
                'videos': getRegex(video),
                'types': type.children.length === 0 ? Object.values(VIDEO_TYPE_IDS.INDIVIDUALS) : getVideoTypes(type.children)
            }));
        })(),
        'cutoffs': cutoffs.children.map(({children}) => {
            const boundaries = [Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY];
 
            for (const {'children': [{'value': boundary}, {value}]} of children) {
                boundaries[boundary === CUTOFF_VALUES[0] ? 0 : 1] = value;
            }
 
            return boundaries;
        }),
        'badges': badges.children.map(({value}) => BADGE_VALUES.indexOf(value))
    }),
    TITLE,
    {
        'headBase': '#ff0000',
        'headButtonExit': '#000000',
        'borderHead': '#ffffff',
        'nodeBase': ['#222222', '#111111'],
        'borderTooltip': '#570000'
    },
    {'zIndex': 10000}
);
 
const KEY_IS_ACTIVE = 'YTSFF_IS_ACTIVE';
 
function getVideoTypes(children) {
    const registry = new Set();
    const register = (value) => {
        if (registry.has(value)) {
            throw new Error(`Overlap found at '${value}'.`);
        }
 
        registry.add(value);
    };
 
    for (const {value} of children) {
        switch (value) {
            case VIDEO_TYPE_IDS.GROUPS.ALL:
                Object.values(VIDEO_TYPE_IDS.INDIVIDUALS).forEach(register);
                break;
 
            case VIDEO_TYPE_IDS.GROUPS.STREAMS:
                register(VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_SCHEDULED);
                register(VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_LIVE);
                register(VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_FINISHED);
                break;
 
            case VIDEO_TYPE_IDS.GROUPS.PREMIERS:
                register(VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERS_SCHEDULED);
                register(VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERS_LIVE);
                break;
 
            default:
                register(value);
        }
    }
 
    return registry;
}
 
// Video element helpers
 
function getSubPage() {
    return document.querySelector('.ytd-page-manager[page-subtype="subscriptions"]');
}
 
function getAllRows() {
    const subPage = getSubPage();
 
    return subPage ? [...subPage.querySelectorAll('ytd-rich-grid-row')] : [];
}
 
function getAllSections() {
    const subPage = getSubPage();
 
    return subPage ? [...subPage.querySelectorAll('ytd-rich-section-renderer:not(:first-child)')] : [];
}
 
function getAllVideos(row) {
    return [...row.querySelectorAll('ytd-rich-item-renderer')];
}
 
function firstWordEquals(element, word) {
    return element.innerText.split(' ')[0] === word;
}
 
function getVideoBadges(video) {
    return video.querySelectorAll('.video-badge');
}
 
function getChannelBadges(video) {
    const container = video.querySelector('ytd-badge-supported-renderer.ytd-channel-name');
 
    return container ? [...container.querySelectorAll('.badge')] : [];
}
 
function getMetadataLine(video) {
    return video.querySelector('#metadata-line');
}
 
function isScheduled(video) {
    return VIDEO_PREDICATES[VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_SCHEDULED](video) ||
        VIDEO_PREDICATES[VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERS_SCHEDULED](video);
}
 
function getUploadTimeNode(video) {
    const children = [...getMetadataLine(video).children].filter((child) => child.matches('.inline-metadata-item'));
 
    return children.length > 1 ? children[1] : null;
}
 
// Config testers
 
const VIDEO_PREDICATES = {
    [VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_SCHEDULED]: (video) => {
        const metadataLine = getMetadataLine(video);
 
        return firstWordEquals(metadataLine, 'Scheduled');
    },
    [VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_LIVE]: (video) => {
        for (const badge of getVideoBadges(video)) {
            if (firstWordEquals(badge, 'LIVE')) {
                return true;
            }
        }
 
        return false;
    },
    [VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_FINISHED]: (video) => {
        const uploadTimeNode = getUploadTimeNode(video);
 
        return uploadTimeNode && firstWordEquals(uploadTimeNode, 'Streamed');
    },
    [VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERS_SCHEDULED]: (video) => {
        const metadataLine = getMetadataLine(video);
 
        return firstWordEquals(metadataLine, 'Premieres');
    },
    [VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERS_LIVE]: (video) => {
        for (const badge of getVideoBadges(video)) {
            if (firstWordEquals(badge, 'PREMIERING') || firstWordEquals(badge, 'PREMIERE')) {
                return true;
            }
        }
 
        return false;
    },
    [VIDEO_TYPE_IDS.INDIVIDUALS.SHORTS]: (video) => {
        return video.querySelector('ytd-rich-grid-slim-media')?.isShort ?? false;
    },
    [VIDEO_TYPE_IDS.INDIVIDUALS.NORMAL]: (video) => {
        const {innerText} = getUploadTimeNode(video);
 
        return new RegExp('^\\d+ .+ ago$').test(innerText);
    }
};
 
const CUTOFF_GETTERS = [
    // Watched %
    (video) => {
        const progressBar = video.querySelector('#progress');
 
        if (!progressBar) {
            return 0;
        }
 
        return Number.parseInt(progressBar.style.width.slice(0, -1));
    },
    // View count
    (video) => {
        if (isScheduled(video)) {
            return 0;
        }
 
        const {innerText} = [...getMetadataLine(video).children].find((child) => child.matches('.inline-metadata-item'));
        const [valueString] = innerText.split(' ');
        const lastChar = valueString.slice(-1);
 
        if (/\d/.test(lastChar)) {
            return Number.parseInt(valueString);
        }
 
        const valueNumber = Number.parseFloat(valueString.slice(0, -1));
 
        switch (lastChar) {
            case 'B':
                return valueNumber * 1000000000;
            case 'M':
                return valueNumber * 1000000;
            case 'K':
                return valueNumber * 1000;
        }
 
        return valueNumber;
    },
    // Duration (minutes)
    (video) => {
        const timeElement = video.querySelector('ytd-thumbnail-overlay-time-status-renderer');
 
        let minutes = 0;
 
        if (timeElement) {
            const timeParts = timeElement.innerText.split(':').map((_) => Number.parseInt(_));
 
            let timeValue = 1 / 60;
 
            for (let i = timeParts.length - 1; i >= 0; --i) {
                minutes += timeParts[i] * timeValue;
 
                timeValue *= 60;
            }
        }
 
        return Number.isNaN(minutes) ? 0 : minutes;
    }
];
 
const BADGE_PREDICATES = [
    // Verified
    (video) => getChannelBadges(video)
        .some((badge) => badge.classList.contains('badge-style-type-verified')),
    // Official Artist
    (video) => getChannelBadges(video)
        .some((badge) => badge.classList.contains('badge-style-type-verified-artist'))
];
 
// Hider functions
 
function loadVideo(video) {
    return new Promise((resolve) => {
        const test = () => {
            if (video.querySelector('#interaction.yt-icon-button')) {
                resolve();
            }
        };
 
        test();
 
        new MutationObserver(test)
            .observe(video, {
                'childList': true,
                'subtree': true,
                'attributes': true,
                'attributeOldValue': true
            });
    });
}
 
function shouldHide({filters, cutoffs, badges}, video) {
    for (let i = 0; i < BADGE_PREDICATES.length; ++i) {
        if (badges[i] !== 1 && Boolean(badges[i]) !== BADGE_PREDICATES[i](video)) {
            return true;
        }
    }
 
    for (let i = 0; i < CUTOFF_GETTERS.length; ++i) {
        const [lowerBound, upperBound] = cutoffs[i];
        const value = CUTOFF_GETTERS[i](video);
 
        if (value < lowerBound || value > upperBound) {
            return true;
        }
    }
 
    const channelName = video.querySelector('ytd-channel-name#channel-name')?.innerText;
    const videoName = video.querySelector('#video-title').innerText;
 
    for (const {'channels': channelRegex, 'videos': videoRegex, types} of filters) {
        if (
            (!channelName || channelRegex.test(channelName)) &&
            videoRegex.test(videoName)
        ) {
            for (const type of types) {
                if (VIDEO_PREDICATES[type](video)) {
                    return true;
                }
            }
        }
    }
 
    return false;
}
 
const moveList = (() => {
    const list = [];
 
    let hasReverted = false;
 
    return {
        'add'(doAct, element, destination) {
            if (doAct) {
                hasReverted = false;
            }
 
            list.push({element, destination, 'origin': element.parentElement});
 
            if (doAct) {
                destination.appendChild(element);
            }
        },
        'revert'(doErase) {
            if (!hasReverted) {
                hasReverted = true;
 
                for (let i = list.length - 1; i >= 0; --i) {
                    const {origin, element} = list[i];
 
                    origin.prepend(element);
                }
            }
 
            if (doErase) {
                list.length = 0;
            }
        },
        'ensure'() {
            if (!hasReverted) {
                return;
            }
 
            hasReverted = false;
 
            for (const {element, destination} of list) {
                destination.appendChild(element);
            }
        }
    };
})();
 
const hideList = (() => {
    const list = [];
 
    let hasReverted = false;
 
    function hide(element, doHide) {
        element.hidden = false;
 
        if (doHide) {
            element.style.display = 'none';
        } else {
            element.style.removeProperty('display');
        }
    }
 
    return {
        'add'(doAct, element, doHide = true) {
            if (doAct) {
                hasReverted = false;
            }
 
            list.push({element, doHide, 'wasHidden': element.hidden});
 
            if (doAct) {
                hide(element, doHide);
            }
        },
        'revert'(doErase) {
            if (!hasReverted) {
                hasReverted = true;
 
                for (const {element, doHide, wasHidden} of list) {
                    hide(element, !doHide);
 
                    element.hidden = wasHidden;
                }
            }
 
            if (doErase) {
                list.length = 0;
            }
        },
        'ensure'() {
            if (!hasReverted) {
                return;
            }
 
            hasReverted = false;
 
            for (const {element, doHide} of list) {
                hide(element, doHide);
            }
        }
    };
})();
 
let partialGroup;
 
async function hideFromRows(config, doAct, groups = getAllRows()) {
    for (const group of groups) {
        const videos = getAllVideos(group);
        const [{itemsPerRow, parentElement}] = videos;
 
        let lossCount = 0;
 
        // Process all videos in the row in parallel
        await Promise.all(videos.map((video) => new Promise(async (resolve) => {
            await loadVideo(video);
 
            if (shouldHide(config, video)) {
                hideList.add(doAct, video);
 
                if (partialGroup) {
                    // Allows things to be put back in the right order
                    moveList.add(doAct, video, partialGroup.container);
                }
 
                ++lossCount;
            } else if (partialGroup) {
                moveList.add(doAct, video, partialGroup.container);
 
                if (--partialGroup.required <= 0) {
                    partialGroup = undefined;
                }
 
                ++lossCount;
            }
 
            resolve();
        })));
 
        if (!partialGroup) {
            if (lossCount > 0 && lossCount < itemsPerRow) {
                partialGroup = {
                    'container': parentElement,
                    'required': lossCount
                };
            }
        }
 
        // Allow the page to update visually before moving on to the next row
        await new Promise((resolve) => {
            window.setTimeout(resolve, 0);
        });
    }
}
 
const hideFromSections = (() => {
    return async (config, doAct, groups = getAllSections()) => {
        for (const group of groups) {
            const shownVideos = [];
            const backupVideos = [];
 
            for (const video of getAllVideos(group)) {
                if (video.hidden) {
                    if (!shouldHide(config, video)) {
                        backupVideos.push(video);
                    }
                } else {
                    shownVideos.push(video);
                }
            }
 
            let lossCount = 0;
 
            // Process all videos in the row in parallel
            await Promise.all(shownVideos.map((video) => new Promise(async (resolve) => {
                await loadVideo(video);
 
                if (shouldHide(config, video)) {
                    hideList.add(doAct, video);
 
                    if (backupVideos.length > 0) {
                        hideList.add(doAct, backupVideos.shift(), false);
                    } else {
                        lossCount++;
                    }
                }
 
                resolve();
            })));
 
            if (lossCount >= shownVideos.length) {
                hideList.add(doAct, group);
            }
 
            // Allow the page to update visually before moving on to the next row
            await new Promise((resolve) => {
                window.setTimeout(resolve, 0);
            });
        }
    };
})();
 
function hideAll(doAct = true, rows, sections, config = $config.get()) {
    return Promise.all([
        hideFromRows(config, doAct, rows),
        hideFromSections(config, doAct, sections)
    ]);
}
 
// Helpers
 
async function hideFromMutations(isActive, mutations) {
    const rows = [];
    const sections = [];
 
    if (isActive()) {
        hideList.ensure();
 
        moveList.ensure();
    }
 
    for (const {addedNodes} of mutations) {
        for (const node of addedNodes) {
            switch (node.tagName) {
                case 'YTD-RICH-GRID-ROW':
                    rows.push(node);
                    break;
 
                case 'YTD-RICH-SECTION-RENDERER':
                    sections.push(node);
            }
        }
    }
 
    hideAll(isActive(), rows, sections);
}
 
function resetConfig(fullReset = true) {
    hideList.revert(fullReset);
 
    moveList.revert(fullReset);
 
    if (fullReset) {
        partialGroup = undefined;
    }
}
 
function getButtonDock() {
    return document
        .querySelector('ytd-browse[page-subtype="subscriptions"]')
        .querySelector('#contents')
        .querySelector('#title-container')
        .querySelector('#top-level-buttons-computed');
}
 
// Button
 
class ClickHandler {
    constructor(button, onShortClick, onLongClick) {
        this.onShortClick = (function() {
            onShortClick();
 
            window.clearTimeout(this.longClickTimeout);
 
            window.removeEventListener('mouseup', this.onShortClick);
        }).bind(this);
 
        this.onLongClick = (function() {
            window.removeEventListener('mouseup', this.onShortClick);
 
            onLongClick();
        }).bind(this);
 
        this.longClickTimeout = window.setTimeout(this.onLongClick, LONG_PRESS_TIME);
 
        window.addEventListener('mouseup', this.onShortClick);
    }
}
 
class Button {
    wasActive;
    isActive = false;
 
    constructor() {
        this.element = this.getNewButton();
 
        this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
 
        GM.getValue(KEY_IS_ACTIVE, true).then((isActive) => {
            this.isActive = isActive;
 
            const videoObserver = new MutationObserver(hideFromMutations.bind(null, () => this.isActive));
 
            $config.init()
                .catch(({message}) => {
                    window.alert(message);
                })
                .then(() => {
                    videoObserver.observe(
                        document.querySelector('ytd-browse[page-subtype="subscriptions"]').querySelector('div#contents'),
                        {childList: true}
                    );
 
                    hideAll(isActive);
                });
 
            this.update();
        });
 
        let resizeCount = 0;
 
        window.addEventListener('resize', () => {
            const resizeId = ++resizeCount;
 
            this.forceInactive();
 
            resetConfig();
 
            const listener = ({detail}) => {
                // column size changed
                if (detail.actionName === 'yt-window-resized') {
                    window.setTimeout(() => {
                        if (resizeId !== resizeCount) {
                            return;
                        }
 
                        this.forceInactive(false);
 
                        resetConfig();
 
                        hideAll(this.isActive);
                    }, 1000);
 
                    document.body.removeEventListener('yt-action', listener);
                }
            };
 
            document.body.addEventListener('yt-action', listener);
        });
 
        document.body.addEventListener('yt-action', (x) => {
            const {detail} = x;
            if (detail.actionName === 'yt-store-grafted-ve-action') {
                hideList.revert(false);
                moveList.revert(false);
            }
        });
    }
 
    forceInactive(doForce = true) {
        if (doForce) {
            // if wasActive isn't undefined, forceInactive was already called
            if (this.wasActive === undefined) {
                // Saves an async call later
                this.wasActive = this.isActive;
                this.isActive = false;
            }
        } else {
            this.isActive = this.wasActive;
            this.wasActive = undefined;
        }
    }
 
    update() {
        if (this.isActive) {
            this.setButtonActive();
        }
    }
 
    addToDOM(button = this.element) {
        const {parentElement} = getButtonDock();
 
        parentElement.appendChild(button);
    }
 
    getNewButton() {
        const openerTemplate = getButtonDock().children[1];
        const button = openerTemplate.cloneNode(false);
 
        if (openerTemplate.innerText) {
            throw new Error('too early');
        }
 
        this.addToDOM(button);
 
        button.innerHTML = openerTemplate.innerHTML;
 
        button.querySelector('yt-button-shape').innerHTML = openerTemplate.querySelector('yt-button-shape').innerHTML;
 
        button.querySelector('a').removeAttribute('href');
 
        // TODO Build the svg via javascript
        button.querySelector('yt-icon').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" focusable="false" viewBox="-50 -50 400 400"><g><path d="M128.25,175.6c1.7,1.8,2.7,4.1,2.7,6.6v139.7l60-51.3v-88.4c0-2.5,1-4.8,2.7-6.6L295.15,65H26.75L128.25,175.6z"/><rect x="13.95" y="0" width="294" height="45"/></g></svg>';
 
        button.querySelector('tp-yt-paper-tooltip').remove();
 
        return button;
    }
 
    hide() {
        this.element.style.display = 'none';
    }
 
    show() {
        this.element.parentElement.appendChild(this.element);
        this.element.style.removeProperty('display');
    }
 
    setButtonActive() {
        if (this.isActive) {
            this.element.querySelector('svg').style.setProperty('fill', 'var(--yt-spec-call-to-action)');
        } else {
            this.element.querySelector('svg').style.setProperty('fill', 'currentcolor');
        }
    }
 
    toggleActive() {
        this.isActive = !this.isActive;
 
        this.setButtonActive();
 
        GM.setValue(KEY_IS_ACTIVE, this.isActive);
 
        if (this.isActive) {
            moveList.ensure();
            hideList.ensure();
        } else {
            moveList.revert(false);
            hideList.revert(false);
        }
    }
 
    onLongClick() {
        $config.edit()
            .then(() => {
                resetConfig();
 
                hideAll(this.isActive);
            })
            .catch((error) => {
                console.error(error);
 
                if (window.confirm(
                    `[${TITLE}]` +
                    '\n\nYour config\'s structure is invalid.' +
                    '\nThis could be due to a script update or your data being corrupted.' +
                    '\n\nError Message:' +
                    `\n${error}` +
                    '\n\nWould you like to erase your data?'
                )) {
                    $config.reset();
                }
            });
    }
 
    async onMouseDown(event) {
        if (event.button === 0) {
            new ClickHandler(this.element, this.toggleActive.bind(this), this.onLongClick.bind(this));
        }
    }
}
 
// Main
 
(() => {
    let button;
 
    const loadButton = () => {
        if (!button) {
            try {
                getButtonDock();
 
                button = new Button();
            } catch (e) {
                const emitter = document.getElementById('page-manager');
                const bound = () => {
                    loadButton();
 
                    emitter.removeEventListener('yt-action', bound);
                };
 
                emitter.addEventListener('yt-action', bound);
 
                return;
            }
        } else if (button.isActive) {
            hideList.ensure();
 
            moveList.ensure();
        }
 
        button.show();
    };
 
    const isGridView = () => {
        return Boolean(
            document.querySelector('ytd-browse[page-subtype="subscriptions"]:not([hidden])') &&
            document.querySelector('ytd-browse > ytd-two-column-browse-results-renderer ytd-rich-grid-row ytd-rich-item-renderer ytd-rich-grid-media')
        );
    };
 
    const onNavigate = ({browseEndpoint}) => {
        if (browseEndpoint) {
            const {params, browseId} = browseEndpoint;
 
            if ((params === 'MAE%3D' || (!params && (!button || isGridView()))) && browseId === 'FEsubscriptions') {
                const emitter = document.querySelector('ytd-app');
                const event = 'yt-action';
 
                if (button || isGridView()) {
                    const listener = ({detail}) => {
                        if (detail.actionName === 'ytd-update-elements-per-row-action') {
                            loadButton();
 
                            emitter.removeEventListener(event, listener);
                        }
                    };
 
                    emitter.addEventListener(event, listener);
                } else {
                    const listener = ({detail}) => {
                        if (detail.actionName === 'ytd-update-grid-state-action') {
                            if (isGridView()) {
                                loadButton();
                            }
 
                            emitter.removeEventListener(event, listener);
                        }
                    };
 
                    emitter.addEventListener(event, listener);
                }
 
                return;
            }
        }
 
        if (button) {
            button.hide();
 
            if (button.isActive) {
                moveList.revert(false);
                hideList.revert(false);
            }
        }
    };
 
    document.body.addEventListener('yt-navigate-finish', ({detail}) => {
        onNavigate(detail.endpoint);
    });
})();