feat: added custom CSS settings. fixes #213

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### New features
 
+- You can now add custom CSS in the "advanced" settings tab
 - You can now configure the updateFrequency in the settings window
   - Default value is set to 500 and will overwrite the hardcoded value of 100
 

src/constants/settings.js

@@ -15,6 +15,7 @@ const settings = {
     root: "apiSettings",
     port: "apiSettings.port",
   },
+  customCSS: "customCSS",
   disableBackgroundThrottle: "disableBackgroundThrottle",
   disableHardwareMediaKeys: "disableHardwareMediaKeys",
   enableCustomHotkeys: "enableCustomHotkeys",

src/main.js

@@ -172,7 +172,6 @@ app.on("ready", async () => {
     store.get(settings.trayIcon) && addTray(mainWindow, { icon }) && refreshTray();
     store.get(settings.api) && expressModule.run(mainWindow);
     store.get(settings.enableDiscord) && discordModule.initRPC();
-    // mainWindow.webContents.openDevTools();
   } else {
     app.quit();
   }

src/pages/settings/preload.js

@@ -1,5 +1,6 @@
 let adBlock,
   api,
+  customCSS,
   disableBackgroundThrottle,
   disableHardwareMediaKeys,
   enableCustomHotkeys,
@@ -28,6 +29,7 @@ const { app } = remote;
 function refreshSettings() {
   adBlock.checked = store.get(settings.adBlock);
   api.checked = store.get(settings.api);
+  customCSS.value = store.get(settings.customCSS);
   disableBackgroundThrottle.checked = store.get("disableBackgroundThrottle");
   disableHardwareMediaKeys.checked = store.get(settings.flags.disableHardwareMediaKeys);
   enableCustomHotkeys.checked = store.get(settings.enableCustomHotkeys);
@@ -113,6 +115,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
   adBlock = get("adBlock");
   api = get("apiCheckbox");
+  customCSS = get("customCSS");
   disableBackgroundThrottle = get("disableBackgroundThrottle");
   disableHardwareMediaKeys = get("disableHardwareMediaKeys");
   enableCustomHotkeys = get("enableCustomHotkeys");
@@ -134,6 +137,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
   addInputListener(adBlock, settings.adBlock);
   addInputListener(api, settings.api);
+  addTextAreaListener(customCSS, settings.customCSS);
   addInputListener(disableBackgroundThrottle, settings.disableBackgroundThrottle);
   addInputListener(disableHardwareMediaKeys, settings.flags.disableHardwareMediaKeys);
   addInputListener(enableCustomHotkeys, settings.enableCustomHotkeys);

src/pages/settings/settings.html

@@ -226,7 +226,16 @@
                 <input id="updateFrequency" type="number" class="text-input" name="updateFrequency" />
               </div>
             </div>
+            <div class="group__option">
+              <div class="group__description">
+                <h4>Custom CSS</h4>
+                <p>
+                  The css that you put in here will be injected into a style tag in the head of the document.
+                </p>
+              </div>
+            </div>
           </div>
+          <textarea id="customCSS" class="textarea" cols="40" rows="8" spellcheck="false"></textarea>
 
           <div class="group">
             <p class="group__title">Flags</p>

src/preload.js

@@ -7,7 +7,7 @@ const { downloadFile } = require("./scripts/download");
 const statuses = require("./constants/statuses");
 const hotkeys = require("./scripts/hotkeys");
 const globalEvents = require("./constants/globalEvents");
-const { skipArtists, updateFrequency } = require("./constants/settings");
+const { skipArtists, updateFrequency, customCSS } = require("./constants/settings");
 const notificationPath = `${app.getPath("userData")}/notification.jpg`;
 const appName = "Tidal Hifi";
 let currentSong = "";
@@ -143,6 +143,14 @@ const elements = {
   },
 };
 
+function addCustomCss() {
+  window.addEventListener("DOMContentLoaded", () => {
+    const style = document.createElement("style");
+    style.innerHTML = store.get(customCSS);
+    document.head.appendChild(style);
+  });
+}
+
 /**
  * Get the update frequency from the store
  * make sure it returns a number, if not use the default
@@ -486,7 +494,7 @@ if (process.platform === "linux" && store.get(settings.mpris)) {
     console.log("player api not working");
   }
 }
-
+addCustomCss();
 addHotKeys();
 addIPCEventListeners();
 addFullScreenListeners();

src/scripts/settings.js

@@ -12,6 +12,7 @@ const store = new Store({
     apiSettings: {
       port: 47836,
     },
+    customCSS: "",
     disableBackgroundThrottle: true,
     disableHardwareMediaKeys: false,
     enableCustomHotkeys: false,