Add hide watched videos setting

Author: Luzijano

_locales/en/messages.json

@@ -789,6 +789,9 @@
   "hideWatchedVideos": {
     "message": "Hide watched videos"
   },
+  "hideWatchedVideosThreshold": {
+    "message": "Hide watched videos at"
+  },
   "high": {
     "message": "High"
   },

js&css/extension/init.js

@@ -11,6 +11,7 @@ window.addEventListener('yt-navigate-finish', function () {
 	extension.features.trackWatchedVideos();
 	extension.features.thumbnailsQuality();
 	extension.features.stickyNavigation();
+	extension.features.hideWatchedVideos();
 	extension.features.hideSponsoredVideosOnHome?.();
 });
 
@@ -46,6 +47,7 @@ extension.events.on('init', function () {
 	extension.features.disableThumbnailPlayback();
 	extension.features.muteThumbnailPreviews();
 	extension.features.markWatchedVideos();
+	extension.features.hideWatchedVideos();
 	extension.features.relatedVideos();
 	extension.features.sidePanels();
 	extension.features.stickyNavigation();

js&css/extension/www.youtube.com/general/general.js

@@ -703,6 +703,115 @@ extension.features.trackWatchedVideos = function () {
 	}
 };
 
+/*--------------------------------------------------------------
+# HIDE WATCHED VIDEOS
+--------------------------------------------------------------*/
+
+extension.features.hideWatchedVideos = function (anything) {
+	var enabled = anything === true || extension.storage.get('hide_watched_videos') === true;
+	var selector = [
+		'ytd-compact-video-renderer',
+		'ytd-rich-item-renderer',
+		'ytd-video-renderer',
+		'ytd-grid-video-renderer',
+		'ytd-playlist-video-renderer',
+		'ytd-reel-item-renderer'
+	].join(',');
+
+	function getVideoId(renderer) {
+		var link = renderer.querySelector('a[href*="/watch"], a[href*="/shorts/"]');
+		var href = link && link.href;
+
+		if (!href) {
+			return '';
+		}
+
+		var queryId = extension.functions.getUrlParameter(href, 'v');
+
+		if (queryId) {
+			return queryId;
+		}
+
+		var shortsMatch = href.match(/\/shorts\/([^?&/]+)/);
+
+		return shortsMatch ? shortsMatch[1] : '';
+	}
+
+	function getWatchedPercent(renderer) {
+		if (renderer.querySelector('ytd-thumbnail-overlay-watched-status-renderer')) {
+			return 100;
+		}
+
+		var progress = renderer.querySelector('ytd-thumbnail-overlay-resume-playback-renderer #progress, #progress.ytd-thumbnail-overlay-resume-playback-renderer');
+
+		if (progress && progress.style && progress.style.width) {
+			var width = parseFloat(progress.style.width);
+
+			if (!Number.isNaN(width)) {
+				return width;
+			}
+		}
+
+		var videoId = getVideoId(renderer);
+		var watched = extension.storage.get('watched');
+
+		if (videoId && watched && watched[videoId]) {
+			return 100;
+		}
+
+		return 0;
+	}
+
+	function apply() {
+		var threshold = parseInt(extension.storage.get('hide_watched_videos_threshold'), 10);
+
+		if (Number.isNaN(threshold)) {
+			threshold = 90;
+		}
+
+		threshold = Math.max(1, Math.min(100, threshold));
+
+		document.querySelectorAll(selector).forEach(function (renderer) {
+			var hide = enabled && getWatchedPercent(renderer) >= threshold;
+
+			renderer.toggleAttribute('it-hide-watched-video', hide);
+			renderer.style.display = hide ? 'none' : '';
+		});
+	}
+
+	if (extension.features.hideWatchedVideos.observer) {
+		extension.features.hideWatchedVideos.observer.disconnect();
+		extension.features.hideWatchedVideos.observer = null;
+	}
+
+	apply();
+
+	if (enabled) {
+		var scheduled = false;
+		var schedule = function () {
+			if (scheduled) {
+				return;
+			}
+
+			scheduled = true;
+			requestAnimationFrame(function () {
+				scheduled = false;
+				apply();
+			});
+		};
+
+		extension.features.hideWatchedVideos.observer = new MutationObserver(schedule);
+		extension.features.hideWatchedVideos.observer.observe(document.documentElement, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ['style']
+		});
+	}
+};
+
+extension.features.hideWatchedVideosThreshold = extension.features.hideWatchedVideos;
+
 /*--------------------------------------------------------------
 # THUMBNAILS QUALITY
 --------------------------------------------------------------*/

menu/skeleton-parts/general.js

@@ -468,7 +468,27 @@ extension.skeleton.main.layers.section.general = {
 				},
 				hide_watched_videos: {
 					component: 'switch',
-					text: 'hideWatchedVideos'
+					text: 'hideWatchedVideos',
+					on: {
+						click: function () {
+							setTimeout(() => {
+								if (satus.storage.get('hide_watched_videos')) {
+									if (!satus.storage.get('track_watched_videos')) {
+										this.previousSibling.click();
+									}
+								}
+							}, 250);
+						}
+					}
+				},
+				hide_watched_videos_threshold: {
+					component: 'slider',
+					variant: 'row',
+					text: 'hideWatchedVideosThreshold',
+					min: 1,
+					max: 100,
+					step: 1,
+					value: 90
 				},
 				hide_watch_later: {
 					component: 'switch',

tests/unit/hide-watched-videos.test.js

@@ -0,0 +1,32 @@
+const fs = require('fs');
+const path = require('path');
+
+describe('Hide watched videos (#4128)', () => {
+	let initContent;
+	let generalContent;
+	let menuContent;
+
+	beforeAll(() => {
+		initContent = fs.readFileSync(path.join(__dirname, '../../js&css/extension/init.js'), 'utf8');
+		generalContent = fs.readFileSync(path.join(__dirname, '../../js&css/extension/www.youtube.com/general/general.js'), 'utf8');
+		menuContent = fs.readFileSync(path.join(__dirname, '../../menu/skeleton-parts/general.js'), 'utf8');
+	});
+
+	test('initializes the hide watched videos feature', () => {
+		expect(initContent).toContain('extension.features.hideWatchedVideos();');
+	});
+
+	test('hides watched thumbnail renderers by threshold', () => {
+		expect(generalContent).toContain('extension.features.hideWatchedVideos = function');
+		expect(generalContent).toContain('ytd-thumbnail-overlay-watched-status-renderer');
+		expect(generalContent).toContain('ytd-thumbnail-overlay-resume-playback-renderer #progress');
+		expect(generalContent).toContain('hide_watched_videos_threshold');
+		expect(generalContent).toContain('it-hide-watched-video');
+	});
+
+	test('exposes a settings threshold control', () => {
+		expect(menuContent).toContain('hide_watched_videos_threshold');
+		expect(menuContent).toContain("component: 'slider'");
+		expect(menuContent).toContain("text: 'hideWatchedVideosThreshold'");
+	});
+});