Merge pull request #244 from jgoedde/feature/desaturate-thumbnails

Add thumbnail desaturation feature
ajayyy · May 16, 2024 · 379f9e4 · 379f9e4
2 parents f3e9fb9 + 3b41339
commit 379f9e4
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 4 deletions.
diff --git a/public/_locales b/public/_locales
diff --git a/public/options/options.html b/public/options/options.html
@@ -221,6 +221,15 @@
 					<div class="small-description">__MSG_titleMaxLinesDescription__</div>
 				</div>
 
+                <div data-type="number-change" data-sync="thumbnailSaturationLevel">
+                    <label class="number-container">
+                        <span class="optionLabel">__MSG_thumbnailSaturationLevel__</span>
+                        <input type="number" step="25" min="0" max="100" style="width: 50px;">
+                    </label>
+
+                    <div class="small-description">__MSG_whatSaturateThumbnails__</div>
+                </div>
+
 				<div data-type="toggle" data-sync="keepUnsubmitted">
 					<div class="sb-switch-container">
 						<label class="sb-switch">

diff --git a/src/config/config.ts b/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}
+     */
+    thumbnailSaturationLevel: number;
     titleFormatting: TitleFormatting;
     shouldCleanEmojis: boolean;
     onlyTitleCaseInEnglish: boolean;
@@ -163,6 +169,7 @@ const syncDefaults = {
     invidiousInstances: [],
     keepUnsubmitted: true,
     keepUnsubmittedInPrivate: false,
+    thumbnailSaturationLevel: 100,
     titleFormatting: isEnglish ? TitleFormatting.TitleCase : TitleFormatting.Disable,
     shouldCleanEmojis: true,
     onlyTitleCaseInEnglish: false,
@@ -214,4 +221,4 @@ const localDefaults = {
 };
 
 const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats, true);
-export default Config;
+export default Config;
diff --git a/src/thumbnails/thumbnailRenderer.ts b/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(${((100 - Config.config!.thumbnailSaturationLevel) / 100)})`;
+}
+
 export async function replaceThumbnail(element: HTMLElement, videoID: VideoID, brandingLocation: BrandingLocation,
         showCustomBranding: ShowCustomBrandingInfo, timestamp?: number): Promise<boolean> {
     const thumbnailSelector = getThumbnailSelector(brandingLocation);
@@ -540,6 +549,12 @@ 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 {
+        image.style.removeProperty("filter")
+    }
+
     if (showCustomBranding.knownValue === false || !Config.config!.extensionEnabled 
             || shouldReplaceThumbnailsFastCheck(videoID) === false) {
         resetToShowOriginalThumbnail(image, brandingLocation);
@@ -588,6 +603,11 @@ export async function replaceThumbnail(element: HTMLElement, videoID: VideoID, b
             }
 
             thumbnail!.style.removeProperty("display");
+            if (Config.config!.extensionEnabled) {
+                applyThumbnailDesaturation(thumbnail);
+            } else {
+                thumbnail.style.removeProperty("filter");
+            }
             if (!(thumbnail instanceof HTMLImageElement) || thumbnail.complete) {
                 if (removeWidth) thumbnail!.style.removeProperty("width");
                 removeBackgroundColor(image, brandingLocation);
@@ -956,4 +976,4 @@ async function getAutogeneratedThumbnailUrl(videoID: VideoID): Promise<string> {
     }
 
     return `https://i.ytimg.com/vi_webp/${videoID}/${thumbnailCode}.webp`;
-}
+}
diff --git a/src/videoBranding/videoBranding.ts b/src/videoBranding/videoBranding.ts
@@ -414,6 +414,7 @@ export function setupOptionChangeListener(): void {
             "useCrowdsourcedTitles",
             "titleFormatting",
             "shouldCleanEmojis",
+            "thumbnailSaturationLevel",
             "onlyTitleCaseInEnglish",
             "thumbnailFallback",
             "thumbnailFallbackAutogenerated",
@@ -479,4 +480,4 @@ export function getActualShowCustomBranding(showCustomBranding: ShowCustomBrandi
     return showCustomBranding.knownValue === null 
         ? showCustomBranding.actualValue
         : Promise.resolve(showCustomBranding.knownValue);
-}
+}