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,19 @@ 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
+- Fixed the develop "build-unpacked" command
+- Added setting to disable multiple tidal-hifi windows (defaults to true)
+- Added setting to disable HardwareMediaKeyHandling (defaults to false)
+
 ## 2.8.2
 
 - Updated dependencies

README.md

@@ -15,6 +15,7 @@ The web version of [listen.tidal.com](https://listen.tidal.com) running in elect
   - [Using releases](#using-releases)
     - [Snap install](#snap-install)
   - [Arch Linux](#arch-linux)
+  - [Flatpak](#flatpak)
   - [Using source](#using-source)
 - [features](#features)
 - [Integrations](#integrations)
@@ -61,6 +62,14 @@ Arch Linux users can use the AUR to install tidal-hifi:
 trizen tidal-hifi-bin
 ```
 
+### Flatpak
+
+To install via [Flatpak](https://flathub.org/apps/details/com.mastermindzh.tidal-hifi) run the following command:
+
+```sh
+flatpak install flathub com.mastermindzh.tidal-hifi
+```
+
 ### Using source
 
 To install and work with the code on this project follow these steps:

build/electron-builder.unpacked.yml

@@ -1,3 +1,4 @@
 extends: ./build/electron-builder.yml
 linux:
   target:
+    - dir

build/electron-builder.yml

@@ -1,7 +1,7 @@
 appId: com.rickvanlieshout.tidal-hifi
-electronVersion: 8.5.2
+electronVersion: 15.5.2
 electronDownload:
-  version: 8.5.2-wvvmp
+  version: 15.5.2-wvvmp
   mirror: https://github.com/castlabs/electron-releases/releases/download/v
 snap:
   plugs:
@@ -27,7 +27,7 @@ linux:
     StartupNotify: true
     Terminal: false
     Type: Application
-    Categories: Network;Application;Audio;Video
+    Categories: Network;Application;AudioVideo;Audio;Video
     StartupWMClass: tidal-hifi
     X-PulseAudio-Properties: media.role=music
 mac:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tidal-hifi",
-  "version": "2.8.2",
+  "version": "3.1.0",
   "description": "Tidal on Electron with widevine(hifi) support",
   "main": "src/main.js",
   "scripts": {
@@ -24,6 +24,7 @@
   "homepage": "https://github.com/Mastermindzh/tidal-hifi",
   "license": "MIT",
   "dependencies": {
+    "@electron/remote": "^2.0.8",
     "discord-rpc": "^4.0.1",
     "electron-store": "^8.0.1",
     "express": "^4.17.1",
@@ -33,10 +34,9 @@
   },
   "devDependencies": {
     "@mastermindzh/prettier-config": "^1.0.0",
-    "electron": "git+https://github.com/castlabs/electron-releases.git#15.5.2-wvvmp",
+    "electron": "git+https://github.com/castlabs/electron-releases.git#v15.5.2-wvvmp",
     "electron-builder": "^22.14.5",
-    "electron-reload": "^1.5.0",
     "prettier": "^2.5.0"
   },
   "prettier": "@mastermindzh/prettier-config"
-}
+}

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

@@ -19,6 +19,12 @@ const settings = {
     root: "apiSettings",
     port: "apiSettings.port",
   },
+  singleInstance: "singleInstance",
+  disableHardwareMediaKeys: "disableHardwareMediaKeys",
+  flags: {
+    disableHardwareMediaKeys: "flags.disableHardwareMediaKeys",
+    gpuRasterization: "flags.gpuRasterization",
+  },
   mpris: "mpris",
   enableCustomHotkeys: "enableCustomHotkeys",
   trayIcon: "trayIcon",

src/main.js

@@ -1,3 +1,4 @@
+require("@electron/remote/main").initialize();
 const { app, BrowserWindow, globalShortcut, ipcMain } = require("electron");
 const {
   settings,
@@ -16,23 +17,31 @@ 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");
 
-/**
- * Enable live reload in development builds
- */
-if (!app.isPackaged) {
-  require("electron-reload")(`${__dirname}`, {
-    electron: require(`${__dirname}/../node_modules/electron`),
-  });
-}
+setFlags();
 
-/**
- * Fix Display Compositor issue.
- */
-app.commandLine.appendSwitch('disable-seccomp-filter-sandbox');
+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");
+}
 
 /**
  * Update the menuBarVisbility according to the store value
@@ -42,6 +51,23 @@ function syncMenuBarWithStore() {
   mainWindow.setMenuBarVisibility(store.get(settings.menuBar));
 }
 
+/**
+ * Determine whether the current window is the main window
+ * if singleInstance is requested.
+ * If singleInstance isn't requested simply return true
+ * @returns true if singInstance is not requested, otherwise true/false based on whether the current window is the main window
+ */
+function isMainInstanceOrMultipleInstancesAllowed() {
+  if (store.get(settings.singleInstance)) {
+    const gotTheLock = app.requestSingleInstanceLock();
+
+    if (!gotTheLock) {
+      return false;
+    }
+  }
+  return true;
+}
+
 function createWindow(options = {}) {
   // Create the browser window.
   mainWindow = new BrowserWindow({
@@ -50,16 +76,14 @@ function createWindow(options = {}) {
     width: store && store.get(settings.windowBounds.width),
     height: store && store.get(settings.windowBounds.height),
     icon,
-    tray: true,
     backgroundColor: options.backgroundColor,
     webPreferences: {
-      affinity: "window",
       preload: path.join(__dirname, "preload.js"),
       plugins: true,
       devTools: true, // I like tinkering, others might too
-      enableRemoteModule: true,
     },
   });
+  require("@electron/remote/main").enable(mainWindow.webContents);
 
   syncMenuBarWithStore();
 
@@ -101,15 +125,18 @@ function addGlobalShortcuts() {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on("ready", () => {
-  app.allowRendererProcessReuse = true;
-  createWindow();
-  addMenu();
-  createSettingsWindow();
-  addGlobalShortcuts();
-  store.get(settings.trayIcon) && addTray({ icon }) && refreshTray();
-  store.get(settings.api) && expressModule.run(mainWindow);
-  store.get(settings.enableDiscord) && discordModule.initRPC();
-  // mainWindow.webContents.openDevTools();
+  if (isMainInstanceOrMultipleInstancesAllowed()) {
+    createWindow();
+    addMenu();
+    createSettingsWindow();
+    addGlobalShortcuts();
+    store.get(settings.trayIcon) && addTray({ icon }) && refreshTray();
+    store.get(settings.api) && expressModule.run(mainWindow);
+    store.get(settings.enableDiscord) && discordModule.initRPC();
+    // mainWindow.webContents.openDevTools();
+  } else {
+    app.quit();
+  }
 });
 
 app.on("activate", function () {
@@ -120,23 +147,27 @@ app.on("activate", function () {
   }
 });
 
+app.on("browser-window-created", (_, window) => {
+  require("@electron/remote/main").enable(window.webContents);
+});
+
 // IPC
-ipcMain.on(globalEvents.updateInfo, (event, arg) => {
+ipcMain.on(globalEvents.updateInfo, (_event, arg) => {
   mediaInfoModule.update(arg);
 });
 
-ipcMain.on(globalEvents.hideSettings, (event, arg) => {
+ipcMain.on(globalEvents.hideSettings, (_event, _arg) => {
   hideSettingsWindow();
 });
-ipcMain.on(globalEvents.showSettings, (event, arg) => {
+ipcMain.on(globalEvents.showSettings, (_event, _arg) => {
   showSettingsWindow();
 });
 
-ipcMain.on(globalEvents.refreshMenuBar, (event, arg) => {
+ipcMain.on(globalEvents.refreshMenuBar, (_event, _arg) => {
   syncMenuBarWithStore();
 });
 
-ipcMain.on(globalEvents.storeChanged, (event, arg) => {
+ipcMain.on(globalEvents.storeChanged, (_event, _arg) => {
   syncMenuBarWithStore();
 
   if (store.get(settings.enableDiscord) && !discordModule.rpc) {
@@ -146,6 +177,6 @@ ipcMain.on(globalEvents.storeChanged, (event, arg) => {
   }
 });
 
-ipcMain.on(globalEvents.error, (event, arg) => {
+ipcMain.on(globalEvents.error, (event, _arg) => {
   console.log(event);
 });

src/pages/settings/preload.js

@@ -9,12 +9,16 @@ let trayIcon,
   api,
   port,
   menuBar,
-  mutedArtists;
+  mutedArtists,
+  singleInstance,
+  disableHardwareMediaKeys,
+  gpuRasterization;
 
 const { store, settings } = require("./../../scripts/settings");
 const { ipcRenderer } = require("electron");
 const globalEvents = require("./../../constants/globalEvents");
-
+const remote = require("@electron/remote");
+const { app } = remote;
 /**
  * Sync the UI forms with the current settings
  */
@@ -31,31 +35,33 @@ function refreshSettings() {
   minimizeOnClose.checked = store.get(settings.minimizeOnClose);
   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.flags.disableHardwareMediaKeys);
+  gpuRasterization.checked = store.get(settings.flags.gpuRasterization);
 }
 
 /**
  * Open an url in the default browsers
  */
-window.openExternal = function (url) {
+function openExternal(url) {
   const { shell } = require("electron");
   shell.openExternal(url);
-};
+}
 
 /**
  * hide the settings window
  */
-window.hide = function () {
+function hide() {
   ipcRenderer.send(globalEvents.hideSettings);
-};
+}
 
 /**
  * Restart tidal-hifi after changes
  */
-window.restart = function () {
-  const remote = require("electron").remote;
-  remote.app.relaunch();
-  remote.app.exit(0);
-};
+function restart() {
+  app.relaunch();
+  app.quit();
+}
 
 /**
  * Bind UI components to functions after DOMContentLoaded
@@ -65,8 +71,16 @@ window.addEventListener("DOMContentLoaded", () => {
     return document.getElementById(id);
   }
 
+  document.getElementById("close").addEventListener("click", hide);
+  document.getElementById("restart").addEventListener("click", restart);
+  document.querySelectorAll("#openExternal").forEach((elem) =>
+    elem.addEventListener("click", function (event) {
+      openExternal(event.target.getAttribute("data-url"));
+    })
+  );
+
   function addInputListener(source, key) {
-    source.addEventListener("input", function (event, data) {
+    source.addEventListener("input", function (_event, _data) {
       if (this.value === "on") {
         store.set(key, source.checked);
       } else {
@@ -77,7 +91,7 @@ window.addEventListener("DOMContentLoaded", () => {
   }
 
   function addTextAreaListener(source, key) {
-    source.addEventListener("input", function (event, data) {
+    source.addEventListener("input", function (_event, _data) {
       store.set(key, source.value.split("\n"));
       ipcRenderer.send(globalEvents.storeChanged);
     });
@@ -103,6 +117,9 @@ window.addEventListener("DOMContentLoaded", () => {
   enableDiscord = get("enableDiscord");
   muteArtists = get("muteArtists");
   mutedArtists = get("mutedArtists");
+  singleInstance = get("singleInstance");
+  disableHardwareMediaKeys = get("disableHardwareMediaKeys");
+  gpuRasterization = get("gpuRasterization");
 
   refreshSettings();
 
@@ -118,4 +135,7 @@ window.addEventListener("DOMContentLoaded", () => {
   addInputListener(minimizeOnClose, settings.minimizeOnClose);
   addInputListener(muteArtists, settings.muteArtists);
   addTextAreaListener(mutedArtists, settings.mutedArtists);
+  addInputListener(singleInstance, settings.singleInstance);
+  addInputListener(disableHardwareMediaKeys, settings.flags.gpuRasterization);
+  addInputListener(gpuRasterization, settings.flags.gpuRasterization);
 });

src/pages/settings/settings.html

@@ -11,7 +11,7 @@
 <body>
     <div class="header">
         <h1 class="title">Settings</h1>
-        <a href="javascript:hide();" class="exitWindow">
+        <a id="close" style="cursor: pointer;" class="exitWindow">
 
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 348.333 348.334">
                 <g>
@@ -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>
@@ -105,13 +108,23 @@
                       <div class="option">
                         <h4>Hotkeys</h4>
                         <p>
-                            Enables extra hotkeys to achieve feature parity with the <a href = "javascript:openExternal('https://defkey.com/tidal-desktop-shortcuts')">desktop apps</a><br />
+                            Enables extra hotkeys to achieve feature parity with the <a id="openExternal" style="text-decoration: underline; cursor: pointer;" data-url= "https://defkey.com/tidal-desktop-shortcuts">desktop apps</a><br />
                         </p>
                         <label class="switch">
                             <input id="enableCustomHotkeys" type="checkbox">
                             <span class="slider round"></span>
                         </label>
-                    </div>
+                      </div>
+                      <div class="option">
+                        <h4>Single instance</h4>
+                        <p>
+                            Prevent opening multiple tidal-hifi instances
+                        </p>
+                        <label class="switch">
+                            <input id="singleInstance" type="checkbox">
+                            <span class="slider round"></span>
+                        </label>
+                      </div>
                   </div>
                 </section>
                 <section id="api" class="tab-panel">
@@ -175,19 +188,47 @@
                     </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 href ="javascript:openExternal('https://github.com/Mastermindzh/tidal-hifi');">Tidal-hifi</a> is made by <a href ="javascript:openExternal('https://www.rickvanlieshout.com')">Rick van Lieshout</a>.<br />
-                      It uses <a href="javascript:openExternal('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 onClick="restart()" style ="width: 100%">Restart Tidal-hifi</button>
+              <button id="restart" style ="width: 100%">Restart Tidal-hifi</button>
             </div>
         </div>
     </div>

src/preload.js

@@ -1,8 +1,8 @@
 const { setTitle } = require("./scripts/window-functions");
-const { dialog, process, Notification } = require("electron").remote;
+const { dialog, process, Notification } = require('@electron/remote');
 const { store, settings } = require("./scripts/settings");
 const { ipcRenderer } = require("electron");
-const { app } = require("electron").remote;
+const { app } = require('@electron/remote');
 const { downloadFile } = require("./scripts/download");
 const statuses = require("./constants/statuses");
 const hotkeys = require("./scripts/hotkeys");

src/scripts/settings.js

@@ -16,12 +16,27 @@ const store = new Store({
     apiSettings: {
       port: 47836,
     },
+    singleInstance: true,
+    disableHardwareMediaKeys: false,
     trayIcon: true,
     minimizeOnClose: false,
     mpris: false,
     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
+      );
+    },
   },
 });
 
@@ -39,7 +54,6 @@ settingsModule.createSettingsWindow = function () {
     frame: false,
     title: "Tidal-hifi - settings",
     webPreferences: {
-      affinity: "window",
       preload: path.join(__dirname, "../pages/settings/preload.js"),
       plugins: true,
       nodeIntegration: true,