add feature to toggle on/off sponsorblock with a single key press

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 [webOS TV CLI tools](https://webostv.developer.lge.com/develop/tools/cli-installation) -
   `ares-install youtube...ipk` (for webOS CLI tools 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

src/config.js

@@ -37,4 +37,7 @@ export function configWrite(key, value) {
   console.info('Setting key', key, 'to', value);
   localConfig[key] = value;
   window.localStorage[CONFIG_KEY] = JSON.stringify(localConfig);
+  if (window.sponsorblock) {
+    window.sponsorblock.updateSkippableCategories();
+  }
 }

src/sponsorblock.js

@@ -94,8 +94,16 @@ class SponsorBlockHandler {
     this.buildOverlay();
   }
 
+  updateSkippableCategories() {
+    this.skippableCategories = this.getSkippableCategories();
+  }
+
   getSkippableCategories() {
     const skippableCategories = [];
+    if (!configRead('enableSponsorBlock')) {
+      return skippableCategories;
+    }
+
     if (configRead('enableSponsorBlockSponsor')) {
       skippableCategories.push('sponsor');
     }
@@ -403,12 +411,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

src/ui.css

@@ -60,3 +60,33 @@
   padding: 0 1em;
   line-height: 0;
 }
+
+.ytaf-remote-button {
+  display: inline-block;
+  width: 21.34px;
+  height: 21.34px;
+}
+
+.ytaf-remote-button::before {
+  content: '\00a0';
+}
+
+.ytaf-remote-button.ytaf-remote-button-red {
+  background-color: #b30000;
+  color: #b30000;
+}
+
+.ytaf-remote-button.ytaf-remote-button-green {
+  background-color: #006600;
+  color: #006600;
+}
+
+.ytaf-remote-button.ytaf-remote-button-yellow {
+  background-color: #e0e000;
+  color: #e0e000;
+}
+
+.ytaf-remote-button.ytaf-remote-button-blue {
+  background-color: #0000cc;
+  color: #0000cc;
+}

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;
 };
 
@@ -173,7 +197,7 @@ export function showNotification(text, time = 3000) {
 
   const elm = document.createElement('div');
   const elmInner = document.createElement('div');
-  elmInner.innerText = text;
+  elmInner.innerHTML = text;
   elmInner.classList.add('message');
   elmInner.classList.add('message-hidden');
   elm.appendChild(elmInner);
@@ -190,6 +214,18 @@ export function showNotification(text, time = 3000) {
   }, time);
 }
 
+function remoteBtnBox(key) {
+  const el = document.createElement('span');
+  el.classList.add('ytaf-remote-button', `ytaf-remote-button-${key}`);
+
+  return el.outerHTML;
+}
+
 setTimeout(() => {
-  showNotification('Press [GREEN] to open YTAF configuration screen');
+  showNotification(
+    `Press ${remoteBtnBox('green')} GREEN to open YTAF configuration screen`
+  );
+  showNotification(
+    `Press ${remoteBtnBox('red')} RED to toggle on/off SponsorBlock`
+  );
 }, 2000);