Add option to disable thumbnail icons

6 files changed, 27 insertions, 2 deletions

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 9a31e87a..77d68cb7 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -797,6 +797,10 @@
         "message": "Show an icon when a video is entirely an advertisement",
         "description": "Referring to the category pill that is now shown on videos that are entirely sponsor or entirely selfpromo"
     },
+    "fullVideoLabelsOnThumbnails": {
+        "message": "Show labels on video thumbnails as well",
+        "description": "Referring to the category pill that is shown on videos that are entirely sponsor or entirely selfpromo on recommended videos, in searches or on the homepage."
+    },
     "previewColor": {
         "message": "Unsubmitted Color",
         "description": "Referring to submissions that have not been sent to the server yet."
diff --git a/public/options/options.css b/public/options/options.css
index 00035cd0..0ec58be6 100644
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -696,4 +696,9 @@ svg {
 .upsellButton {
     cursor: pointer;
     vertical-align: middle;
+}
+
+.no-bottom-border {
+    border: none !important;
+    padding: 20px 0px 0px 0px !important;
 }
\ No newline at end of file
diff --git a/public/options/options.html b/public/options/options.html
index cd584374..dfaf7856 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -78,7 +78,7 @@
 					</div>
 				</div>
 				
-				<div data-type="toggle" data-sync="fullVideoSegments">
+				<div data-type="toggle" data-sync="fullVideoSegments" class="no-bottom-border">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="fullVideoSegments" type="checkbox" checked>
@@ -90,6 +90,19 @@
 					</div>
 				</div>
 
+				<div data-type="toggle" data-sync="fullVideoLabelsOnThumbnails" 
+						data-dependent-on="fullVideoSegments">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="fullVideoLabelsOnThumbnails" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="fullVideoLabelsOnThumbnails">
+							__MSG_fullVideoLabelsOnThumbnails__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="number-change" data-sync="minDuration">
 					<label class="number-container">
 						<span class="optionLabel">__MSG_minDuration__</span>
diff --git a/src/config.ts b/src/config.ts
index 66ed2bd7..6c3c98e4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -27,6 +27,7 @@ interface SBConfig {
     disableSkipping: boolean;
     muteSegments: boolean;
     fullVideoSegments: boolean;
+    fullVideoLabelsOnThumbnails: boolean;
     manualSkipOnFullVideo: boolean;
     trackViewCount: boolean;
     trackViewCountInPrivate: boolean;
@@ -258,6 +259,7 @@ const syncDefaults = {
     disableSkipping: false,
     muteSegments: true,
     fullVideoSegments: true,
+    fullVideoLabelsOnThumbnails: true,
     manualSkipOnFullVideo: false,
     trackViewCount: true,
     trackViewCountInPrivate: true,
diff --git a/src/content.ts b/src/content.ts
index b5c26df6..cf1bbf8b 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -345,6 +345,7 @@ function contentConfigUpdateListener(changes: StorageChangesObject) {
                 setCategoryColorCSSVariables();
                 break;
             case "fullVideoSegments":
+            case "fullVideoLabelsOnThumbnails":
                 updateAll();
                 break;
         }
diff --git a/src/utils/thumbnails.ts b/src/utils/thumbnails.ts
index e78eb9c5..8b8ed266 100644
--- a/src/utils/thumbnails.ts
+++ b/src/utils/thumbnails.ts
@@ -9,7 +9,7 @@ export async function labelThumbnails(thumbnails: HTMLImageElement[]): Promise<v
 }
 
 export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLElement | null> {
-    if (!Config.config?.fullVideoSegments) {
+    if (!Config.config?.fullVideoSegments || !Config.config?.fullVideoLabelsOnThumbnails) {
         hideThumbnailLabel(thumbnail);
         return null;
     }