☰

YouTube Sub Feed Filter 2

Set up filters for your sub feed

  1. // ==UserScript==
  2. // @name        YouTube Sub Feed Filter 2
  3. // @version     1.48
  4. // @description Set up filters for your sub feed
  5. // @author      Callum Latham
  6. // @namespace   https://greasyfork.org/users/696211-ctl2
  7. // @license     MIT
  8. // @match       *://www.youtube.com/*
  9. // @match       *://youtube.com/*
  10. // @exclude     *://www.youtube.com/embed/*
  11. // @exclude     *://youtube.com/embed/*
  12. // @require     https://update.greasyfork.org/scripts/446506/1537901/%24Config.js
  13. // @grant       GM.setValue
  14. // @grant       GM.getValue
  15. // @grant       GM.deleteValue
  16. // ==/UserScript==
  17.  
  18. /* global $Config */
  19.  
  20. (() => {
  21. // Don't run in frames (e.g. stream chat frame)
  22. if (window.parent !== window) {
  23. 	// noinspection JSAnnotator
  24. 	return;
  25. }
  26.  
  27. // User config
  28.  
  29. const LONG_PRESS_TIME = 400;
  30. const REGEXP_FLAGS = 'i';
  31.  
  32. // Dev config
  33.  
  34. const VIDEO_TYPE_IDS = {
  35. 	GROUPS: {
  36. 		ALL: 'All',
  37. 		STREAMS: 'Streams',
  38. 		PREMIERES: 'Premieres',
  39. 		NONE: 'None',
  40. 	},
  41. 	INDIVIDUALS: {
  42. 		STREAMS_SCHEDULED: 'Scheduled Streams',
  43. 		STREAMS_LIVE: 'Live Streams',
  44. 		STREAMS_FINISHED: 'Finished Streams',
  45. 		PREMIERES_SCHEDULED: 'Scheduled Premieres',
  46. 		PREMIERES_LIVE: 'Live Premieres',
  47. 		SHORTS: 'Shorts',
  48. 		FUNDRAISERS: 'Fundraisers',
  49. 		NORMAL: 'Basic Videos',
  50. 	},
  51. };
  52.  
  53. const CUTOFF_VALUES = [
  54. 	'Minimum',
  55. 	'Maximum',
  56. ];
  57.  
  58. const BADGE_VALUES = [
  59. 	'Exclude',
  60. 	'Include',
  61. 	'Require',
  62. ];
  63.  
  64. function getVideoTypes(children) {
  65. 	const registry = new Set();
  66. 	
  67. 	const register = (value) => {
  68. 		if (registry.has(value)) {
  69. 			throw new Error(`Overlap found at '${value}'.`);
  70. 		}
  71. 		
  72. 		registry.add(value);
  73. 	};
  74. 	
  75. 	for (const {value} of children) {
  76. 		switch (value) {
  77. 		case VIDEO_TYPE_IDS.GROUPS.ALL:
  78. 			Object.values(VIDEO_TYPE_IDS.INDIVIDUALS).forEach(register);
  79. 			break;
  80. 		
  81. 		case VIDEO_TYPE_IDS.GROUPS.STREAMS:
  82. 			register(VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_SCHEDULED);
  83. 			register(VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_LIVE);
  84. 			register(VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_FINISHED);
  85. 			break;
  86. 		
  87. 		case VIDEO_TYPE_IDS.GROUPS.PREMIERES:
  88. 			register(VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERES_SCHEDULED);
  89. 			register(VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERES_LIVE);
  90. 			break;
  91. 		
  92. 		default:
  93. 			register(value);
  94. 		}
  95. 	}
  96. 	
  97. 	return registry;
  98. }
  99.  
  100. const $config = new $Config(
  101. 	'YTSFF_TREE',
  102. 	(() => {
  103. 		const regexPredicate = (value) => {
  104. 			try {
  105. 				RegExp(value);
  106. 			} catch {
  107. 				return 'Value must be a valid regular expression.';
  108. 			}
  109. 			
  110. 			return true;
  111. 		};
  112. 		
  113. 		const videoTypeOptions = Object.values({
  114. 			...VIDEO_TYPE_IDS.GROUPS,
  115. 			...VIDEO_TYPE_IDS.INDIVIDUALS,
  116. 		});
  117. 		
  118. 		return {
  119. 			get: (_, configs) => Object.assign(...configs),
  120. 			children: [
  121. 				{
  122. 					label: 'Filters',
  123. 					get: (() => {
  124. 						const getRegex = ({children}) => children.length === 0 ?
  125. 							null :
  126. 							new RegExp(children.map(({value}) => `(${value})`).join('|'), REGEXP_FLAGS);
  127. 						
  128. 						return ({children}) => ({
  129. 							filters: children.map(({'children': [channel, video, type]}) => ({
  130. 								channels: getRegex(channel),
  131. 								videos: getRegex(video),
  132. 								types: type.children.length === 0 ? Object.values(VIDEO_TYPE_IDS.INDIVIDUALS) : getVideoTypes(type.children),
  133. 							})),
  134. 						});
  135. 					})(),
  136. 					children: [],
  137. 					seed: {
  138. 						label: 'Filter Name',
  139. 						value: '',
  140. 						children: [
  141. 							{
  142. 								label: 'Channel Regex',
  143. 								children: [],
  144. 								seed: {
  145. 									value: '^',
  146. 									predicate: regexPredicate,
  147. 								},
  148. 							},
  149. 							{
  150. 								label: 'Video Regex',
  151. 								children: [],
  152. 								seed: {
  153. 									value: '^',
  154. 									predicate: regexPredicate,
  155. 								},
  156. 							},
  157. 							{
  158. 								label: 'Video Types',
  159. 								children: [
  160. 									{
  161. 										value: VIDEO_TYPE_IDS.GROUPS.ALL,
  162. 										options: videoTypeOptions,
  163. 									},
  164. 								],
  165. 								seed: {
  166. 									value: VIDEO_TYPE_IDS.GROUPS.NONE,
  167. 									options: videoTypeOptions,
  168. 								},
  169. 								childPredicate: (children) => {
  170. 									try {
  171. 										getVideoTypes(children);
  172. 									} catch ({message}) {
  173. 										return message;
  174. 									}
  175. 									
  176. 									return true;
  177. 								},
  178. 							},
  179. 						],
  180. 					},
  181. 				},
  182. 				{
  183. 					label: 'Cutoffs',
  184. 					get: ({children}) => ({
  185. 						cutoffs: children.map(({children}) => {
  186. 							const boundaries = [Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY];
  187. 							
  188. 							for (const {'children': [{'value': boundary}, {value}]} of children) {
  189. 								boundaries[boundary === CUTOFF_VALUES[0] ? 0 : 1] = value;
  190. 							}
  191. 							
  192. 							return boundaries;
  193. 						}),
  194. 					}),
  195. 					children: [
  196. 						{
  197. 							label: 'Watched (%)',
  198. 							children: [],
  199. 							seed: {
  200. 								childPredicate: ([{'value': boundary}, {value}]) => {
  201. 									if (boundary === CUTOFF_VALUES[0]) {
  202. 										return value < 100 ? true : 'Minimum must be less than 100%';
  203. 									}
  204. 									
  205. 									return value > 0 ? true : 'Maximum must be greater than 0%';
  206. 								},
  207. 								children: [
  208. 									{
  209. 										value: CUTOFF_VALUES[1],
  210. 										options: CUTOFF_VALUES,
  211. 									},
  212. 									{value: 100},
  213. 								],
  214. 							},
  215. 						},
  216. 						{
  217. 							label: 'View Count',
  218. 							children: [],
  219. 							seed: {
  220. 								childPredicate: ([{'value': boundary}, {value}]) => {
  221. 									if (boundary === CUTOFF_VALUES[1]) {
  222. 										return value > 0 ? true : 'Maximum must be greater than 0';
  223. 									}
  224. 									
  225. 									return true;
  226. 								},
  227. 								children: [
  228. 									{
  229. 										value: CUTOFF_VALUES[0],
  230. 										options: CUTOFF_VALUES,
  231. 									},
  232. 									{
  233. 										value: 0,
  234. 										predicate: (value) => Math.floor(value) === value ? true : 'Value must be an integer',
  235. 									},
  236. 								],
  237. 							},
  238. 						},
  239. 						{
  240. 							label: 'Duration (Minutes)',
  241. 							children: [],
  242. 							seed: {
  243. 								childPredicate: ([{'value': boundary}, {value}]) => {
  244. 									if (boundary === CUTOFF_VALUES[1]) {
  245. 										return value > 0 ? true : 'Maximum must be greater than 0';
  246. 									}
  247. 									
  248. 									return true;
  249. 								},
  250. 								children: [
  251. 									{
  252. 										value: CUTOFF_VALUES[0],
  253. 										options: CUTOFF_VALUES,
  254. 									},
  255. 									{value: 0},
  256. 								],
  257. 							},
  258. 						},
  259. 					],
  260. 				},
  261. 				{
  262. 					label: 'Badges',
  263. 					get: ({children}) => ({badges: children.map(({value}) => BADGE_VALUES.indexOf(value))}),
  264. 					children: [
  265. 						{
  266. 							label: 'Verified',
  267. 							value: BADGE_VALUES[1],
  268. 							options: BADGE_VALUES,
  269. 						},
  270. 						{
  271. 							label: 'Official Artist',
  272. 							value: BADGE_VALUES[1],
  273. 							options: BADGE_VALUES,
  274. 						},
  275. 					],
  276. 				},
  277. 			],
  278. 		};
  279. 	})(),
  280. 	{
  281. 		headBase: '#c80000',
  282. 		headButtonExit: '#000000',
  283. 		borderHead: '#ffffff',
  284. 		borderTooltip: '#c80000',
  285. 	},
  286. 	{
  287. 		zIndex: 10000,
  288. 		scrollbarColor: 'initial',
  289. 	},
  290. );
  291.  
  292. const KEY_IS_ACTIVE = 'YTSFF_IS_ACTIVE';
  293.  
  294. // State
  295.  
  296. let button;
  297.  
  298. // Video element helpers
  299.  
  300. function getSubPage() {
  301. 	return document.querySelector('.ytd-page-manager[page-subtype="subscriptions"]');
  302. }
  303.  
  304. function getAllVideos() {
  305. 	const subPage = getSubPage();
  306. 	
  307. 	return [...subPage.querySelectorAll('#primary > ytd-rich-grid-renderer > #contents > :not(:first-child):not(ytd-continuation-item-renderer)')];
  308. }
  309.  
  310. function firstWordEquals(element, word) {
  311. 	return element.innerText.split(' ')[0] === word;
  312. }
  313.  
  314. function getVideoBadges(video) {
  315. 	return video.querySelectorAll('.video-badge');
  316. }
  317.  
  318. function getChannelBadges(video) {
  319. 	const container = video.querySelector('ytd-badge-supported-renderer.ytd-channel-name');
  320. 	
  321. 	return container ? [...container.querySelectorAll('.badge')] : [];
  322. }
  323.  
  324. function isShorts(video) {
  325. 	return video.matches('[is-shorts] *');
  326. }
  327.  
  328. function getMetadataLine(video) {
  329. 	return video.querySelector(isShorts(video) ? '.shortsLockupViewModelHostOutsideMetadata' : '#metadata-line');
  330. }
  331.  
  332. function isScheduled(video) {
  333. 	if (isShorts(video)) {
  334. 		return false;
  335. 	}
  336. 	
  337. 	return VIDEO_PREDICATES[VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_SCHEDULED](video)
  338. 		|| VIDEO_PREDICATES[VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERES_SCHEDULED](video);
  339. }
  340.  
  341. function getUploadTimeNode(video) {
  342. 	const children = [...getMetadataLine(video).children].filter((child) => child.matches('.inline-metadata-item'));
  343. 	
  344. 	return children.length > 1 ? children[1] : null;
  345. }
  346.  
  347. // Config testers
  348.  
  349. const VIDEO_PREDICATES = {
  350. 	[VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_SCHEDULED]: (video) => {
  351. 		const metadataLine = getMetadataLine(video);
  352. 		
  353. 		return firstWordEquals(metadataLine, 'Scheduled');
  354. 	},
  355. 	[VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_LIVE]: (video) => {
  356. 		for (const badge of getVideoBadges(video)) {
  357. 			if (firstWordEquals(badge, 'LIVE')) {
  358. 				return true;
  359. 			}
  360. 		}
  361. 		
  362. 		return false;
  363. 	},
  364. 	[VIDEO_TYPE_IDS.INDIVIDUALS.STREAMS_FINISHED]: (video) => {
  365. 		const uploadTimeNode = getUploadTimeNode(video);
  366. 		
  367. 		return uploadTimeNode && firstWordEquals(uploadTimeNode, 'Streamed');
  368. 	},
  369. 	[VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERES_SCHEDULED]: (video) => {
  370. 		const metadataLine = getMetadataLine(video);
  371. 		
  372. 		return firstWordEquals(metadataLine, 'Premieres');
  373. 	},
  374. 	[VIDEO_TYPE_IDS.INDIVIDUALS.PREMIERES_LIVE]: (video) => {
  375. 		for (const badge of getVideoBadges(video)) {
  376. 			if (firstWordEquals(badge, 'PREMIERING') || firstWordEquals(badge, 'PREMIERE')) {
  377. 				return true;
  378. 			}
  379. 		}
  380. 		
  381. 		return false;
  382. 	},
  383. 	[VIDEO_TYPE_IDS.INDIVIDUALS.SHORTS]: isShorts,
  384. 	[VIDEO_TYPE_IDS.INDIVIDUALS.NORMAL]: (video) => {
  385. 		const uploadTimeNode = getUploadTimeNode(video);
  386. 		
  387. 		return uploadTimeNode ? new RegExp('^\\d+ .+ ago$').test(uploadTimeNode.innerText) : false;
  388. 	},
  389. 	[VIDEO_TYPE_IDS.INDIVIDUALS.FUNDRAISERS]: (video) => {
  390. 		for (const badge of getVideoBadges(video)) {
  391. 			if (firstWordEquals(badge, 'Fundraiser')) {
  392. 				return true;
  393. 			}
  394. 		}
  395. 		
  396. 		return false;
  397. 	},
  398. };
  399.  
  400. const CUTOFF_GETTERS = [
  401. 	// Watched %
  402. 	(video) => {
  403. 		const progressBar = video.querySelector('#progress');
  404. 		
  405. 		if (!progressBar) {
  406. 			return 0;
  407. 		}
  408. 		
  409. 		return Number.parseInt(progressBar.style.width.slice(0, -1));
  410. 	},
  411. 	// View count
  412. 	(video) => {
  413. 		if (isScheduled(video)) {
  414. 			return 0;
  415. 		}
  416. 		
  417. 		const {innerText} = [...getMetadataLine(video).children].find(
  418. 			(child) => child.matches('.inline-metadata-item') || child.matches('.shortsLockupViewModelHostMetadataSubhead'),
  419. 		);
  420. 		const [valueString] = innerText.split(' ');
  421. 		const lastChar = valueString.slice(-1);
  422. 		
  423. 		if (/\d/.test(lastChar)) {
  424. 			return Number.parseInt(valueString);
  425. 		}
  426. 		
  427. 		const valueNumber = Number.parseFloat(valueString.slice(0, -1));
  428. 		
  429. 		switch (lastChar) {
  430. 		case 'B':
  431. 			return valueNumber * 1000000000;
  432. 		case 'M':
  433. 			return valueNumber * 1000000;
  434. 		case 'K':
  435. 			return valueNumber * 1000;
  436. 		}
  437. 		
  438. 		return valueNumber;
  439. 	},
  440. 	// Duration (minutes)
  441. 	(video) => {
  442. 		const timeElement = video.querySelector('ytd-thumbnail-overlay-time-status-renderer');
  443. 		
  444. 		let minutes = 0;
  445. 		
  446. 		if (timeElement) {
  447. 			const timeParts = timeElement.innerText.split(':').map((_) => Number.parseInt(_));
  448. 			
  449. 			let timeValue = 1 / 60;
  450. 			
  451. 			for (let i = timeParts.length - 1; i >= 0; --i) {
  452. 				minutes += timeParts[i] * timeValue;
  453. 				
  454. 				timeValue *= 60;
  455. 			}
  456. 		}
  457. 		
  458. 		return Number.isNaN(minutes) ? 0 : minutes;
  459. 	},
  460. ];
  461.  
  462. const BADGE_PREDICATES = [
  463. 	// Verified
  464. 	(video) => getChannelBadges(video)
  465. 		.some((badge) => badge.classList.contains('badge-style-type-verified')),
  466. 	// Official Artist
  467. 	(video) => getChannelBadges(video)
  468. 		.some((badge) => badge.classList.contains('badge-style-type-verified-artist')),
  469. ];
  470.  
  471. // Hider functions
  472.  
  473. function loadVideo(video) {
  474. 	return new Promise((resolve) => {
  475. 		const test = () => {
  476. 			if (video.querySelector('#interaction')) {
  477. 				observer.disconnect();
  478. 				
  479. 				resolve();
  480. 			}
  481. 		};
  482. 		
  483. 		const observer = new MutationObserver(test);
  484. 		
  485. 		observer.observe(video, {
  486. 			childList: true,
  487. 			subtree: true,
  488. 			attributes: true,
  489. 			attributeOldValue: true,
  490. 		});
  491. 		
  492. 		test();
  493. 	});
  494. }
  495.  
  496. function shouldHide({filters, cutoffs, badges}, video) {
  497. 	for (let i = 0; i < BADGE_PREDICATES.length; ++i) {
  498. 		if (badges[i] !== 1 && Boolean(badges[i]) !== BADGE_PREDICATES[i](video)) {
  499. 			return true;
  500. 		}
  501. 	}
  502. 	
  503. 	for (let i = 0; i < CUTOFF_GETTERS.length; ++i) {
  504. 		const [lowerBound, upperBound] = cutoffs[i];
  505. 		const value = CUTOFF_GETTERS[i](video);
  506. 		
  507. 		if (value < lowerBound || value > upperBound) {
  508. 			return true;
  509. 		}
  510. 	}
  511. 	
  512. 	const channelName = video.querySelector('ytd-channel-name#channel-name')?.innerText;
  513. 	const videoName = (
  514. 		video.querySelector('#video-title')
  515. 		|| video.querySelector('.shortsLockupViewModelHostOutsideMetadataTitle')
  516. 	).innerText;
  517. 	
  518. 	for (const {'channels': channelRegex, 'videos': videoRegex, types} of filters) {
  519. 		if ((!channelRegex || channelName && channelRegex.test(channelName)) && (!videoRegex || videoRegex.test(videoName))) {
  520. 			for (const type of types) {
  521. 				if (VIDEO_PREDICATES[type](video)) {
  522. 					return true;
  523. 				}
  524. 			}
  525. 		}
  526. 	}
  527. 	
  528. 	return false;
  529. }
  530.  
  531. const hideList = (() => {
  532. 	const list = [];
  533. 	
  534. 	let hasReverted = true;
  535. 	
  536. 	function hide(element, doHide) {
  537. 		element.hidden = false;
  538. 		
  539. 		if (doHide) {
  540. 			element.style.display = 'none';
  541. 		} else {
  542. 			element.style.removeProperty('display');
  543. 		}
  544. 	}
  545. 	
  546. 	return {
  547. 		'add'(element, doHide = true) {
  548. 			if (button.isActive) {
  549. 				hasReverted = false;
  550. 			}
  551. 			
  552. 			list.push({element, doHide, wasHidden: element.hidden});
  553. 			
  554. 			if (button.isActive) {
  555. 				hide(element, doHide);
  556. 			}
  557. 		},
  558. 		'revert'(doErase) {
  559. 			if (!hasReverted) {
  560. 				hasReverted = true;
  561. 				
  562. 				for (const {element, doHide, wasHidden} of list) {
  563. 					hide(element, !doHide);
  564. 					
  565. 					element.hidden = wasHidden;
  566. 				}
  567. 			}
  568. 			
  569. 			if (doErase) {
  570. 				list.length = 0;
  571. 			}
  572. 		},
  573. 		'ensure'() {
  574. 			if (!hasReverted) {
  575. 				return;
  576. 			}
  577. 			
  578. 			hasReverted = false;
  579. 			
  580. 			for (const {element, doHide} of list) {
  581. 				hide(element, doHide);
  582. 			}
  583. 		},
  584. 	};
  585. })();
  586.  
  587. const showList = (() => {
  588. 	const ATTRIBUTE = 'is-in-first-column';
  589. 	
  590. 	const list = [];
  591. 	const observers = [];
  592. 	
  593. 	let rowLength;
  594. 	let rowRemaining = 1;
  595. 	let hasReverted = true;
  596. 	
  597. 	function disconnectObservers() {
  598. 		for (const observer of observers) {
  599. 			observer.disconnect();
  600. 		}
  601. 		
  602. 		observers.length = 0;
  603. 	}
  604. 	
  605. 	function show(element, isFirst) {
  606. 		const act = isFirst ?
  607. 			() => element.setAttribute(ATTRIBUTE, true) :
  608. 			() => element.removeAttribute(ATTRIBUTE);
  609. 		
  610. 		act();
  611. 		
  612. 		const observer = new MutationObserver(() => {
  613. 			observer.disconnect();
  614. 			
  615. 			act();
  616. 			
  617. 			// Avoids observation cycle that I can't figure out the cause of
  618. 			window.setTimeout(() => {
  619. 				observer.observe(element, {attributeFilter: [ATTRIBUTE]});
  620. 			}, 0);
  621. 		});
  622. 		
  623. 		observer.observe(element, {attributeFilter: [ATTRIBUTE]});
  624. 		
  625. 		observers.push(observer);
  626. 	}
  627. 	
  628. 	return {
  629. 		'add'(element) {
  630. 			if (list.length === 0) {
  631. 				rowLength = element.itemsPerRow ?? 3;
  632. 			}
  633. 			
  634. 			if (button.isActive) {
  635. 				hasReverted = false;
  636. 			}
  637. 			
  638. 			const isFirst = --rowRemaining === 0;
  639. 			
  640. 			if (isFirst) {
  641. 				rowRemaining = rowLength;
  642. 			}
  643. 			
  644. 			list.push({element, isFirst, wasFirst: element.hasAttribute(ATTRIBUTE)});
  645. 			
  646. 			if (button.isActive) {
  647. 				show(element, isFirst);
  648. 			}
  649. 		},
  650. 		'revert'(doErase) {
  651. 			if (!hasReverted) {
  652. 				hasReverted = true;
  653. 				
  654. 				disconnectObservers();
  655. 				
  656. 				for (const {element, wasFirst} of list) {
  657. 					show(element, wasFirst);
  658. 				}
  659. 			}
  660. 			
  661. 			if (doErase) {
  662. 				list.length = 0;
  663. 				rowRemaining = 1;
  664. 			}
  665. 		},
  666. 		'ensure'() {
  667. 			if (!hasReverted) {
  668. 				return;
  669. 			}
  670. 			
  671. 			hasReverted = false;
  672. 			
  673. 			for (const {element, isFirst} of list) {
  674. 				show(element, isFirst);
  675. 			}
  676. 		},
  677. 		'lineFeed'() {
  678. 			rowRemaining = 1;
  679. 		},
  680. 	};
  681. })();
  682.  
  683. async function hideVideo(element, config) {
  684. 	// video, else shorts container
  685. 	if (element.tagName === 'YTD-RICH-ITEM-RENDERER') {
  686. 		await loadVideo(element);
  687. 		
  688. 		if (shouldHide(config, element)) {
  689. 			hideList.add(element);
  690. 		} else {
  691. 			showList.add(element);
  692. 		}
  693. 		
  694. 		return;
  695. 	}
  696. 	
  697. 	let doHide = true;
  698. 	
  699. 	for (const video of element.querySelectorAll('ytd-rich-item-renderer')) {
  700. 		await loadVideo(video);
  701. 		
  702. 		if (shouldHide(config, video)) {
  703. 			hideList.add(video);
  704. 		} else {
  705. 			showList.add(video);
  706. 			
  707. 			doHide = false;
  708. 		}
  709. 	}
  710. 	
  711. 	if (doHide) {
  712. 		hideList.add(element);
  713. 	} else {
  714. 		showList.lineFeed();
  715. 	}
  716. }
  717.  
  718. async function hideVideos(videos = getAllVideos()) {
  719. 	const config = $config.get();
  720. 	
  721. 	for (const video of videos) {
  722. 		await Promise.all([
  723. 			hideVideo(video, config),
  724. 			// Allow the page to update visually before moving on
  725. 			new Promise((resolve) => {
  726. 				window.setTimeout(resolve, 0);
  727. 			}),
  728. 		]);
  729. 	}
  730. }
  731.  
  732. // Helpers
  733.  
  734. function resetConfig(fullReset = true) {
  735. 	hideList.revert(fullReset);
  736. 	showList.revert(fullReset);
  737. }
  738.  
  739. function hideFromMutations(mutations) {
  740. 	const videos = [];
  741. 	
  742. 	for (const {addedNodes} of mutations) {
  743. 		for (const node of addedNodes) {
  744. 			switch (node.tagName) {
  745. 			case 'YTD-RICH-ITEM-RENDERER':
  746. 			case 'YTD-RICH-SECTION-RENDERER':
  747. 				videos.push(node);
  748. 			}
  749. 		}
  750. 	}
  751. 	
  752. 	hideVideos(videos);
  753. }
  754.  
  755. function getButtonDock() {
  756. 	return document
  757. 		.querySelector('ytd-browse[page-subtype="subscriptions"]')
  758. 		.querySelector('#contents')
  759. 		.querySelector('#title-container')
  760. 		.querySelector('#top-level-buttons-computed');
  761. }
  762.  
  763. // Button
  764.  
  765. class ClickHandler {
  766. 	constructor(button, onShortClick, onLongClick) {
  767. 		this.onShortClick = function () {
  768. 			onShortClick();
  769. 			
  770. 			window.clearTimeout(this.longClickTimeout);
  771. 			
  772. 			window.removeEventListener('mouseup', this.onShortClick);
  773. 		}.bind(this);
  774. 		
  775. 		this.onLongClick = function () {
  776. 			window.removeEventListener('mouseup', this.onShortClick);
  777. 			
  778. 			onLongClick();
  779. 		}.bind(this);
  780. 		
  781. 		this.longClickTimeout = window.setTimeout(this.onLongClick, LONG_PRESS_TIME);
  782. 		
  783. 		window.addEventListener('mouseup', this.onShortClick);
  784. 	}
  785. }
  786.  
  787. class Button {
  788. 	wasActive;
  789. 	isActive = false;
  790. 	isDormant = false;
  791. 	
  792. 	constructor() {
  793. 		this.element = (() => {
  794. 			const getSVG = () => {
  795. 				const svgNamespace = 'http://www.w3.org/2000/svg';
  796. 				
  797. 				const bottom = document.createElementNS(svgNamespace, 'path');
  798. 				
  799. 				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');
  800. 				
  801. 				const top = document.createElementNS(svgNamespace, 'rect');
  802. 				
  803. 				top.setAttribute('x', '13.95');
  804. 				top.setAttribute('width', '294');
  805. 				top.setAttribute('height', '45');
  806. 				
  807. 				const g = document.createElementNS(svgNamespace, 'g');
  808. 				
  809. 				g.appendChild(bottom);
  810. 				g.appendChild(top);
  811. 				
  812. 				const svg = document.createElementNS(svgNamespace, 'svg');
  813. 				
  814. 				svg.setAttribute('viewBox', '-50 -50 400 400');
  815. 				svg.setAttribute('focusable', 'false');
  816. 				svg.appendChild(g);
  817. 				
  818. 				return svg;
  819. 			};
  820. 			
  821. 			const getNewButton = () => {
  822. 				const {parentElement, 'children': [, openerTemplate]} = getButtonDock();
  823. 				const button = openerTemplate.cloneNode(false);
  824. 				
  825. 				if (openerTemplate.innerText) {
  826. 					throw new Error('too early');
  827. 				}
  828. 				
  829. 				// 🤷‍♀️
  830. 				const policy = trustedTypes?.createPolicy('policy', {createHTML: (string) => string}) ?? {createHTML: (string) => string};
  831. 				
  832. 				parentElement.appendChild(button);
  833. 				
  834. 				button.innerHTML = policy.createHTML(openerTemplate.innerHTML);
  835. 				
  836. 				button.querySelector('yt-button-shape').innerHTML = policy.createHTML(openerTemplate.querySelector('yt-button-shape').innerHTML);
  837. 				
  838. 				button.querySelector('a').removeAttribute('href');
  839. 				
  840. 				button.querySelector('yt-icon').appendChild(getSVG());
  841. 				
  842. 				button.querySelector('tp-yt-paper-tooltip').remove();
  843. 				
  844. 				return button;
  845. 			};
  846. 			
  847. 			return getNewButton();
  848. 		})();
  849. 		
  850. 		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
  851. 		
  852. 		GM.getValue(KEY_IS_ACTIVE, true).then((isActive) => {
  853. 			this.isActive = isActive;
  854. 			
  855. 			this.update();
  856. 			
  857. 			const videoObserver = new MutationObserver(hideFromMutations);
  858. 			
  859. 			videoObserver.observe(
  860. 				document.querySelector('ytd-browse[page-subtype="subscriptions"]').querySelector('div#contents'),
  861. 				{childList: true},
  862. 			);
  863. 			
  864. 			hideVideos();
  865. 		});
  866. 		
  867. 		let resizeCount = 0;
  868. 		
  869. 		window.addEventListener('resize', () => {
  870. 			const resizeId = ++resizeCount;
  871. 			
  872. 			this.forceInactive();
  873. 			
  874. 			const listener = ({detail}) => {
  875. 				// column size changed
  876. 				if (detail.actionName === 'yt-window-resized') {
  877. 					window.setTimeout(() => {
  878. 						if (resizeId !== resizeCount) {
  879. 							return;
  880. 						}
  881. 						
  882. 						this.forceInactive(false);
  883. 						
  884. 						// Don't bother re-running filters if the sub page isn't shown
  885. 						if (this.isDormant) {
  886. 							return;
  887. 						}
  888. 						
  889. 						resetConfig();
  890. 						
  891. 						hideVideos();
  892. 					}, 1000);
  893. 					
  894. 					document.body.removeEventListener('yt-action', listener);
  895. 				}
  896. 			};
  897. 			
  898. 			document.body.addEventListener('yt-action', listener);
  899. 		});
  900. 	}
  901. 	
  902. 	forceInactive(doForce = true) {
  903. 		if (doForce) {
  904. 			// if wasActive isn't undefined, forceInactive was already called
  905. 			if (this.wasActive === undefined) {
  906. 				// Saves a GM.getValue call later
  907. 				this.wasActive = this.isActive;
  908. 				this.isActive = false;
  909. 			}
  910. 		} else {
  911. 			this.isActive = this.wasActive;
  912. 			this.wasActive = undefined;
  913. 		}
  914. 	}
  915. 	
  916. 	update() {
  917. 		if (this.isActive) {
  918. 			this.setButtonActive();
  919. 		}
  920. 	}
  921. 	
  922. 	setButtonActive() {
  923. 		if (this.isActive) {
  924. 			this.element.querySelector('svg').style.setProperty('fill', 'var(--yt-spec-call-to-action)');
  925. 		} else {
  926. 			this.element.querySelector('svg').style.setProperty('fill', 'currentcolor');
  927. 		}
  928. 	}
  929. 	
  930. 	toggleActive() {
  931. 		this.isActive = !this.isActive;
  932. 		
  933. 		this.setButtonActive();
  934. 		
  935. 		GM.setValue(KEY_IS_ACTIVE, this.isActive);
  936. 		
  937. 		if (this.isActive) {
  938. 			hideList.ensure();
  939. 			showList.ensure();
  940. 		} else {
  941. 			hideList.revert(false);
  942. 			showList.revert(false);
  943. 		}
  944. 	}
  945. 	
  946. 	async onLongClick() {
  947. 		await $config.edit();
  948. 		
  949. 		resetConfig();
  950. 		
  951. 		hideVideos();
  952. 	}
  953. 	
  954. 	onMouseDown(event) {
  955. 		if (event.button === 0) {
  956. 			new ClickHandler(this.element, this.toggleActive.bind(this), this.onLongClick.bind(this));
  957. 		}
  958. 	}
  959. }
  960.  
  961. // Main
  962.  
  963. (() => {
  964. 	const loadButton = async () => {
  965. 		if (button) {
  966. 			button.isDormant = false;
  967. 			
  968. 			hideVideos();
  969. 			
  970. 			return;
  971. 		}
  972. 		
  973. 		try {
  974. 			await $config.ready;
  975. 		} catch (error) {
  976. 			if (!$config.reset) {
  977. 				throw error;
  978. 			}
  979. 			
  980. 			if (!window.confirm(`${error.message}\n\nWould you like to erase your data?`)) {
  981. 				return;
  982. 			}
  983. 			
  984. 			$config.reset();
  985. 		}
  986. 		
  987. 		try {
  988. 			getButtonDock();
  989. 			
  990. 			button = new Button();
  991. 		} catch {
  992. 			const emitter = document.getElementById('page-manager');
  993. 			
  994. 			const bound = () => {
  995. 				loadButton();
  996. 				
  997. 				emitter.removeEventListener('yt-action', bound);
  998. 			};
  999. 			
  1000. 			emitter.addEventListener('yt-action', bound);
  1001. 		}
  1002. 	};
  1003. 	
  1004. 	const isGridView = () => {
  1005. 		return Boolean(
  1006. 			document.querySelector('ytd-browse[page-subtype="subscriptions"]:not([hidden])')
  1007. 			&& document.querySelector('ytd-browse > ytd-two-column-browse-results-renderer ytd-rich-grid-renderer ytd-rich-item-renderer ytd-rich-grid-media'),
  1008. 		);
  1009. 	};
  1010. 	
  1011. 	function onNavigate({detail}) {
  1012. 		if (detail.endpoint.browseEndpoint) {
  1013. 			const {params, browseId} = detail.endpoint.browseEndpoint;
  1014. 			
  1015. 			// Handle navigation to the sub feed
  1016. 			if ((params === 'MAE%3D' || !params && (!button || isGridView())) && browseId === 'FEsubscriptions') {
  1017. 				const emitter = document.querySelector('ytd-app');
  1018. 				const event = 'yt-action';
  1019. 				
  1020. 				if (button || isGridView()) {
  1021. 					loadButton();
  1022. 				} else {
  1023. 					const listener = ({detail}) => {
  1024. 						if (detail.actionName === 'ytd-update-grid-state-action') {
  1025. 							if (isGridView()) {
  1026. 								loadButton();
  1027. 							}
  1028. 							
  1029. 							emitter.removeEventListener(event, listener);
  1030. 						}
  1031. 					};
  1032. 					
  1033. 					emitter.addEventListener(event, listener);
  1034. 				}
  1035. 				
  1036. 				return;
  1037. 			}
  1038. 		}
  1039. 		
  1040. 		// Handle navigation away from the sub feed
  1041. 		if (button) {
  1042. 			button.isDormant = true;
  1043. 			
  1044. 			hideList.revert(true);
  1045. 			showList.revert(true);
  1046. 		}
  1047. 	}
  1048. 	
  1049. 	document.body.addEventListener('yt-navigate-finish', onNavigate);
  1050. })();
  1051. })();