Electron 15, single-instance-lock and setting to disable hardwareMediaKeyHandling (#134)

* Update to Electron 15 and add Flatpak to README (#131) * Update functional * Change to 15 * Replace window.hide, window.restart with counterparts * Fix openexternal by doing default JS * Change mouse to pointer for <a> elements * turn mouse to pointer for exit button * Fix deprecation of Audio for AudioVideo * Made a small mistake * Add Flatpak to readme * 3.0.0 prep * Added setting to disable multiple tidal-hifi windows (defaults to true) fixes #121 * Added setting to disable HardwareMediaKeyHandling (defaults to false) fixes #133 Co-authored-by: Marie <marie@kaifa.ch>
2025-07-28 00:22:26 +02:00 · 2022-04-23 22:59:32 +02:00
parent 7b2afd2290
commit 79ff02d06c
12 changed files with 1433 additions and 1634 deletions
--- a/src/constants/settings.js
+++ b/src/constants/settings.js
@@ -19,6 +19,8 @@ const settings = {
    root: "apiSettings",
    port: "apiSettings.port",
  },
+  singleInstance: "singleInstance",
+  disableHardwareMediaKeys: "disableHardwareMediaKeys",
  mpris: "mpris",
  enableCustomHotkeys: "enableCustomHotkeys",
  trayIcon: "trayIcon",
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,4 @@
+require("@electron/remote/main").initialize();
 const { app, BrowserWindow, globalShortcut, ipcMain } = require("electron");
 const {
  settings,
@@ -20,19 +21,17 @@ const globalEvents = require("./constants/globalEvents");
 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`),
-  });
-}
-
 /**
 * Fix Display Compositor issue.
 */
-app.commandLine.appendSwitch('disable-seccomp-filter-sandbox');
+app.commandLine.appendSwitch("disable-seccomp-filter-sandbox");
+
+/**
+ * Disable media keys when requested
+ */
+if (store.get(settings.disableHardwareMediaKeys)) {
+  app.commandLine.appendSwitch("disable-features", "HardwareMediaKeyHandling");
+}

 /**
 * Update the menuBarVisbility according to the store value
@@ -42,6 +41,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 +66,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 +115,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 +137,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 +167,6 @@ ipcMain.on(globalEvents.storeChanged, (event, arg) => {
  }
 });

-ipcMain.on(globalEvents.error, (event, arg) => {
+ipcMain.on(globalEvents.error, (event, _arg) => {
  console.log(event);
 });
--- a/src/pages/settings/preload.js
+++ b/src/pages/settings/preload.js
@@ -9,12 +9,15 @@ let trayIcon,
  api,
  port,
  menuBar,
-  mutedArtists;
+  mutedArtists,
+  singleInstance,
+  disableHardwareMediaKeys;

 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 +34,32 @@ 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.disableHardwareMediaKeys);
 }

 /**
 * 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 +69,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 +89,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 +115,8 @@ window.addEventListener("DOMContentLoaded", () => {
  enableDiscord = get("enableDiscord");
  muteArtists = get("muteArtists");
  mutedArtists = get("mutedArtists");
+  singleInstance = get("singleInstance");
+  disableHardwareMediaKeys = get("disableHardwareMediaKeys");

  refreshSettings();

@@ -118,4 +132,6 @@ window.addEventListener("DOMContentLoaded", () => {
  addInputListener(minimizeOnClose, settings.minimizeOnClose);
  addInputListener(muteArtists, settings.muteArtists);
  addTextAreaListener(mutedArtists, settings.mutedArtists);
+  addInputListener(singleInstance, settings.singleInstance);
+  addInputListener(disableHardwareMediaKeys, settings.disableHardwareMediaKeys);
 });
--- a/src/pages/settings/settings.html
+++ b/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>
@@ -105,13 +105,34 @@
                      <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 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">
@@ -179,15 +200,15 @@
                  <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.
+                      <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>
--- a/src/preload.js
+++ b/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");
--- a/src/scripts/settings.js
+++ b/src/scripts/settings.js
@@ -16,6 +16,8 @@ const store = new Store({
    apiSettings: {
      port: 47836,
    },
+    singleInstance: true,
+    disableHardwareMediaKeys: false,
    trayIcon: true,
    minimizeOnClose: false,
    mpris: false,
@@ -39,7 +41,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,