Add option to hide clutter in popup

ajayyy · Nov 8, 2023 · 6d37180 · 6d37180
1 parent 14d50b9
commit 6d37180
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 3 deletions.
diff --git a/public/_locales b/public/_locales
diff --git a/public/options/options.html b/public/options/options.html
@@ -359,6 +359,18 @@
 					<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
 				</div>
 
+				<div data-type="toggle" data-sync="cleanPopup" data-no-safari="true">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="cleanPopup" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="cleanPopup">
+							__MSG_cleanPopup__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="toggle" data-sync="darkMode">
 					<div class="switch-container">
 						<label class="switch">

diff --git a/public/popup.css b/public/popup.css
@@ -130,6 +130,7 @@
   top: 5px;
   right: 5px;
   opacity: 0.5;
+  z-index: 1;
 }
 
 .sbCloseButton:hover {

diff --git a/public/popup.html b/public/popup.html
@@ -20,7 +20,7 @@
         __MSG_betaServerWarning__
       </div>
 
-      <header class="sbPopupLogo">
+      <header id="sbPopupLogo" class="sbPopupLogo">
         <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
         <p class="u-mZ">SponsorBlock</p>
       </header>
@@ -111,7 +111,7 @@ <h1 class="sbHeader">
       </div>
 
       <!-- Your Work box -->
-      <div class="sbYourWorkBox">
+      <div id="sbYourWorkBox" class="sbYourWorkBox">
         <h1 class="sbHeader" style="padding: 8px 15px;">
           __MSG_yourWork__
         </h1>

diff --git a/src/config.ts b/src/config.ts
@@ -77,6 +77,7 @@ interface SBConfig {
     showDeArrowPromotion: boolean;
     showDeArrowInSettings: boolean;
     showZoomToFillError2: boolean;
+    cleanPopup: boolean;
 
     // Used to cache calculated text color info
     categoryPillColors: {
@@ -320,6 +321,7 @@ const syncDefaults = {
     showDeArrowPromotion: false,
     showDeArrowInSettings: true,
     showZoomToFillError2: true,
+    cleanPopup: false,
 
     categoryPillColors: {},
 

diff --git a/src/popup.ts b/src/popup.ts
@@ -108,6 +108,10 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     const PageElements: PageElements = {};
 
     [
+        "sbPopupLogo",
+        "sbYourWorkBox",
+        "videoInfo",
+        "sbFooter",
         "sponsorBlockPopupBody",
         "sponsorblockPopup",
         "sponsorStart",
@@ -198,6 +202,16 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     }
     PageElements.sbDonate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
 
+    if (Config.config.cleanPopup) {
+        PageElements.sbPopupLogo.classList.add("hidden");
+        PageElements.sbYourWorkBox.classList.add("hidden");
+        PageElements.sbFooter.classList.add("hidden");
+        PageElements.sponsorTimesDonateContainer.classList.add("hidden");
+        PageElements.mainControls.classList.add("hidden");
+
+        PageElements.videoInfo.style.marginTop = "10px";
+    }
+
     if (Config.config.testingServer) {
         PageElements.sbBetaServerWarning.classList.remove("hidden");
         PageElements.sbBetaServerWarning.addEventListener("click", function () {