Bugfix/4.1.1 (#161)

* - Fixed `cannot read property of undefined` error because of not passing mainWindow around.
- vincens2005, fixed inconsistent auto muting

* Fix inconsistent auto-muting (#159)

* fix muting sometimes not working

* fix inconsistent unmuting

* fix bad code in inconsistent muting fig

Co-authored-by: Cukmekerb <cukmekerb@gmail.com>

.github/workflows/build.yml

@@ -9,6 +9,8 @@ jobs:
   build_on_linux:
     runs-on: ubuntu-latest
     steps:
+      - name: update apt
+        run: sudo apt-get update
       - name: Install libarchive-tools
         run: sudo apt-get install -y libarchive-tools
       - uses: actions/checkout@master

.github/workflows/release.yml

@@ -9,6 +9,8 @@ jobs:
   build_on_linux:
     runs-on: ubuntu-latest
     steps:
+      - name: update apt
+        run: sudo apt-get update
       - name: Install libarchive-tools
         run: sudo apt-get install -y libarchive-tools
       - uses: actions/checkout@master

CHANGELOG.md

@@ -4,6 +4,61 @@ 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).
 
+## 4.1.1
+
+- Fixed `cannot read property of undefined` error because of not passing mainWindow around.
+- vincens2005, fixed inconsistent auto muting
+
+## 4.1.0
+
+- Added `tidal://` protocol support
+- Switched icon strategies to fix bugs with icons
+- Fixed tray icon bugs
+  - Menu now shows in KDE as well
+  - Toggle window is supported from tray icon
+  - regular click is still ignored, see [this issue](https://github.com/electron/electron/issues/6773)
+- Fixed about tab not showing
+- Fixed playback, mpris and API issues
+
+## 4.0.1
+
+- Updated build config to make use of a base file that doesn't build anything.
+  - This fixes the issue of unwanted extra build targets that were introduced with the electron-builder update
+
+## 4.0.0
+
+- Updated to Electron 19.0.5
+
+## 3.1.1
+
+- Media update timeout set to 500 instead of 200
+- Updated property name for duration because of a tidal update
+- flag for "disable hardware media keys" now working again
+
+## 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
+- Downgraded packaged version of electron to 8.5.2, doesn't seem to like a newer build
+- Fixed the annoying (and useless) terminal warning about `allowRendererProcessReuse`
+
+## 2.8.1
+
+- Mar0xy fixed some build issues (thanks!)
+- vincens2005 fixed the quit button in the menubar
+
 ## 2.8.0
 
 - Added the ability to mute artists automatically

README.md

@@ -12,22 +12,23 @@ The web version of [listen.tidal.com](https://listen.tidal.com) running in elect
 <!-- toc -->
 
 - [Installation](#installation)
-  - [Using releases](#using-releases)
+  * [Using releases](#using-releases)
-    - [Snap install](#snap-install)
+  * [Snap](#snap)
-  - [Arch Linux](#arch-linux)
+  * [Arch Linux](#arch-linux)
-  - [Using source](#using-source)
+  * [Flatpak](#flatpak)
-- [features](#features)
+  * [Nix](#nix)
+  * [Using source](#using-source)
+- [Features](#features)
 - [Integrations](#integrations)
-  - [not included](#not-included)
+  * [Known bugs](#known-bugs)
-  - [Known bugs](#known-bugs)
+    + [last.fm doesn't work out of the box. Use rescrobbler as a workaround](#lastfm-doesnt-work-out-of-the-box-use-rescrobbler-as-a-workaround)
-    - [last.fm doesn't work out of the box. Use rescrobbler as a workaround](#lastfm-doesnt-work-out-of-the-box-use-rescrobbler-as-a-workaround)
 - [Why](#why)
 - [Why not extend existing projects?](#why-not-extend-existing-projects)
 - [Special thanks to...](#special-thanks-to)
 - [Buy me a coffee? Please don't](#buy-me-a-coffee-please-dont)
 - [Images](#images)
-  - [settings window](#settings-window)
+  * [Settings window](#settings-window)
-  - [user setups](#user-setups)
+  * [User setups](#user-setups)
 
 <!-- tocstop -->
 
@@ -37,7 +38,7 @@ The web version of [listen.tidal.com](https://listen.tidal.com) running in elect
 
 Various packaged versions of the software are available on the [releases](https://github.com/Mastermindzh/tidal-hifi/releases) tab.
 
-#### Snap install
+### Snap
 
 To install with `snap` you need to download the pre-packaged snap-package from this repository, found under releases:
 
@@ -61,6 +62,22 @@ 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
+```
+
+### Nix
+
+To install with Nix run the following command:
+
+```sh
+nix-env -iA nixpkgs.tidal-hifi
+```
+
 ### Using source
 
 To install and work with the code on this project follow these steps:
@@ -70,7 +87,7 @@ To install and work with the code on this project follow these steps:
 - npm install
 - npm start
 
-## features
+## Features
 
 - HiFi playback
 - Notifications
@@ -93,7 +110,7 @@ It currently includes:
 - MPRIS - MPRIS media player controls/status
 - Discord - Shows what you're listening to on Discord.
 
-### not included
+Not included:
 
 - [i3 blocks config](https://github.com/Mastermindzh/dotfiles/commit/9714b2fa1d670108ce811d5511fd3b7a43180647) - My dotfiles where I use this app to fetch currently playing music (direct commit)
 
@@ -134,11 +151,11 @@ Inspired by [haydenjames' issue](https://github.com/Mastermindzh/tidal-hifi/issu
 
 ## Images
 
-### settings window
+### Settings window
 
 ![settings window](./docs/settings-preview.png)
 
-### user setups
+### User setups
 
 Some of our users are kind enough to share their usage pictures.
 If you want to see them or possibly even add one please do so in the following issue: [#3 - image thread](https://github.com/Mastermindzh/tidal-hifi/issues/3).

build/electron-builder.base.yml

@@ -0,0 +1,39 @@
+appId: com.rickvanlieshout.tidal-hifi
+electronVersion: 19.0.5
+electronDownload:
+  version: 19.0.5+wvcus
+  mirror: https://github.com/castlabs/electron-releases/releases/download/v
+snap:
+  plugs:
+    - default
+    - screen-inhibit-control
+linux:
+  category: Audio
+  target:
+    - dir
+  executableName: tidal-hifi
+  desktop:
+    Encoding: UTF-8
+    Name: tidal-hifi
+    GenericName: tidal-hifi
+    Comment: The web version of listen.tidal.com running in electron with hifi support thanks to widevine.
+    Icon: icon.png
+    StartupNotify: true
+    Terminal: false
+    Type: Application
+    Categories: Network;Application;AudioVideo;Audio;Video
+    StartupWMClass: tidal-hifi
+    X-PulseAudio-Properties: media.role=music
+    MimeType: x-scheme-handler/tidal;
+
+mac:
+  category: public.app-category.entertainment
+win:
+  icon: icon.png
+  artifactName: "tidalhifi"
+  appId: com.rickvanlieshout.tidalhifi
+  executableName: tidalhifi
+protocols:
+  name: "tidal"
+  role: "Viewer"
+  schemes: ["tidal"]

build/electron-builder.deb.yml

@@ -1,6 +1,6 @@
-extends: ./build/electron-builder.yml
+extends: ./build/electron-builder.base.yml
 linux:
   category: Audio
-  icon: ./assets/icon.png
+  icon: icon.png
   target:
     - deb

build/electron-builder.pacman.yml

@@ -1,6 +1,6 @@
-extends: ./build/electron-builder.yml
+extends: ./build/electron-builder.base.yml
 linux:
   category: Audio
-  icon: ./assets/icon.png
+  icon: icon.png
   target:
     - pacman

build/electron-builder.rpm.yml

@@ -1,6 +1,6 @@
-extends: ./build/electron-builder.yml
+extends: ./build/electron-builder.base.yml
 linux:
   category: Audio
-    icon: ./assets/TIDAL.icns
+  icon: icon.png
   target:
     - rpm

build/electron-builder.snap.yml

@@ -1,6 +1,6 @@
-extends: ./build/electron-builder.yml
+extends: ./build/electron-builder.base.yml
 linux:
   category: Audio
-  icon: ./assets/icon.png
+  icon: icon.png
   target:
     - snap

build/electron-builder.unpacked.yml

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

build/electron-builder.yml

@@ -1,12 +1,7 @@
-appId: com.rickvanlieshout.tidal-hifi
+electronVersion: 19.0.5
-electronVersion: 8.5.2
 electronDownload:
-  version: 8.5.2-wvvmp
+  version: 19.0.5+wvcus
   mirror: https://github.com/castlabs/electron-releases/releases/download/v
-snap:
-  plugs:
-    - default
-    - screen-inhibit-control
 linux:
   category: Audio
   target:
@@ -17,24 +12,9 @@ linux:
     - AppImage
     - snap
     - freebsd
-  executableName: tidal-hifi
-  desktop:
-    Encoding: UTF-8
-    Name: tidal-hifi
-    GenericName: tidal-hifi
-    Comment: The web version of listen.tidal.com running in electron with hifi support thanks to widevine.
-    Icon: assets/icon.png
-    StartupNotify: true
-    Terminal: false
-    Type: Application
-    Categories: Network;Application;Audio;Video
-    StartupWMClass: tidal-hifi
-    X-PulseAudio-Properties: media.role=music
-mac:
-  category: public.app-category.entertainment
 win:
   target: msi
-  icon: build/icon.png
+  icon: icon.png
   artifactName: "tidalhifi"
   appId: com.rickvanlieshout.tidalhifi
   executableName: tidalhifi

package.json

@@ -1,17 +1,19 @@
 {
   "name": "tidal-hifi",
-  "version": "2.8.0",
+  "version": "4.1.1",
   "description": "Tidal on Electron with widevine(hifi) support",
   "main": "src/main.js",
   "scripts": {
     "start": "electron .",
     "build": "electron-builder --publish=never -c ./build/electron-builder.yml",
     "build-deb": "electron-builder --publish=never -c ./build/electron-builder.deb.yml",
+    "build-unpacked": "electron-builder --publish=never -c ./build/electron-builder.unpacked.yml",
     "build-rpm": "electron-builder --publish=never -c ./build/electron-builder.rpm.yml",
     "build-snap": "electron-builder --publish=never -c ./build/electron-builder.snap.yml",
     "build-arch": "electron-builder --publish=never -c ./build/electron-builder.pacman.yml",
     "build-wl": "electron-builder --publish=never -c ./build/electron-builder.yml -wl",
-    "build-mac": "electron-builder --publish=never -c ./build/electron-builder.yml -m"
+    "build-mac": "electron-builder --publish=never -c ./build/electron-builder.yml -m",
+    "build-base": "electron-builder --publish=never -c ./build/electron-builder.base.yml"
   },
   "keywords": [
     "electron",
@@ -23,19 +25,19 @@
   "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",
+    "electron-store": "^8.1.0",
-    "express": "^4.17.1",
+    "express": "^4.18.1",
-    "hotkeys-js": "^3.8.7",
+    "hotkeys-js": "^3.9.4",
     "mpris-service": "^2.1.2",
     "request": "^2.88.2"
   },
   "devDependencies": {
     "@mastermindzh/prettier-config": "^1.0.0",
-    "electron": "git+https://github.com/castlabs/electron-releases.git#v16.0.4+wvcus",
+    "electron": "git+https://github.com/castlabs/electron-releases.git#v19.0.5+wvcus",
-    "electron-builder": "^22.14.5",
+    "electron-builder": "^23.3.3",
-    "electron-reload": "^1.5.0",
+    "prettier": "^2.7.1"
-    "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/constants/values.js

@@ -0,0 +1,3 @@
+module.exports = {
+  name: "tidal-hifi",
+};

src/main.js

@@ -1,4 +1,5 @@
-const { app, BrowserWindow, globalShortcut, ipcMain } = require("electron");
+require("@electron/remote/main").initialize();
+const { app, BrowserWindow, components, globalShortcut, ipcMain, protocol } = require("electron");
 const {
   settings,
   store,
@@ -16,23 +17,32 @@ 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");
+const PROTOCOL_PREFIX = "tidal";
 
-/**
+setFlags();
- * Enable live reload in development builds
+
- */
+function setFlags() {
-if (!app.isPackaged) {
+  const flags = store.get().flags;
-  require("electron-reload")(`${__dirname}`, {
+  if (flags) {
-    electron: require(`${__dirname}/../node_modules/electron`),
+    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');
+  app.commandLine.appendSwitch("disable-seccomp-filter-sandbox");
+}
 
 /**
  * Update the menuBarVisbility according to the store value
@@ -42,6 +52,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,17 +77,15 @@ 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);
+  registerHttpProtocols();
   syncMenuBarWithStore();
 
   // load the Tidal website
@@ -89,6 +114,13 @@ function createWindow(options = {}) {
   });
 }
 
+function registerHttpProtocols() {
+  protocol.registerHttpProtocol(PROTOCOL_PREFIX, (request, _callback) => {
+    mainWindow.loadURL(`${tidalUrl}/${request.url.substring(PROTOCOL_PREFIX.length + 3)}`);
+  });
+  app.setAsDefaultProtocolClient(PROTOCOL_PREFIX);
+}
+
 function addGlobalShortcuts() {
   Object.keys(mediaKeys).forEach((key) => {
     globalShortcut.register(`${key}`, () => {
@@ -100,15 +132,20 @@ function addGlobalShortcuts() {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on("ready", () => {
+app.on("ready", async () => {
+  if (isMainInstanceOrMultipleInstancesAllowed()) {
+    await components.whenReady();
     createWindow();
-  addMenu();
+    addMenu(mainWindow);
     createSettingsWindow();
     addGlobalShortcuts();
-  store.get(settings.trayIcon) && addTray({ icon }) && refreshTray();
+    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();
+  }
 });
 
 app.on("activate", function () {
@@ -119,23 +156,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) {
@@ -145,6 +186,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 () {
+function restart() {
-  const remote = require("electron").remote;
+  app.relaunch();
-  remote.app.relaunch();
+  app.quit();
-  remote.app.exit(0);
+}
-};
 
 /**
  * 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.disableHardwareMediaKeys);
+  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>
@@ -26,10 +26,10 @@
   </div>
   <div class="body">
     <div class="tabset">
-            <!-- Tab 1 -->
+
       <input type="radio" name="tabset" id="general" checked />
       <label for="general">General</label>
-            <!-- Tab 2 -->
+
       <input type="radio" name="tabset" id="api" />
       <label for="api">Api</label>
 
@@ -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>
@@ -62,7 +65,7 @@
               </p>
               <label class="switch" style="margin-bottom:10px">
                 <input id="muteArtists" type="checkbox">
-                              <span class="slider round" ></span>
+                <span class="slider round"></span>
               </label>
               <textarea id="mutedArtists" cols="40" rows="5"></textarea>
             </div>
@@ -105,20 +108,33 @@
             <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 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">
           <div class="section">
             <h3>Api</h3>
             <p style="margin-bottom: 15px;">
-                            Tidal-hifi has a web api built in to allow users to get current song information. You can optionally enable playback control as well.
+              Tidal-hifi has a web api built in to allow users to get current song information. You can optionally
+              enable playback control as well.
             </p>
 
             <div class="option">
@@ -175,19 +191,51 @@
             </div>
           </div>
         </section>
+        <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>
+            <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>
         <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">
+            <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 />
+              <a id="openExternal" style="text-decoration: underline; cursor: pointer;"
-                      It uses <a href="javascript:openExternal('https://castlabs.com/');">Castlabs'</a> versions of Electron for widevine support.
+                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>
@@ -198,6 +246,7 @@
     -webkit-user-select: none;
     -webkit-app-region: drag;
   }
+
   .header a {
     -webkit-app-region: no-drag;
   }
@@ -333,9 +382,10 @@
     box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
     background-color: #5a5a5a;
   }
+
   /* Tabs */
 
-    .tabset > input[type="radio"] {
+  .tabset>input[type="radio"] {
     position: absolute;
     left: -200vw;
   }
@@ -344,15 +394,15 @@
     display: none;
   }
 
-    .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
+  .tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
-    .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
+  .tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),
-    .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
+  .tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),
-    .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4)
+  .tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),
-     {
+  .tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5) {
     display: block;
   }
 
-    .tabset > label {
+  .tabset>label {
     position: relative;
     display: inline-block;
     padding: 15px 0px 10px;
@@ -360,12 +410,12 @@
     cursor: pointer;
   }
 
-    .tabset > input + label {
+  .tabset>input+label {
     color: #e0e0e0;
     margin-right: 30px;
   }
 
-    .tabset > input:checked + label {
+  .tabset>input:checked+label {
     color: #0ff;
     border-bottom: 2px solid #0ff;
   }
@@ -373,6 +423,7 @@
   .tab-panel {
     padding: 10px 0;
   }
+
   /* switches */
   /* The switch - the box around the slider */
 
@@ -382,6 +433,7 @@
     width: 50px;
     height: 28px;
   }
+
   /* Hide default HTML checkbox */
 
   .switch input {
@@ -389,6 +441,7 @@
     width: 0;
     height: 0;
   }
+
   /* The slider */
 
   .slider {
@@ -415,19 +468,20 @@
     transition: .4s;
   }
 
-    input:checked + .slider {
+  input:checked+.slider {
     background-color: #0ff;
   }
 
-    input:focus + .slider {
+  input:focus+.slider {
     box-shadow: 0 0 1px #0ff;
   }
 
-    input:checked + .slider:before {
+  input:checked+.slider:before {
     -webkit-transform: translateX(22px);
     -ms-transform: translateX(22px);
     transform: translateX(22px);
   }
+
   /* Rounded sliders */
 
   .slider.round {
@@ -437,6 +491,7 @@
   .slider.round:before {
     border-radius: 50%;
   }
+
   /* input field */
 
   input {
@@ -455,11 +510,11 @@
   }
 
   /* buttons */
-    button{
+  button {
-      border:none;
+    border: none;
-      background:none;
+    background: none;
     align-items: center;
-      background-color: rgba(229,238,255,.2);
+    background-color: rgba(229, 238, 255, .2);
     display: inline-flex;
     justify-content: center;
     border-radius: 12px;
@@ -474,13 +529,15 @@
     min-height: 0;
     min-width: 0;
     font-size: 1.14286rem;
-      font-family: nationale,nationale-regular,Helvetica,sans-serif;
+    font-family: nationale, nationale-regular, Helvetica, sans-serif;
     margin-top: 10px;
     cursor: pointer;
   }
-    button:hover{
+
-      background-color: rgba(229,238,255,.3);
+  button:hover {
+    background-color: rgba(229, 238, 255, .3);
   }
+
   textarea {
     color: #72777f;
     background: #242528;
@@ -488,12 +545,14 @@
     width: 100%;
     color: rgba(229, 238, 255, .6);
     padding: 0 0 12px;
-      display:block;
+    display: block;
   }
+
   textarea:focus {
     outline: none;
     border: 0;
     border-bottom: 1px solid #0ff;
   }
 </style>
+
 </html>

src/preload.js

@@ -1,21 +1,18 @@
 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");
 const globalEvents = require("./constants/globalEvents");
 const notificationPath = `${app.getPath("userData")}/notification.jpg`;
+const appName = "Tidal Hifi";
 let currentSong = "";
 let player;
 let currentPlayStatus = statuses.paused;
-let progressBarTime;
+let isMutedArtist = true;
-let currentTimeChanged = false;
-let currentTime;
-let currentURL = undefined;
-let isMutedArtist = false;
 
 const elements = {
   play: '*[data-test="play"]',
@@ -36,7 +33,7 @@ const elements = {
   media: '*[data-test="current-media-imagery"]',
   image: "img",
   current: '*[data-test="current-time"]',
-  duration: '*[data-test="duration-time"]',
+  duration: '*[data-test="duration"]',
   bar: '*[data-test="progress-bar"]',
   footer: "#footerPlayer",
   album_header_title: '.header-details [data-test="title"]',
@@ -225,7 +222,7 @@ function handleLogout() {
 }
 
 function addFullScreenListeners() {
-  window.document.addEventListener("fullscreenchange", (event) => {
+  window.document.addEventListener("fullscreenchange", () => {
     ipcRenderer.send(globalEvents.refreshMenuBar);
   });
 }
@@ -236,7 +233,7 @@ function addFullScreenListeners() {
  */
 function addIPCEventListeners() {
   window.addEventListener("DOMContentLoaded", () => {
-    ipcRenderer.on("globalEvent", (event, args) => {
+    ipcRenderer.on("globalEvent", (_event, args) => {
       switch (args) {
         case globalEvents.playPause:
           playPause();
@@ -312,19 +309,16 @@ function updateMediaInfo(options, notify) {
 
 /**
  * Checks if Tidal is playing a video or song by grabbing the "a" element from the title.
- * If it's a song it sets the track URL as currentURL, If it's a video it will set currentURL to undefined.
+ * If it's a song it returns the track URL, if not it will return undefined
  */
-function updateURL() {
+function getTrackURL() {
   const URLelement = elements.get("title").querySelector("a");
-  switch (URLelement) {
+  if (URLelement !== null) {
-    case null:
-      currentURL = undefined;
-      break;
-    default:
     const id = URLelement.href.replace(/[^0-9]/g, "");
-      currentURL = `https://tidal.com/browse/track/${id}`;
+    return `https://tidal.com/browse/track/${id}`;
-      break;
   }
+
+  return window.location;
 }
 
 /**
@@ -333,11 +327,11 @@ function updateURL() {
 setInterval(function () {
   const title = elements.getText("title");
   const artists = elements.getArtists();
+  muteArtistIfFoundInMutedArtistsList(); // doing this here so that nothing can possibly fail before we call this function
+  
   const album = elements.getAlbumName();
   const current = elements.getText("current");
   const duration = elements.getText("duration");
-  const appName = "Tidal Hifi";
-  const progressBarcurrentTime = elements.get("bar").getAttribute("aria-valuenow");
   const songDashArtistTitle = `${title} - ${artists}`;
   const currentStatus = getCurrentlyPlayingStatus();
   const options = {
@@ -345,46 +339,23 @@ setInterval(function () {
     message: artists,
     album: album,
     status: currentStatus,
-    url: currentURL,
+    url: getTrackURL(),
-    current: current,
+    current,
-    duration: duration,
+    duration,
     "app-name": appName,
   };
   
-  const playStatusChanged = currentStatus !== currentPlayStatus;
+
-  const progressBarTimeChanged = progressBarcurrentTime !== progressBarTime;
+
   const titleOrArtistChanged = currentSong !== songDashArtistTitle;
 
-  muteArtistIfFoundInMutedArtistsList();
 
-  if (titleOrArtistChanged || playStatusChanged || progressBarTimeChanged || currentTimeChanged) {
   // update title, url and play info with new info
   setTitle(songDashArtistTitle);
-    updateURL();
+  getTrackURL();
   currentSong = songDashArtistTitle;
   currentPlayStatus = currentStatus;
 
-    // check progress bar value and make sure current stays up to date after switch
-    if (progressBarTime != progressBarcurrentTime && !titleOrArtistChanged) {
-      progressBarTime = progressBarcurrentTime;
-      currentTime = options.current;
-      options.duration = duration;
-      currentTimeChanged = true;
-    }
-
-    if (currentTimeChanged) {
-      if (options.current == currentTime && currentStatus != "paused") return;
-      currentTime = options.current;
-      currentTimeChanged = false;
-    }
-
-    // make sure current is set to 0 if title changes
-    if (titleOrArtistChanged) {
-      options.current = "0:00";
-      currentTime = options.current;
-      progressBarTime = progressBarcurrentTime;
-    }
-
   const image = elements.getSongIcon();
 
   new Promise((resolve) => {
@@ -410,7 +381,6 @@ setInterval(function () {
     },
     () => {}
   );
-  }
 
   /**
    * Checks whether the current artist is included in the "muted artists" list and if so it will automatically mute the player
@@ -423,13 +393,13 @@ setInterval(function () {
           isMutedArtist = true;
           elements.click("volume");
         }
-      } else if (currentStatus === statuses.playing && isMutedArtist && elements.isMuted()) {
+      } else if (isMutedArtist && elements.isMuted()) {
         elements.click("volume");
         isMutedArtist = false;
       }
     }
   }
-}, 200);
+}, 1000);
 
 if (process.platform === "linux" && store.get(settings.mpris)) {
   try {

src/scripts/menu.js

@@ -1,6 +1,7 @@
-const { Menu } = require("electron");
+const { Menu, app } = require("electron");
 const { showSettingsWindow } = require("./settings");
 const isMac = process.platform === "darwin";
+const { name } = require("./../constants/values");
 
 const settingsMenuEntry = {
   label: "Settings",
@@ -10,11 +11,29 @@ const settingsMenuEntry = {
   accelerator: "Control+/",
 };
 
-const mainMenu = [
+const quitMenuEntry = {
+  label: "Quit",
+  click() {
+    app.exit(0);
+  },
+  accelerator: "Control+Q",
+};
+
+const menuModule = {};
+
+menuModule.getMenu = function (mainWindow) {
+  const toggleWindow = {
+    label: "Toggle Window",
+    click: function () {
+      mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
+    },
+  };
+
+  const mainMenu = [
     ...(isMac
       ? [
           {
-          label: app.name,
+            label: name,
             submenu: [
               { role: "about" },
               settingsMenuEntry,
@@ -25,17 +44,15 @@ const mainMenu = [
               { role: "hideothers" },
               { role: "unhide" },
               { type: "separator" },
-            { role: "quit" },
+              quitMenuEntry,
             ],
           },
         ]
       : []),
-  // { role: 'fileMenu' }
     {
       label: "File",
-    submenu: [settingsMenuEntry, isMac ? { role: "close" } : { role: "quit" }],
+      submenu: [settingsMenuEntry, isMac ? { role: "close" } : quitMenuEntry],
     },
-  // { role: 'editMenu' }
     {
       label: "Edit",
       submenu: [
@@ -61,7 +78,6 @@ const mainMenu = [
         settingsMenuEntry,
       ],
     },
-  // { role: 'viewMenu' }
     {
       label: "View",
       submenu: [
@@ -73,13 +89,14 @@ const mainMenu = [
         { role: "zoomout" },
         { type: "separator" },
         { role: "togglefullscreen" },
+        { role: "toggledevtools" },
       ],
     },
-  // { role: 'windowMenu' }
     {
       label: "Window",
       submenu: [
         { role: "minimize" },
+        toggleWindow,
         ...(isMac
           ? [{ type: "separator" }, { role: "front" }, { type: "separator" }, { role: "window" }]
           : [{ role: "close" }]),
@@ -92,16 +109,14 @@ const mainMenu = [
         showSettingsWindow("about");
       },
     },
-];
+    toggleWindow,
+  ];
 
-const menuModule = { mainMenu };
-
-menuModule.getMenu = function () {
   return Menu.buildFromTemplate(mainMenu);
 };
 
-menuModule.addMenu = function () {
+menuModule.addMenu = function (mainWindow) {
-  Menu.setApplicationMenu(menuModule.getMenu());
+  Menu.setApplicationMenu(menuModule.getMenu(mainWindow));
 };
 
 module.exports = menuModule;

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,

src/scripts/tray.js

@@ -1,48 +1,21 @@
-const { Tray, app } = require("electron");
+const { Tray } = require("electron");
-const { Menu } = require("electron");
+const { getMenu } = require("./menu");
-const { getMenu, mainMenu } = require("./menu");
-const { store, settings } = require("./settings");
 const trayModule = {};
 let tray;
 
-trayModule.addTray = function (options = { icon: "" }) {
+trayModule.addTray = function (mainWindow, options = { icon: "" }) {
   tray = new Tray(options.icon);
+  tray.setIgnoreDoubleClickEvents(true);
+  tray.setToolTip("Tidal-hifi");
+
+  const menu = getMenu(mainWindow);
+
+  tray.setContextMenu(menu);
 };
 
 trayModule.refreshTray = function (mainWindow) {
   if (!tray) {
-    trayModule.addTray();
+    trayModule.addTray(mainWindow);
-  }
-
-  tray.on("click", function (e) {
-    if (mainWindow) {
-      mainWindow.show();
-    }
-  });
-
-  tray.setToolTip("Tidal-hifi");
-
-  if (mainWindow && store.get(settings.minimizeOnClose)) {
-    tray.setContextMenu(
-      Menu.buildFromTemplate([
-        {
-          label: "Toggle Window",
-          click: function () {
-            mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
-          },
-        },
-        {
-          label: "Quit",
-          click: function () {
-            mainWindow.destroy();
-            app.quit();
-          },
-        },
-        ...mainMenu, //we add menu items from the other context
-      ])
-    );
-  } else {
-    tray.setContextMenu(getMenu());
   }
 };