YouTube Sub Feed Filter 2

Filters your YouTube subscriptions feed.

目前為 2024-08-08 提交的版本,檢視 最新版本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name        YouTube Sub Feed Filter 2
// @version     1.36
// @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/*
// @exclude     *://www.youtube.com/embed/*
// @exclude     *://youtube.com/embed/*
// @require     https://update.greasyfork.org/scripts/446506/1419559/%24Config.js
// @grant       GM.setValue
// @grant       GM.getValue
// @grant       GM.deleteValue
// ==/UserScript==

/* global $Config */

// 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',
		PREMIERES: 'Premieres',
		NONE: 'None',
	},
	INDIVIDUALS: {
		STREAMS_SCHEDULED: 'Scheduled Streams',
		STREAMS_LIVE: 'Live Streams',
		STREAMS_FINISHED: 'Finished Streams',
		PREMIERES_SCHEDULED: 'Scheduled Premieres',
		PREMIERES_LIVE: 'Live Premieres',
		SHORTS: 'Shorts',
		FUNDRAISERS: 'Fundraisers',
		NORMAL: 'Basic Videos',
	},
};

const CUTOFF_VALUES = [
	'Minimum',
	'Maximum',
];

const BADGE_VALUES = [
	'Exclude',
	'Include',
	'Require',
];

const TITLE = 'YouTube Sub Feed Filter';

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.PREMIERES:
				register(VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERES_SCHEDULED);
				register(VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERES_LIVE);
				break;
			
			default:
				register(value);
		}
	}
	
	return registry;
}

const $config = new $Config(
	'YTSFF_TREE',
	(() => {
		const regexPredicate = (value) => {
			try {
				RegExp(value);
			} catch (_) {
				return 'Value must be a valid regular expression.';
			}
			
			return true;
		};
		
		const videoTypeOptions = Object.values({
			...VIDEO_TYPE_IDS.GROUPS,
			...VIDEO_TYPE_IDS.INDIVIDUALS,
		});
		
		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,
										options: videoTypeOptions,
									},
								],
								seed: {
									value: VIDEO_TYPE_IDS.GROUPS.NONE,
									options: videoTypeOptions,
								},
								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],
										options: 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],
										options: 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],
										options: CUTOFF_VALUES,
									},
									{value: 0},
								],
							},
						},
					],
				},
				{
					label: 'Badges',
					children: [
						{
							label: 'Verified',
							value: BADGE_VALUES[1],
							options: BADGE_VALUES,
						},
						{
							label: 'Official Artist',
							value: BADGE_VALUES[1],
							options: 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: '#c80000',
		headButtonExit: '#000000',
		borderHead: '#ffffff',
		nodeBase: ['#222222', '#111111'],
		borderTooltip: '#c80000',
	},
	{
		zIndex: 10000,
		scrollbarColor: 'initial',
	},
);

const KEY_IS_ACTIVE = 'YTSFF_IS_ACTIVE';

// Removing row styling
(() => {
	const styleElement = document.createElement('style');
	document.head.appendChild(styleElement);
	const styleSheet = styleElement.sheet;
	
	const rules = [['[page-subtype=subscriptions] ytd-rich-section-renderer:not(:first-child)', [['display', 'none']]]];
	
	for (let rule of rules) {
		styleSheet.insertRule(`${rule[0]}{${rule[1].map(([property, value]) => `${property}:${value} !important;`).join('')}}`);
	}
})();

// Video element helpers

function getSubPage() {
	return document.querySelector('.ytd-page-manager[page-subtype="subscriptions"]');
}

function getAllVideos() {
	const subPage = getSubPage();
	
	return [...subPage.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.PREMIERES_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.PREMIERES_SCHEDULED]: (video) => {
		const metadataLine = getMetadataLine(video);
		
		return firstWordEquals(metadataLine, 'Premieres');
	},
	[VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERES_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 uploadTimeNode = getUploadTimeNode(video);
		
		return uploadTimeNode ? new RegExp('^\\d+ .+ ago$').test(uploadTimeNode.innerText) : false;
	},
	[VIDEO_TYPE_IDS.INDIVIDUALS.FUNDRAISERS]: (video) => {
		for (const badge of getVideoBadges(video)) {
			if (firstWordEquals(badge, 'Fundraiser')) {
				return true;
			}
		}
		
		return false;
	},
};

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')) {
				observer.disconnect();
				
				resolve();
			}
		};
		
		const observer = new MutationObserver(test);
		
		observer.observe(video, {
			childList: true,
			subtree: true,
			attributes: true,
			attributeOldValue: true,
		});
		
		test();
	});
}

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 hideList = (() => {
	const list = [];
	
	let hasReverted = true;
	
	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);
			}
		},
	};
})();

const hideVideos = (() => {
	const observers = [];
	
	let config;
	let rowLength;
	let rowRemaining;
	
	const forceFirst = (video, isFirst = true) => {
		const observer = new MutationObserver(isFirst ?
				() => {
					observer.disconnect();
					
					video.setAttribute('is-in-first-column', true);
					
					observer.observe(video, {attributeFilter: ['is-in-first-column']});
				} :
				() => {
					observer.disconnect();
					
					video.removeAttribute('is-in-first-column');
					
					observer.observe(video, {attributeFilter: ['is-in-first-column']});
				},
		);
		
		observer.observe(video, {attributeFilter: ['is-in-first-column']});
		
		observers.push(observer);
	};
	
	const update = ([model]) => {
		if (!model.matches(':first-of-type')) {
			return;
		}
		
		config = $config.get();
		rowLength = model.itemsPerRow ?? 3;
		rowRemaining = 1;
		
		for (const observer of observers) {
			observer.disconnect();
		}
		
		observers.length = 0;
	};
	
	return async (doAct, videos = getAllVideos()) => {
		update(videos);
		
		for (const video of videos) {
			await Promise.all([
				new Promise(async (resolve) => {
					await loadVideo(video);
					
					video.removeAttribute('is-in-first-column');
					
					if (shouldHide(config, video)) {
						hideList.add(doAct, video);
					} else if (--rowRemaining === 0) {
						video.setAttribute('is-in-first-column', true);
						
						forceFirst(video);
						
						rowRemaining = rowLength;
					} else {
						forceFirst(video, false);
					}
					
					resolve();
				}),
				// Allow the page to update visually before moving on
				new Promise((resolve) => {
					window.setTimeout(resolve, 0);
				}),
			]);
		}
	};
})();

// Helpers

function hideFromMutations(isActive, mutations) {
	const videos = [];
	
	for (const {addedNodes} of mutations) {
		for (const node of addedNodes) {
			if (node.tagName === 'YTD-RICH-ITEM-RENDERER') {
				videos.push(node);
			}
		}
	}
	
	hideVideos(isActive(), videos);
}

function resetConfig(fullReset = true) {
	hideList.revert(fullReset);
}

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;
	isDormant = false;
	
	constructor() {
		this.element = (() => {
			const getSVG = () => {
				const svgNamespace = 'http://www.w3.org/2000/svg';
				
				const bottom = document.createElementNS(svgNamespace, 'path');
				
				bottom.setAttribute('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');
				
				const top = document.createElementNS(svgNamespace, 'rect');
				
				top.setAttribute('x', '13.95');
				top.setAttribute('width', '294');
				top.setAttribute('height', '45');
				
				const g = document.createElementNS(svgNamespace, 'g');
				
				g.appendChild(bottom);
				g.appendChild(top);
				
				const svg = document.createElementNS(svgNamespace, 'svg');
				
				svg.setAttribute('viewBox', '-50 -50 400 400');
				svg.setAttribute('focusable', 'false');
				svg.appendChild(g);
				
				return svg;
			};
			
			const getNewButton = () => {
				const {parentElement, 'children': [, openerTemplate]} = getButtonDock();
				const button = openerTemplate.cloneNode(false);
				
				if (openerTemplate.innerText) {
					throw new Error('too early');
				}
				
				// 🤷‍♀️
				const policy = trustedTypes?.createPolicy('policy', {createHTML: (string) => string}) ?? {createHTML: (string) => string};
				
				parentElement.appendChild(button);
				
				button.innerHTML = policy.createHTML(openerTemplate.innerHTML);
				
				button.querySelector('yt-button-shape').innerHTML = policy.createHTML(openerTemplate.querySelector('yt-button-shape').innerHTML);
				
				button.querySelector('a').removeAttribute('href');
				
				button.querySelector('yt-icon').appendChild(getSVG());
				
				button.querySelector('tp-yt-paper-tooltip').remove();
				
				return button;
			};
			
			return getNewButton();
		})();
		
		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
		
		GM.getValue(KEY_IS_ACTIVE, true).then((isActive) => {
			this.isActive = isActive;
			
			this.update();
			
			const videoObserver = new MutationObserver(hideFromMutations.bind(null, () => this.isActive));
			
			videoObserver.observe(
				document.querySelector('ytd-browse[page-subtype="subscriptions"]').querySelector('div#contents'),
				{childList: true},
			);
			
			hideVideos(isActive);
		});
		
		let resizeCount = 0;
		
		window.addEventListener('resize', () => {
			const resizeId = ++resizeCount;
			
			this.forceInactive();
			
			const listener = ({detail}) => {
				// column size changed
				if (detail.actionName === 'yt-window-resized') {
					window.setTimeout(() => {
						if (resizeId !== resizeCount) {
							return;
						}
						
						this.forceInactive(false);
						
						// Don't bother re-running filters if the sub page isn't shown
						if (this.isDormant) {
							return;
						}
						
						resetConfig();
						
						hideVideos(this.isActive);
					}, 1000);
					
					document.body.removeEventListener('yt-action', listener);
				}
			};
			
			document.body.addEventListener('yt-action', listener);
		});
	}
	
	forceInactive(doForce = true) {
		if (doForce) {
			// if wasActive isn't undefined, forceInactive was already called
			if (this.wasActive === undefined) {
				// Saves a GM.getValue call later
				this.wasActive = this.isActive;
				this.isActive = false;
			}
		} else {
			this.isActive = this.wasActive;
			this.wasActive = undefined;
		}
	}
	
	update() {
		if (this.isActive) {
			this.setButtonActive();
		}
	}
	
	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) {
			hideList.ensure();
		} else {
			hideList.revert(false);
		}
	}
	
	async onLongClick() {
		await $config.edit();
		
		resetConfig();
		
		hideVideos(this.isActive);
	}
	
	onMouseDown(event) {
		if (event.button === 0) {
			new ClickHandler(this.element, this.toggleActive.bind(this), this.onLongClick.bind(this));
		}
	}
}

// Main

(() => {
	let button;
	
	const loadButton = async () => {
		if (button) {
			button.isDormant = false;
			
			hideVideos(button.isActive);
			
			return;
		}
		
		try {
			await $config.ready();
		} catch (error) {
			if (!$config.reset) {
				throw error;
			}
			
			if (!window.confirm(`${error.message}\n\nWould you like to erase your data?`)) {
				return;
			}
			
			$config.reset();
		}
		
		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);
		}
	};
	
	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-renderer ytd-rich-item-renderer ytd-rich-grid-media'),
		);
	};
	
	function onNavigate({detail}) {
		if (detail.endpoint.browseEndpoint) {
			const {params, browseId} = detail.endpoint.browseEndpoint;
			
			// Handle navigation to the sub feed
			if ((params === 'MAE%3D' || (!params && (!button || isGridView()))) && browseId === 'FEsubscriptions') {
				const emitter = document.querySelector('ytd-app');
				const event = 'yt-action';
				
				if (button || isGridView()) {
					loadButton();
				} else {
					const listener = ({detail}) => {
						if (detail.actionName === 'ytd-update-grid-state-action') {
							if (isGridView()) {
								loadButton();
							}
							
							emitter.removeEventListener(event, listener);
						}
					};
					
					emitter.addEventListener(event, listener);
				}
				
				return;
			}
		}
		
		// Handle navigation away from the sub feed
		if (button) {
			button.isDormant = true;
			
			hideList.revert();
		}
	}
	
	document.body.addEventListener('yt-navigate-finish', onNavigate);
})();