Add option to not auto-hide info button

5 files changed, 29 insertions, 3 deletions

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 1bbb96f7..e7275668 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -185,6 +185,9 @@
     "whatInfoButton": {
         "message": "This is the button that opens up a popup in the YouTube page."
     },
+    "autoHideInfoButton": {
+        "message": "Auto-hide Info Button"
+    },
     "hideDeleteButton": {
         "message": "Hide Delete Button On YouTube Player"
     },
diff --git a/public/options/options.html b/public/options/options.html
index eb154a01..c2575e1b 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -198,6 +198,7 @@
 			<br/>
 			<br/>
 			<br/>
+			<br/>
 
 			<div option-type="toggle" sync-option="forceChannelCheck">
 				<label class="switch-container">
@@ -258,9 +259,27 @@
 	
 				<div class="small-description">__MSG_whatInfoButton__</div>
 			</div>
-	
+
 			<br/>
 			<br/>
+
+			<div option-type="toggle" toggle-type="reverse" sync-option="autoHideInfoButton" if-false="hideInfoButtonPlayerControls">
+				<label class="switch-container">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+					<div class="switch-label">
+						__MSG_autoHideInfoButton__
+					</div>
+				</label>
+	
+				<br/>
+				<br/>
+				<br/>
+
+				<br/>
+			</div>
 	
 			<div option-type="toggle" toggle-type="reverse" sync-option="hideDeleteButtonPlayerControls">
 				<label class="switch-container">
diff --git a/src/config.ts b/src/config.ts
index 5f8a66f8..763eea72 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -41,6 +41,7 @@ interface SBConfig {
     ytInfoPermissionGranted: boolean,
     askAboutUnlistedVideos: boolean,
     allowExpirements: boolean,
+    autoHideInfoButton: boolean,
 
     // What categories should be skipped
     categorySelections: CategorySelection[],
@@ -180,6 +181,7 @@ const Config: SBObject = {
         ytInfoPermissionGranted: false,
         askAboutUnlistedVideos: true,
         allowExpirements: true,
+        autoHideInfoButton: true,
 
         categorySelections: [{
             name: "sponsor",
diff --git a/src/content.ts b/src/content.ts
index fb3715b9..edfedc3f 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -1186,7 +1186,8 @@ async function createButtons(): Promise<void> {
     createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker.svg");
 
     const controlsContainer = getControls();
-    if (!onInvidious && controlsContainer && playerButtons["info"]?.button && !controlsWithEventListeners.includes(controlsContainer)) {
+    if (Config.config.autoHideInfoButton && !onInvidious && controlsContainer 
+            && playerButtons["info"]?.button && !controlsWithEventListeners.includes(controlsContainer)) {
         controlsWithEventListeners.push(controlsContainer);
         playerButtons["info"].button.classList.add("hidden");
 
diff --git a/src/options.ts b/src/options.ts
index d1f5b37e..a3bd87d9 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -32,7 +32,8 @@ async function init() {
 
     for (let i = 0; i < optionsElements.length; i++) {
         if ((optionsElements[i].getAttribute("private-mode-only") === "true" && !(await isIncognitoAllowed()))
-            || (optionsElements[i].getAttribute("no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.")) {
+            || (optionsElements[i].getAttribute("no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.")
+            || (optionsElements[i].getAttribute("if-false") && Config.config[optionsElements[i].getAttribute("if-false")])) {
             optionsElements[i].classList.add("hidden");
             continue;
         }