Add thumbnail desaturation feature

This update introduces a feature that allows users to adjust the desaturation level of video thumbnails, helping to mitigate issues with overly vibrant, clickbait thumbnails. The new setting is accessible via the options page and changes are implemented in the video player and thumbnail rendering functions. This user-configurable setting can range from 0 (vibrant) to 100 (black and white).

public/options/options.html

@@ -217,6 +217,15 @@
 					<div class="small-description">__MSG_titleMaxLinesDescription__</div>
 				</div>
 
+                <div data-type="number-change" data-sync="thumbnailDesaturationLevel">
+                    <label class="number-container">
+                        <span class="optionLabel">__MSG_thumbnailDesaturationLevel__</span>
+                        <input type="number" step="25" min="0" max="100" style="width: 50px;">
+                    </label>
+
+                    <div class="small-description">__MSG_whatDesaturateThumbnails__</div>
+                </div>
+
 				<div data-type="toggle" data-sync="keepUnsubmitted">
 					<div class="sb-switch-container">
 						<label class="sb-switch">

src/config/config.ts

@@ -77,6 +77,12 @@ interface SBConfig {
     invidiousInstances: string[];
     keepUnsubmitted: boolean;
     keepUnsubmittedInPrivate: boolean;
+    /**
+     * The level of desaturation applied to thumbnails (0 - 100).
+     *
+     * @type {number}
+     */
+    thumbnailDesaturationLevel: number;
     titleFormatting: TitleFormatting;
     shouldCleanEmojis: boolean;
     onlyTitleCaseInEnglish: boolean;
@@ -161,6 +167,7 @@ const syncDefaults = {
     invidiousInstances: [],
     keepUnsubmitted: true,
     keepUnsubmittedInPrivate: false,
+    thumbnailDesaturationLevel: 0,
     titleFormatting: isEnglish ? TitleFormatting.TitleCase : TitleFormatting.Disable,
     shouldCleanEmojis: true,
     onlyTitleCaseInEnglish: false,
@@ -210,4 +217,4 @@ const localDefaults = {
 };
 
 const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats, true);
-export default Config;
+export default Config;

src/thumbnails/thumbnailRenderer.ts

@@ -532,6 +532,15 @@ function getThumbnailBox(image: HTMLElement, brandingLocation: BrandingLocation)
     }
 }
 
+/**
+ * Applies desaturation effect to the supplied thumbnail.
+ *
+ * @param {HTMLImageElement | HTMLElement} thumbnail - The HTML image element or HTML element representing the thumbnail.
+ */
+function applyThumbnailDesaturation(thumbnail: HTMLImageElement | HTMLElement) {
+    thumbnail.style.filter = `grayscale(${(Config.config!.thumbnailDesaturationLevel / 100)})`;
+}
+
 export async function replaceThumbnail(element: HTMLElement, videoID: VideoID, brandingLocation: BrandingLocation,
         showCustomBranding: ShowCustomBrandingInfo, timestamp?: number): Promise<boolean> {
     const thumbnailSelector = getThumbnailSelector(brandingLocation);
@@ -540,6 +549,13 @@ export async function replaceThumbnail(element: HTMLElement, videoID: VideoID, b
         : await waitFor(() => element.querySelector(thumbnailSelector) as HTMLImageElement);
     const box = getThumbnailBox(image, brandingLocation);
 
+    if (Config.config!.extensionEnabled) {
+        applyThumbnailDesaturation(image)
+    } else {
+        // Reset back to normal
+        image.style.filter = `grayscale(0)`;
+    }
+
     if (showCustomBranding.knownValue === false || !Config.config!.extensionEnabled 
             || shouldReplaceThumbnailsFastCheck(videoID) === false) {
         resetToShowOriginalThumbnail(image, brandingLocation);
@@ -588,6 +604,12 @@ export async function replaceThumbnail(element: HTMLElement, videoID: VideoID, b
             }
 
             thumbnail!.style.removeProperty("display");
+            if (Config.config!.extensionEnabled) {
+                applyThumbnailDesaturation(thumbnail);
+            } else {
+                // Reset back to normal
+                thumbnail.style.filter = "grayscale(0)";
+            }
             if (!(thumbnail instanceof HTMLImageElement) || thumbnail.complete) {
                 if (removeWidth) thumbnail!.style.removeProperty("width");
                 removeBackgroundColor(image, brandingLocation);
@@ -956,4 +978,4 @@ async function getAutogeneratedThumbnailUrl(videoID: VideoID): Promise<string> {
     }
 
     return `https://i.ytimg.com/vi_webp/${videoID}/${thumbnailCode}.webp`;
-}
+}

src/videoBranding/videoBranding.ts

@@ -414,6 +414,7 @@ export function setupOptionChangeListener(): void {
             "useCrowdsourcedTitles",
             "titleFormatting",
             "shouldCleanEmojis",
+            "thumbnailDesaturationLevel",
             "onlyTitleCaseInEnglish",
             "thumbnailFallback",
             "thumbnailFallbackAutogenerated",
@@ -479,4 +480,4 @@ export function getActualShowCustomBranding(showCustomBranding: ShowCustomBrandi
     return showCustomBranding.knownValue === null 
         ? showCustomBranding.actualValue
         : Promise.resolve(showCustomBranding.knownValue);
-}
+}