From 2b9aef6693310458fe590d85b3792bd40dbba3fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20G=C3=B6dde?= <goedde@tuta.io>
Date: Fri, 12 Apr 2024 19:29:28 +0200
Subject: [PATCH] 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).
---
 maze-utils                          |  2 +-
 public/_locales                     |  2 +-
 public/options/options.html         |  9 +++++++++
 src/config/config.ts                |  9 ++++++++-
 src/thumbnails/thumbnailRenderer.ts | 24 +++++++++++++++++++++++-
 src/videoBranding/videoBranding.ts  |  3 ++-
 6 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/maze-utils b/maze-utils
index 03608640..c93b5684 160000
--- a/maze-utils
+++ b/maze-utils
@@ -1 +1 @@
-Subproject commit 036086403f675b8fea0e22065f26ba534e351562
+Subproject commit c93b56849c572bb71fc9e43342d01a8cd5a82690
diff --git a/public/_locales b/public/_locales
index 45482163..c290e4bc 160000
--- a/public/_locales
+++ b/public/_locales
@@ -1 +1 @@
-Subproject commit 4548216354adcfed794a3bee42284e2f476a0fb7
+Subproject commit c290e4bc829cb13b3c055c79d4c26a90eeeb39ad
diff --git a/public/options/options.html b/public/options/options.html
index e93d3a16..3738d018 100644
--- a/public/options/options.html
+++ b/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">
diff --git a/src/config/config.ts b/src/config/config.ts
index c54335b3..6ccaac21 100644
--- 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}
+     */
+    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;
\ No newline at end of file
+export default Config;
diff --git a/src/thumbnails/thumbnailRenderer.ts b/src/thumbnails/thumbnailRenderer.ts
index 795ce11a..fcff6ae2 100644
--- 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(${(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`;
-}
\ No newline at end of file
+}
diff --git a/src/videoBranding/videoBranding.ts b/src/videoBranding/videoBranding.ts
index 488e25f7..17ca06e1 100644
--- a/src/videoBranding/videoBranding.ts
+++ b/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);
-}
\ No newline at end of file
+}