From d67f3114a915e296f9e4884af83d997eefb6c155 Mon Sep 17 00:00:00 2001
From: Ali Yousuf <aly.yousuf7@gmail.com>
Date: Wed, 25 Oct 2023 02:32:50 -0400
Subject: [PATCH] add feature to quickly toggle on/off sponsorblock

---
 README.md           |  9 +++---
 src/sponsorblock.js |  8 ++----
 src/ui.js           | 67 +++++++++++++++++++++++++++++++--------------
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index 77cfdd5a..30c3a2ac 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,10 @@ YouTube App with extended functionalities
 - [SponsorBlock](https://sponsor.ajay.app/) integration
 - [Autostart](#autostart)
 
-**Note:** Configuration screen can be opened by pressing 🟩 GREEN button on the remote.
+## Remote Buttons
+
+- Press 🟩 GREEN button to open the configuration screen.
+- Press 🟥 RED button to toggle on/off the SponsorBlock.
 
 ## Pre-requisites
 
@@ -25,10 +28,6 @@ YouTube App with extended functionalities
 - Use official webOS/webOS OSE SDK: `ares-install youtube...ipk` (for webOS SDK configuration
   see below)
 
-## Configuration
-
-Configuration screen can be opened by pressing 🟩 GREEN button on the remote.
-
 ### Autostart
 
 In order to autostart an application the following command needs to be executed
diff --git a/src/sponsorblock.js b/src/sponsorblock.js
index a83303a6..4ca6adc6 100644
--- a/src/sponsorblock.js
+++ b/src/sponsorblock.js
@@ -338,12 +338,8 @@ window.addEventListener(
         window.sponsorblock = null;
       }
 
-      if (configRead('enableSponsorBlock')) {
-        window.sponsorblock = new SponsorBlockHandler(videoID);
-        window.sponsorblock.init();
-      } else {
-        console.info('SponsorBlock disabled, not loading');
-      }
+      window.sponsorblock = new SponsorBlockHandler(videoID);
+      window.sponsorblock.init();
     }
   },
   false
diff --git a/src/ui.js b/src/ui.js
index 754a2696..c0281db1 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -8,6 +8,13 @@ window.__spatialNavigation__.keyMode = 'NONE';
 
 const ARROW_KEY_CODE = { 37: 'left', 38: 'up', 39: 'right', 40: 'down' };
 
+const KEY_MAPPINGS = {
+  red: [403, 166],
+  green: [404, 172],
+  yellow: [405, 170],
+  blue: [406, 167]
+};
+
 const uiContainer = document.createElement('div');
 uiContainer.classList.add('ytaf-ui-container');
 uiContainer.style['display'] = 'none';
@@ -62,66 +69,70 @@ uiContainer.innerHTML = `
 
 document.querySelector('body').appendChild(uiContainer);
 
-uiContainer.querySelector('#__adblock').checked = configRead('enableAdBlock');
+function updateUI() {
+  uiContainer.querySelector('#__adblock').checked = configRead('enableAdBlock');
+  uiContainer.querySelector('#__sponsorblock').checked =
+    configRead('enableSponsorBlock');
+  uiContainer.querySelector('#__sponsorblock_sponsor').checked = configRead(
+    'enableSponsorBlockSponsor'
+  );
+  uiContainer.querySelector('#__sponsorblock_intro').checked = configRead(
+    'enableSponsorBlockIntro'
+  );
+  uiContainer.querySelector('#__sponsorblock_outro').checked = configRead(
+    'enableSponsorBlockOutro'
+  );
+  uiContainer.querySelector('#__sponsorblock_interaction').checked = configRead(
+    'enableSponsorBlockInteraction'
+  );
+  uiContainer.querySelector('#__sponsorblock_selfpromo').checked = configRead(
+    'enableSponsorBlockSelfPromo'
+  );
+  uiContainer.querySelector('#__sponsorblock_music_offtopic').checked =
+    configRead('enableSponsorBlockMusicOfftopic');
+}
+
+updateUI();
 uiContainer.querySelector('#__adblock').addEventListener('change', (evt) => {
   configWrite('enableAdBlock', evt.target.checked);
 });
 
-uiContainer.querySelector('#__sponsorblock').checked =
-  configRead('enableSponsorBlock');
 uiContainer
   .querySelector('#__sponsorblock')
   .addEventListener('change', (evt) => {
     configWrite('enableSponsorBlock', evt.target.checked);
   });
 
-uiContainer.querySelector('#__sponsorblock_sponsor').checked = configRead(
-  'enableSponsorBlockSponsor'
-);
 uiContainer
   .querySelector('#__sponsorblock_sponsor')
   .addEventListener('change', (evt) => {
     configWrite('enableSponsorBlockSponsor', evt.target.checked);
   });
 
-uiContainer.querySelector('#__sponsorblock_intro').checked = configRead(
-  'enableSponsorBlockIntro'
-);
 uiContainer
   .querySelector('#__sponsorblock_intro')
   .addEventListener('change', (evt) => {
     configWrite('enableSponsorBlockIntro', evt.target.checked);
   });
 
-uiContainer.querySelector('#__sponsorblock_outro').checked = configRead(
-  'enableSponsorBlockOutro'
-);
 uiContainer
   .querySelector('#__sponsorblock_outro')
   .addEventListener('change', (evt) => {
     configWrite('enableSponsorBlockOutro', evt.target.checked);
   });
 
-uiContainer.querySelector('#__sponsorblock_interaction').checked = configRead(
-  'enableSponsorBlockInteraction'
-);
 uiContainer
   .querySelector('#__sponsorblock_interaction')
   .addEventListener('change', (evt) => {
     configWrite('enableSponsorBlockInteraction', evt.target.checked);
   });
 
-uiContainer.querySelector('#__sponsorblock_selfpromo').checked = configRead(
-  'enableSponsorBlockSelfPromo'
-);
 uiContainer
   .querySelector('#__sponsorblock_selfpromo')
   .addEventListener('change', (evt) => {
     configWrite('enableSponsorBlockSelfPromo', evt.target.checked);
   });
 
-uiContainer.querySelector('#__sponsorblock_music_offtopic').checked =
-  configRead('enableSponsorBlockMusicOfftopic');
 uiContainer
   .querySelector('#__sponsorblock_music_offtopic')
   .addEventListener('change', (evt) => {
@@ -136,7 +147,7 @@ const eventHandler = (evt) => {
     evt.keyCode,
     evt.defaultPrevented
   );
-  if (evt.charCode == 404 || evt.charCode == 172) {
+  if (KEY_MAPPINGS.green.includes(evt.charCode)) {
     console.info('Taking over!');
     evt.preventDefault();
     evt.stopPropagation();
@@ -153,6 +164,19 @@ const eventHandler = (evt) => {
     }
     return false;
   }
+  if (KEY_MAPPINGS.red.includes(evt.charCode)) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (evt.type === 'keydown') {
+      const newValue = !configRead('enableSponsorBlock');
+      configWrite('enableSponsorBlock', newValue);
+      updateUI();
+      showNotification(
+        newValue ? 'SponsorBlock toggled on' : 'SponsorBlock toggled off'
+      );
+    }
+    return false;
+  }
   return true;
 };
 
@@ -192,4 +216,5 @@ export function showNotification(text, time = 3000) {
 
 setTimeout(() => {
   showNotification('Press 🟩 to open YTAF configuration screen');
+  showNotification('Press 🟥 to toggle on/off SponsorBlock');
 }, 2000);