Add video duration filter for recommended videos

Fixes code-charity#2653

Add a feature to filter recommended videos by duration.

* Add a new function `filterRecommendedVideosByDuration` in `js&css/extension/www.youtube.com/general/general.js` to filter recommended videos by duration.
* Call `filterRecommendedVideosByDuration` in the `youtubeHomePage` function in `js&css/extension/www.youtube.com/general/general.js`.
* Add a new setting `recommended_videos_min_duration` in `menu/skeleton-parts/player.js` to specify the minimum video duration for recommendations.
* Add logic to store the user's preferred minimum video duration for recommendations in `menu/index.js`.
* Apply the duration filter to related videos in the `relatedVideos` function in `js&css/extension/www.youtube.com/appearance/sidebar/sidebar.js`.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/code-charity/youtube/issues/2653?shareId=XXXX-XXXX-XXXX-XXXX).

js&css/extension/www.youtube.com/appearance/sidebar/sidebar.js

@@ -35,4 +35,41 @@ extension.features.relatedVideos = function (anything) {
 			window.removeEventListener('click', this.relatedVideos, true);
 		}
 	}
-};
+
+	// Apply the duration filter to related videos
+	var minDuration = extension.storage.get('recommended_videos_min_duration') || 0;
+
+	function filterVideos() {
+		var videos = document.querySelectorAll('ytd-compact-video-renderer, ytd-video-renderer, ytd-grid-video-renderer');
+
+		for (var i = 0, l = videos.length; i < l; i++) {
+			var video = videos[i],
+				durationElement = video.querySelector('span.ytd-thumbnail-overlay-time-status-renderer');
+
+			if (durationElement) {
+				var durationText = durationElement.textContent.trim(),
+					durationParts = durationText.split(':'),
+					durationInSeconds = 0;
+
+				for (var j = 0, k = durationParts.length; j < k; j++) {
+					durationInSeconds = durationInSeconds * 60 + parseInt(durationParts[j]);
+				}
+
+				if (durationInSeconds < minDuration) {
+					video.style.display = 'none';
+				} else {
+					video.style.display = '';
+				}
+			}
+		}
+	}
+
+	filterVideos();
+
+	var observer = new MutationObserver(filterVideos);
+
+	observer.observe(document.documentElement, {
+		childList: true,
+		subtree: true
+	});
+};

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

@@ -82,6 +82,7 @@ extension.features.youtubeHomePage = function (anything) {
 			option === '/feed/library'
 		) {
 			window.addEventListener('click', this.youtubeHomePage, true);
+			extension.features.filterRecommendedVideosByDuration();
 		}
 	}
 };
@@ -578,3 +579,45 @@ extension.features.openNewTab = function () {
 		}
 	}
 }
+
+/*--------------------------------------------------------------
+# FILTER RECOMMENDED VIDEOS BY DURATION
+--------------------------------------------------------------*/
+
+extension.features.filterRecommendedVideosByDuration = function () {
+	var minDuration = extension.storage.get('recommended_videos_min_duration') || 0;
+
+	function filterVideos() {
+		var videos = document.querySelectorAll('ytd-rich-item-renderer, ytd-video-renderer, ytd-grid-video-renderer');
+
+		for (var i = 0, l = videos.length; i < l; i++) {
+			var video = videos[i],
+				durationElement = video.querySelector('span.ytd-thumbnail-overlay-time-status-renderer');
+
+			if (durationElement) {
+				var durationText = durationElement.textContent.trim(),
+					durationParts = durationText.split(':'),
+					durationInSeconds = 0;
+
+				for (var j = 0, k = durationParts.length; j < k; j++) {
+					durationInSeconds = durationInSeconds * 60 + parseInt(durationParts[j]);
+				}
+
+				if (durationInSeconds < minDuration) {
+					video.style.display = 'none';
+				} else {
+					video.style.display = '';
+				}
+			}
+		}
+	}
+
+	filterVideos();
+
+	var observer = new MutationObserver(filterVideos);
+
+	observer.observe(document.documentElement, {
+		childList: true,
+		subtree: true
+	});
+};

menu/index.js

@@ -38,3 +38,6 @@ chrome.runtime.sendMessage({
 		document.body.setAttribute('tab', '');
 	}
 });
+
+// Add logic to store the user's preferred minimum video duration for recommendations
+satus.storage.set('recommended_videos_min_duration', items.recommended_videos_min_duration || 0);

menu/skeleton-parts/player.js

@@ -1052,6 +1052,15 @@ extension.skeleton.main.layers.section.player.on.click = {
 			component: 'switch',
 			text: 'forceSDR',
 			storage: 'player_SDR'
+			},
+		recommended_videos_min_duration: {
+			component: 'slider',
+			text: 'Minimum Duration for Recommended Videos',
+			min: 0,
+			max: 600,
+			step: 10,
+			value: 0,
+			storage: 'recommended_videos_min_duration'
 		}
 	},
 	section_2: {