diff --git a/README.md b/README.md index e6c6e373..8b76860e 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 [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 diff --git a/src/sponsorblock.js b/src/sponsorblock.js index 096ca25a..f6a26974 100644 --- a/src/sponsorblock.js +++ b/src/sponsorblock.js @@ -411,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 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);