Don't manually inject css

theRealPadster · Dec 9, 2023 · 22187e0 · 22187e0
1 parent b24637b
commit 22187e0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 30 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -22,6 +22,8 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 
 import { getLocalStorageDataFromKey, getPageLoadedSelector } from './util';
 
+import './css/app.scss';
+
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next
   .use(LanguageDetector)
@@ -53,35 +55,6 @@ const SETTINGS_KEY = 'HidePodcastsEnabled';
 const AGGRESSIVE_MODE_KEY = 'HidePodcastsAggressiveMode';
 const AUDIOBOOKS_KEY = 'HidePodcastsHideAudioBooks';
 
-/** Inject the css that allows us to toggle podcasts and audiobooks */
-const injectCSS = () => {
-  const body = document.body;
-
-  // Inject style if it doesnt have it already
-  if (!body.classList.contains('hide-podcasts--style-injected')) {
-    const style = document.createElement('style');
-    // TODO: Need to add the queue-tabBar bit to block the Podcasts tab on the Your Library page
-    // Because it resets itself when the window resizes and it go in/out of the overflow menu
-    // Technically I should block the li.queue-tabBar-headerItem above it, but can't do that with just CSS
-
-    style.innerHTML =
-      // General rules
-      `.hide-podcasts-enabled .podcast-item {
-        display: none !important;
-      }
-      .hide-audiobooks-enabled .audiobook-item {
-        display: none !important;
-      }`
-      + // Podcasts tab in Your Library page
-      `.hide-podcasts-enabled .queue-tabBar-header a[href="/collection/podcasts"] {
-        display: none !important;
-      }`;
-    style.className = 'hide-podcasts--style';
-    document.head.appendChild(style);
-    body.classList.add('hide-podcasts--style-injected');
-  }
-};
-
 /** Add our class to any podcast elements */
 const tagPodcasts = () => {
   const yourEpisodesInSidebar = document.querySelector('a[href="/collection/episodes"]')?.parentElement;
@@ -196,7 +169,6 @@ async function main() {
   // Run the app logic
   function apply() {
     setState({ podcasts: isEnabled, audiobooks: hideAudioBooks });
-    injectCSS();
     tagPodcasts();
     tagAudioBooks();
   }

diff --git a/src/css/app.scss b/src/css/app.scss
@@ -0,0 +1,16 @@
+// TODO: Need to add the queue-tabBar bit to block the Podcasts tab on the Your Library page
+// Because it resets itself when the window resizes and it go in/out of the overflow menu
+// Technically I should block the li.queue-tabBar-headerItem above it, but can't do that with just CSS
+
+// General rules
+.hide-podcasts-enabled .podcast-item {
+  display: none !important;
+}
+.hide-audiobooks-enabled .audiobook-item {
+  display: none !important;
+}
+
+// Podcasts tab in Your Library page
+.hide-podcasts-enabled .queue-tabBar-header a[href="/collection/podcasts"] {
+  display: none !important;
+};