Added a separate advanced options settings panel with flags

- Added gpu-rasterization flag

config setting `disableHardwareMediaKeys` moved to `flags.disableHardwareMediaKeys`, it will be migrated automatically

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 3.1.0
+
+- Added a separate advanced options settings panel with flags
+  - Added gpu-rasterization flag
+- config setting `disableHardwareMediaKeys` moved to `flags.disableHardwareMediaKeys`, it will be migrated automatically
+
 ## 3.0.0
 
 - Updated to Electron 15

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tidal-hifi",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Tidal on Electron with widevine(hifi) support",
   "main": "src/main.js",
   "scripts": {

src/constants/flags.js

@@ -0,0 +1,6 @@
+const flags = {
+  gpuRasterization: [{ flag: "enable-gpu-rasterization", value: undefined }],
+  disableHardwareMediaKeys: [{ flag: "disable-features", value: "HardwareMediaKeyHandling" }],
+};
+
+module.exports = flags;

src/constants/settings.js

@@ -21,6 +21,10 @@ const settings = {
   },
   singleInstance: "singleInstance",
   disableHardwareMediaKeys: "disableHardwareMediaKeys",
+  flags: {
+    disableHardwareMediaKeys: "flags.disableHardwareMediaKeys",
+    gpuRasterization: "flags.gpuRasterization",
+  },
   mpris: "mpris",
   enableCustomHotkeys: "enableCustomHotkeys",
   trayIcon: "trayIcon",

src/main.js

@@ -17,20 +17,30 @@ const mediaKeys = require("./constants/mediaKeys");
 const mediaInfoModule = require("./scripts/mediaInfo");
 const discordModule = require("./scripts/discord");
 const globalEvents = require("./constants/globalEvents");
+const flagValues = require("./constants/flags");
 
 let mainWindow;
 let icon = path.join(__dirname, "../assets/icon.png");
 
-/**
- * Fix Display Compositor issue.
- */
-app.commandLine.appendSwitch("disable-seccomp-filter-sandbox");
+setFlags();
 
-/**
- * Disable media keys when requested
- */
-if (store.get(settings.disableHardwareMediaKeys)) {
-  app.commandLine.appendSwitch("disable-features", "HardwareMediaKeyHandling");
+function setFlags() {
+  const flags = store.get().flags;
+  if (flags) {
+    for (const [key, value] of Object.entries(flags)) {
+      if (value) {
+        flagValues[key].forEach((flag) => {
+          console.log(`enabling command line switch ${flag.flag} with value ${flag.value}`);
+          app.commandLine.appendSwitch(flag.flag, flag.value);
+        });
+      }
+    }
+  }
+
+  /**
+   * Fix Display Compositor issue.
+   */
+  app.commandLine.appendSwitch("disable-seccomp-filter-sandbox");
 }
 
 /**

src/pages/settings/preload.js

@@ -11,7 +11,8 @@ let trayIcon,
   menuBar,
   mutedArtists,
   singleInstance,
-  disableHardwareMediaKeys;
+  disableHardwareMediaKeys,
+  gpuRasterization;
 
 const { store, settings } = require("./../../scripts/settings");
 const { ipcRenderer } = require("electron");
@@ -35,7 +36,8 @@ function refreshSettings() {
   muteArtists.checked = store.get(settings.muteArtists);
   mutedArtists.value = store.get(settings.mutedArtists).join("\n");
   singleInstance.checked = store.get(settings.singleInstance);
-  disableHardwareMediaKeys.checked = store.get(settings.disableHardwareMediaKeys);
+  disableHardwareMediaKeys.checked = store.get(settings.flags.disableHardwareMediaKeys);
+  gpuRasterization.checked = store.get(settings.flags.gpuRasterization);
 }
 
 /**
@@ -117,6 +119,7 @@ window.addEventListener("DOMContentLoaded", () => {
   mutedArtists = get("mutedArtists");
   singleInstance = get("singleInstance");
   disableHardwareMediaKeys = get("disableHardwareMediaKeys");
+  gpuRasterization = get("gpuRasterization");
 
   refreshSettings();
 
@@ -133,5 +136,6 @@ window.addEventListener("DOMContentLoaded", () => {
   addInputListener(muteArtists, settings.muteArtists);
   addTextAreaListener(mutedArtists, settings.mutedArtists);
   addInputListener(singleInstance, settings.singleInstance);
-  addInputListener(disableHardwareMediaKeys, settings.disableHardwareMediaKeys);
+  addInputListener(disableHardwareMediaKeys, settings.flags.gpuRasterization);
+  addInputListener(gpuRasterization, settings.flags.gpuRasterization);
 });

src/pages/settings/settings.html

@@ -37,6 +37,9 @@
             <input type="radio" name="tabset" id="integrations" />
             <label for="integrations">Integrations</label>
 
+            <!-- advanced tab -->
+            <input type="radio" name="tabset" id="advanced" />
+            <label for="advanced">Advanced</label>
             <!-- about tab -->
             <input type="radio" name="tabset" id="about" />
             <label for="about">About</label>
@@ -122,17 +125,6 @@
                             <span class="slider round"></span>
                         </label>
                       </div>
-                      <div class="option">
-                        <h4>Disable hardware media keys</h4>
-                        <p>
-                            Disable built-in media keys. <br />
-                            Also prevents certain desktop environments from recognizing the chrome MPRIS client separetely from the custom MPRIS client.
-                        </p>
-                        <label class="switch">
-                            <input id="disableHardwareMediaKeys" type="checkbox">
-                            <span class="slider round"></span>
-                        </label>
-                      </div>
                   </div>
                 </section>
                 <section id="api" class="tab-panel">
@@ -196,16 +188,44 @@
                     </div>
                   </div>
               </section>
-                <section id="about" class="tab-panel">
-                  <div class="section">
-                    <img alt="tidal icon" style="width: 100px; height: auto; display: block; margin: 0 auto; margin-bottom: 20px; margin-top: 20px;" src = "./icon.png">
-                    <p style="max-width: 350px; display:block; margin: 0 auto; text-align: center;">
-                      <a id="openExternal" style="text-decoration: underline; cursor: pointer;" data-url="https://github.com/Mastermindzh/tidal-hifi">Tidal-hifi</a> is made by <a id="openExternal" data-url="https://www.rickvanlieshout.com" style="text-decoration: underline; cursor: pointer;">Rick van Lieshout</a>.<br />
-                      It uses <a style="text-decoration: underline; cursor: pointer;" id="openExternal" data-url="https://castlabs.com/">Castlabs'</a> versions of Electron for widevine support.
-                    </p>
 
+              <section id="advanced" class="tab-panel">
+                <div class="section">
+                  <h3>Flags</h3>
+                  <div class="option">
+                    <h4>Disable hardware media keys</h4>
+                    <p>
+                        Disable built-in media keys. <br />
+                        Also prevents certain desktop environments from recognizing the chrome MPRIS client separetely from the custom MPRIS client.
+                    </p>
+                    <label class="switch">
+                        <input id="disableHardwareMediaKeys" type="checkbox">
+                        <span class="slider round"></span>
+                    </label>
                   </div>
-                </section>
+                  <div class="option">
+                    <h4>Enable GPU rasterization</h4>
+                    <p>
+                      Move a part of the rendering to the GPU for increased performance.
+                    </p>
+                    <label class="switch">
+                        <input id="gpuRasterization" type="checkbox">
+                        <span class="slider round"></span>
+                    </label>
+                  </div>
+                </div>
+              </section>
+
+              <!-- about -->
+              <section id="about" class="tab-panel">
+                <div class="section">
+                  <img alt="tidal icon" style="width: 100px; height: auto; display: block; margin: 0 auto; margin-bottom: 20px; margin-top: 20px;" src = "./icon.png">
+                  <p style="max-width: 350px; display:block; margin: 0 auto; text-align: center;">
+                    <a id="openExternal" style="text-decoration: underline; cursor: pointer;" data-url="https://github.com/Mastermindzh/tidal-hifi">Tidal-hifi</a> is made by <a id="openExternal" data-url="https://www.rickvanlieshout.com" style="text-decoration: underline; cursor: pointer;">Rick van Lieshout</a>.<br />
+                    It uses <a style="text-decoration: underline; cursor: pointer;" id="openExternal" data-url="https://castlabs.com/">Castlabs'</a> versions of Electron for widevine support.
+                  </p>
+                </div>
+              </section>
 
               <small>Some settings require a restart of Tidal-hifi. To do so, click the button below:</small>
               <button id="restart" style ="width: 100%">Restart Tidal-hifi</button>

src/scripts/settings.js

@@ -24,6 +24,19 @@ const store = new Store({
     enableCustomHotkeys: false,
     enableDiscord: false,
     windowBounds: { width: 800, height: 600 },
+    flags: {
+      gpuRasterization: true,
+      disableHardwareMediaKeys: false,
+    },
+  },
+  migrations: {
+    "3.1.0": (migrationStore) => {
+      console.log("running migrations for 3.1.0");
+      migrationStore.set(
+        settings.flags.disableHardwareMediaKeys,
+        migrationStore.get("disableHardwareMediaKeys") ?? false
+      );
+    },
   },
 });