Merge pull request webosbrew#149 from throwaway96/hide-logo-styleshee…

…t-20240330 Hide logo using stylesheet injection
throwaway96 · Mar 31, 2024 · 874f294 · 874f294
2 parents 6c889ad + 22fd5f1
commit 874f294
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/src/config.js b/src/config.js
@@ -29,6 +29,13 @@ const configOptions = new Map([
       default: true,
       desc: 'Skip music and off-topic segments'
     }
+  ],
+  [
+    'hideLogo',
+    {
+      default: false,
+      desc: 'Hide YouTube logo'
+    }
   ]
 ]);
 

diff --git a/src/ui.js b/src/ui.js
@@ -1,7 +1,12 @@
 /*global navigate*/
 import './spatial-navigation-polyfill.js';
+import {
+  configAddChangeListener,
+  configRead,
+  configWrite,
+  configGetDesc
+} from './config.js';
 import './ui.css';
-import { configRead, configWrite, configGetDesc } from './config.js';
 
 // We handle key events ourselves.
 window.__spatialNavigation__.keyMode = 'NONE';
@@ -115,6 +120,7 @@ function createOptionsPanel() {
   elmContainer.appendChild(elmHeading);
 
   elmContainer.appendChild(createConfigCheckbox('enableAdBlock'));
+  elmContainer.appendChild(createConfigCheckbox('hideLogo'));
   elmContainer.appendChild(createConfigCheckbox('enableSponsorBlock'));
 
   const elmBlock = document.createElement('blockquote');
@@ -218,9 +224,25 @@ export function showNotification(text, time = 3000) {
   }, time);
 }
 
-setTimeout(() => {
-  showNotification('Press [GREEN] to open YTAF configuration screen');
-}, 2000);
+/**
+ * Initialize ability to hide YouTube logo in top right corner.
+ */
+function initHideLogo() {
+  const style = document.createElement('style');
+  document.head.appendChild(style);
+
+  /** @type {(hide: boolean) => void} */
+  const setHidden = (hide) => {
+    const visibility = hide ? 'hidden' : 'visible';
+    style.textContent = `ytlr-redux-connect-ytlr-logo-entity { visibility: ${visibility}; }`;
+  };
+
+  setHidden(configRead('hideLogo'));
+
+  configAddChangeListener('hideLogo', (evt) => {
+    setHidden(evt.detail.newValue);
+  });
+}
 
 function applyUIFixes() {
   try {
@@ -252,3 +274,8 @@ function applyUIFixes() {
 }
 
 applyUIFixes();
+initHideLogo();
+
+setTimeout(() => {
+  showNotification('Press [GREEN] to open YTAF configuration screen');
+}, 2000);