- Changed the category of the desktop file to AudioVideo

- Changed desktop file name to "TIDAL Hi-Fi"
Update configuration of the desktop file (#165 )
2025-09-11 22:35:05 +02:00 · 2022-09-11 22:53:42 +02:00 · 2022-09-11 22:48:55 +02:00
113 changed files with 6617 additions and 8340 deletions
--- a/.drone.yml
+++ b/.drone.yml
@@ -1,16 +0,0 @@
-kind: pipeline
-type: docker
-name: default
-
-steps:
-  - name: install
-    image: node:19.4.0
-    commands:
-      - npm install
-
-  - name: build_with_linux
-    image: node:19.4.0
-    commands:
-      - apt-get update && apt-get upgrade -y
-      - apt-get install -y libarchive-tools rpm
-      - npm run build-unpacked
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,10 +10,6 @@ insert_final_newline = true
 indent_style = space
 indent_size = 2

-[**.ts]
-indent_style = space
-indent_size = 2
-
 [**.json]
 indent_style = space
 indent_size = 2
@@ -54,4 +50,4 @@ trim_trailing_whitespace = ignore
 charset = ignore

 [{test/fixtures,deps,tools/eslint,tools/gyp,tools/icu,tools/msvs}/**]
-insert_final_newline = false
+insert_final_newline = false
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,16 +0,0 @@
-{
-  "root": true,
-  "env": {
-    "node": true,
-    "browser": true
-  },
-  "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "@typescript-eslint"
-  ],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
-  ]
-}
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -5,10 +5,6 @@ on:
    branches-ignore:
      - master
      - develop
-  pull_request:
-    branches-ignore:
-      - master
-      - develop
 jobs:
  build_on_linux:
    runs-on: ubuntu-latest
@@ -20,17 +16,17 @@ jobs:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
-          node-version: 19
+          node-version: 16
      - run: npm install
      - run: npm run build

  build_on_mac:
-    runs-on: macos-latest
+    runs-on: macOS-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
-          node-version: 19
+          node-version: 16
      - run: npm install
      - run: npm run build

@@ -40,6 +36,6 @@ jobs:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
-          node-version: 19
+          node-version: 16
      - run: npm install
      - run: npm run build
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -5,10 +5,6 @@ on:
    branches:
      - master
      - develop
-  pull_request:
-    branches:
-      - master
-
 jobs:
  build_on_linux:
    runs-on: ubuntu-latest
@@ -20,7 +16,7 @@ jobs:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
-          node-version: 19
+          node-version: 16
      - run: npm install
      - run: npm run build
      - uses: actions/upload-artifact@master
@@ -29,12 +25,12 @@ jobs:
          path: dist/

  build_on_mac:
-    runs-on: macos-latest
+    runs-on: macOS-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
-          node-version: 19
+          node-version: 16
      - run: npm install
      - run: npm run build
      - uses: actions/upload-artifact@master
@@ -48,7 +44,7 @@ jobs:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
-          node-version: 19
+          node-version: 16
      - run: npm install
      - run: npm run build
      - uses: actions/upload-artifact@master
--- a/.gitignore
+++ b/.gitignore
@@ -7,13 +7,3 @@ build/linux/arch/*
 !build/linux/arch/.SRCINFO
 !build/linux/arch/tidal-hifi.desktop
 !build/linux/arch/install.sh
-*.css
-*.css.map
-
-# JetBrains IDE configuration
-.idea
-ts-dist/**
-ts-dist
-themes
-!src/themes
-.sass-cache
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +0,0 @@
-19.8.1
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,16 +0,0 @@
-{
-  "plugins": [
-    "stylelint-prettier"
-  ],
-  "extends": [
-    "stylelint-config-standard-scss"
-  ],
-  "ignoreFiles": [
-    "src/themes/**.scss"
-  ],
-  "rules": {
-    "prettier/prettier": true,
-    "scss/at-extend-no-missing-placeholder": null,
-    "no-descending-specificity": null
-  }
-}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,26 +1,3 @@
 {
-  "cSpell.words": [
-    "Brainz",
-    "Castlabs",
-    "flac",
-    "Flatpak",
-    "geqnfr",
-    "hifi",
-    "libnotify",
-    "listenbrainz",
-    "playpause",
-    "prs",
-    "rescrobbler",
-    "scrobble",
-    "scrobbling",
-    "Songwhip",
-    "trackid",
-    "tracklist",
-    "widevine",
-    "xesam"
-  ],
-  "sonarlint.connectedMode.project": {
-    "connectionId": "public-sonarcloud",
-    "projectKey": "Mastermindzh_tidal-hifi"
-  }
+  "cSpell.words": ["hifi", "rescrobbler", "widevine"]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,141 +4,6 @@ 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).

-## [5.9.0]
-
- More Discord options:
-  - Added the ability to hide the current song from the discord activity and display a custom text instead
-  - Added the ability to customize the text that is shown when no song is playing
-  - Discord now reacts to pausing/unpausing events
- Refactored media info updates so it only updates the required info, fixes #342, #306
- Added 5.9.0 logs/versions/migrations
-
-### Fixed
-
- Fixed chromium mediaSession instance showing up. fixes #338 #198
- Set a new icon, should fix #302
- Made sure settingsWindow exists before operating on it. fixes #344
-
-## [5.8.0]
-
- Updated Electron to 28.1.1 (fixes [325](https://github.com/Mastermindzh/tidal-hifi/issues/325))
- Updated dependencies to latest
-  - added theme files to stylelint ignore
-  - fixed other stylelint errors
-
- Added functionality to favorite a song (fixes [#323](https://github.com/Mastermindzh/tidal-hifi/issues/323))
-  - Added a hotkey to favorite ("Add to collection") songs: Control+a
-  - Added the "favorite" field in the `mediaInfo` and the API `/current` endpoint
-  - Added an endpoint to toggle favoriting a song: `http://localhost:47836/favorite/toggle`
-
- Fixed wrong "end time stamp" for currently playing song (fixes [#282](https://github.com/Mastermindzh/tidal-hifi/issues/282))
-  - Affected the API + all integrations
-  - As requested we also added toggle to sync the timestamps to Discord (default = true)
-
-## [5.7.1]
-
- Fixed mpris not being set up correctly due to capitalization of the instance name.
-
-## [5.7.0]
-
- Renamed app to TIDAL Hi-Fi.
- Made sure all windows run with the same web preferences set (compared to main app).
-  - Fixes the last.fm bug.
- Added settings to customize the Discord rich presence information
-  - Discord settings are now also collapsible like the ListenBrainz ones are
- Restyled settings menu to include version number and useful links on the about page
-    ![The new about page](./docs/images/new-about.png)
- The ListenBrainz integration has been extended with a configurable (5 seconds by default) delay in song reporting so that it doesn't spam the API when you are cycling through songs.
- Custom CSS now also applies to settings window
-    ![Tokyo Night theme on settings window](./docs/images/customcss-menu.png)
-
-## [5.6.0]
-
- Added support for Wayland (on by default) fixes [#262](https://github.com/Mastermindzh/tidal-hifi/issues/262) and [#157](https://github.com/Mastermindzh/tidal-hifi/issues/157)
- Made it clear in the readme that this TIDAL Hi-Fi client supports High & Max audio settings. fixes [#261](https://github.com/Mastermindzh/tidal-hifi/issues/261)
- Added app suspension inhibitors when music is playing. fixes [#257](https://github.com/Mastermindzh/tidal-hifi/issues/257)
- Fixed bug with theme files from user directory trying to load: "an error occurred reading the theme file"
- Fixed: config flags not being set correctly
- [DEV]:
-  - Logger is now static and will automatically call either ipcRenderer or ipcMain
-
-## 5.5.0
-
- ListenBrainz integration added (thanks @Mar0xy)
-
-## 5.4.0
-
- Removed Windows builds (from publishes) as they don't work anymore.
- Added [Songwhip](https://songwhip.com/) integration
- Fixed bug with several hotkeys not working due to Tidal's HTML/css changes
- [DEV]:
-  - added a logger to log into STDout
-  - added "watchStart" which will automatically restart electron when it detects a source code change
-  - added "listen.tidal.com-parsing-scripts" folder with a script to verify whether all elements (in the main preload.ts) are present on the page
-
-## 5.3.0
-
- SPKChaosPhoenix updated the beautiful Tokyo Night theme:
-
-![tidal with the tokyo night theme applied](./docs/images/tokyo-night.png)
-
-## 5.2.0
-
- moved from Javascript to Typescript for all files
-
-  - use `npm run watch` to watch for changes & recompile typescript and sass files
-
- Added support for theming the application
- Added drone build file use `drone exec` or drone.ci to build it
-
-## 5.1.0
-
-### New features
-
- Added proper updates through the MediaSession API
- 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
-
-### Fixes
-
- Any songs **including** an artist listed in the `skipped artists` setting will now be skipped even if the song is a collaboration.
- Linux desktop icons have been fixed. See [#222](https://github.com/Mastermindzh/tidal-hifi/pull/222) for details.
-
-## 5.0.0
-
- Replaced "muting artists" with a full implementation of an Adblock mechanism
-
-  > Disabled audio & visual ads, unlocked lyrics, suggested track, track info, unlimited skips thanks to uBlockOrigin custom filters ([source](https://github.com/uBlockOrigin/uAssets/issues/17495))
-
- @thanasistrisp updated Electron to 24.1.2 and fixed the tray bug :)
-
-## 4.4.0
-
- Updated shortcut hint on the menubar to reflect the new `ctrl+=` shortcut.
- Reverted icon path to `icon.png` instead of the hardcoded linux path.
- Add support to autoHide the menubar and showing it with the `alt` key.
- Move the quit command from the system sub-menu to the main menu
- Added single click focus/show on the tray icon
-  - Doesn't work on all platforms. Nothing I can do about that unfortunately!
- Added a list of artists to automatically skip.
-  - I don't like the vast majority of dutch music so I added one of them to my list to test: [./docs/no-dutch-music.mp4](./docs/no-dutch-music.mp4)
-
-## 4.3.1
-
- fix: App always requests a default-url-handler-scheme change on start
-
-## 4.3.0
-
- Added a setting to disable background throttling ([docs](https://www.electronjs.org/docs/latest/api/browser-window))
-
-## 4.2.0
-
- New settings window by BlueManCZ
- Fixed the desktop files in electron-builder
-  - icon is set to new static path based on Arch/Debian
-  - Name has changed to TIDAL Hi-Fi
-
 ## 4.1.2

 - Changed the category of the desktop file to AudioVideo
@@ -185,7 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 - Updated to Electron 15
 - Fixed the develop "build-unpacked" command
- Added setting to disable multiple TIDAL Hi-Fi windows (defaults to true)
+- Added setting to disable multiple tidal-hifi windows (defaults to true)
 - Added setting to disable HardwareMediaKeyHandling (defaults to false)

 ## 2.8.2
@@ -223,7 +88,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## 2.5.0

- Notify-send now correctly shows "Tidal Hi-Fi" as the program name
+- Notify-send now correctly shows "Tidal HiFi" as the program name
 - Updated dependencies (including electron itself)

 ### known issues
--- a/README.md
+++ b/README.md
@@ -1,87 +1,39 @@
-# TIDAL Hi-Fi (Max quality)<img src = "./build/icon.png" height="40" align="right"/>
+<h1>
+Tidal-hifi
+<img src = "./build/icon.png" height="40" align="right" />
+</h1>

-![GitHub release](https://img.shields.io/github/release/Mastermindzh/tidal-hifi.svg) [![github builds](https://github.com/mastermindzh/tidal-hifi/actions/workflows/build.yml/badge.svg)](https://github.com/Mastermindzh/tidal-hifi/actions) [![Build Status](https://ci.mastermindzh.tech/api/badges/Mastermindzh/tidal-hifi/status.svg)](https://ci.mastermindzh.tech/Mastermindzh/tidal-hifi) [![Discord logo](./docs/images/discord.png)](https://discord.gg/yhNwf4v4He)
+The web version of [listen.tidal.com](https://listen.tidal.com) running in electron with hifi support thanks to widevine.

-The web version of [listen.tidal.com](https://listen.tidal.com) running in electron with Hi-Fi (High & Max) support thanks to widevine.
+![tidal-hifi preview](./docs/preview.png)

-![TIDAL Hi-Fi preview](./docs/images/preview.png)
-
-## Table of Contents
+## Table of contents

 <!-- toc -->

- [TIDAL Hi-Fi (Max quality)](#tidal-hi-fi-max-quality)
-  - [Table of Contents](#table-of-contents)
-  - [Features](#features)
-  - [Contributions](#contributions)
-  - [Why did I create TIDAL Hi-Fi?](#why-did-i-create-tidal-hi-fi)
-    - [Why not extend existing projects?](#why-not-extend-existing-projects)
-  - [Installation](#installation)
-    - [Dependencies](#dependencies)
-    - [Using releases](#using-releases)
-    - [Snap](#snap)
-    - [Arch Linux](#arch-linux)
-    - [Flatpak](#flatpak)
-    - [Nix](#nix)
-    - [Using source](#using-source)
-  - [Integrations](#integrations)
-  - [Known bugs](#known-bugs)
-    - [DRM not working on Windows](#drm-not-working-on-windows)
-  - [Special thanks to](#special-thanks-to)
-  - [Donations](#donations)
-  - [Images](#images)
-    - [Settings window](#settings-window)
-    - [User setups](#user-setups)
+- [Installation](#installation)
+  * [Using releases](#using-releases)
+  * [Snap](#snap)
+  * [Arch Linux](#arch-linux)
+  * [Flatpak](#flatpak)
+  * [Nix](#nix)
+  * [Using source](#using-source)
+- [Features](#features)
+- [Integrations](#integrations)
+  * [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)
+- [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)
+  * [User setups](#user-setups)

 <!-- tocstop -->

-## Features
-
- HiFi playback (High & Max settings)
- Notifications
- Custom [theming](./docs/theming.md)
- Custom hotkeys ([source](https://defkey.com/tidal-desktop-shortcuts))
- Better icons thanks to [Papirus-icon-theme](https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/)
- [Settings feature](./docs/images/settings.png) to disable certain functionality. (`ctrl+=` or `ctrl+0`)
- API for status and playback
- Disabled audio & visual ads, unlocked lyrics, suggested track, track info, and unlimited skips thanks to uBlockOrigin custom filters ([source](https://github.com/uBlockOrigin/uAssets/issues/17495))
- AlbumArt in integrations ([best-effort](https://github.com/Mastermindzh/tidal-hifi/pull/88#pullrequestreview-840814847))
- Custom [integrations](#integrations)
-  - [ListenBrainz](https://listenbrainz.org/?redirect=false) integration
-  - Songwhip.com integration (hotkey `ctrl + w`)
-  - Discord RPC integration (showing "now listening", "Browsing", etc)
-  - MPRIS integration
- UI + Json config (`~/.config/tidal-hifi/`, or `~/.var/app/com.mastermindzh.tidal-hifi/` for Flatpak)
-
-## Contributions
-
-To contribute you can use the standard GitHub features (issues, prs, etc.) or join the discord server to talk with like-minded individuals.
-
- ![Discord logo](./docs/images/discord.png) [Join the Discord server](https://discord.gg/yhNwf4v4He)
-
-## Why did I create TIDAL Hi-Fi?
-
-I moved from Spotify over to Tidal and found Linux support to be lacking.
-When I started this project there weren't any Linux apps that offered Tidal's "hifi" options nor any scripts to control it.
-I made this app to support the highest quality audio available on the Linux platform. It used to be "hifi" but now is ["High & Max"](https://tidal.com/sound-quality).
-
-### Why not extend existing projects?
-
-Whilst there are a handful of projects attempting to run Tidal on Electron they are all unappealing to me because of various reasons:
-
- Lack of maintainers/developers. (no hotfixes, no issues being handled etc)
- Most are simple web wrappers, not my cup of tea.
- Some are DE-oriented. I want this to work on WM's too.
- None have Widevine working at the moment
-
-Sometimes it's just easier to start over, cover my own needs and after that making it available to the public :)
-
 ## Installation

-### Dependencies
-
-Note that you **need** a notification library such as [libnotify](https://github.com/GNOME/libnotify) or [dunst](https://github.com/dunst-project/dunst) for the software to work properly.
-
 ### Using releases

 Various packaged versions of the software are available on the [releases](https://github.com/Mastermindzh/tidal-hifi/releases) tab.
@@ -92,22 +44,22 @@ To install with `snap` you need to download the pre-packaged snap-package from t

 1. Download

-   ```sh
-   wget <URI> #for instance: https://github.com/Mastermindzh/tidal-hifi/releases/download/1.0/tidal-hifi_1.0.0_amd64.snap
-   ```
+```sh
+wget <URI> #for instance: https://github.com/Mastermindzh/tidal-hifi/releases/download/1.0/tidal-hifi_1.0.0_amd64.snap
+```

 2. Install

-   ```sh
-   snap install --dangerous <path> #for instance: tidal-hifi_1.0.0_amd64.snap
-   ```
+```sh
+snap install --dangerous <path> #for instance: tidal-hifi_1.0.0_amd64.snap
+```

 ### Arch Linux

-Arch Linux users can use the AUR to install TIDAL Hi-Fi:
+Arch Linux users can use the AUR to install tidal-hifi:

 ```sh
-trizen tidal-hifi-git
+trizen tidal-hifi-bin
 ```

 ### Flatpak
@@ -131,43 +83,77 @@ nix-env -iA nixpkgs.tidal-hifi
 To install and work with the code on this project follow these steps:

 - git clone [https://github.com/Mastermindzh/tidal-hifi.git](https://github.com/Mastermindzh/tidal-hifi.git)
- cd TIDAL Hi-Fi
+- cd tidal-hifi
 - npm install
 - npm start

+## Features
+
+- HiFi playback
+- Notifications
+- Custom hotkeys ([source](https://defkey.com/tidal-desktop-shortcuts))
+- API for status and playback
+- [Mute artists automatically (defaults to "Tidal")]("./docs/muting-artists.md")
+- Custom [integrations](#integrations)
+- [Settings feature](./docs/settings.png) to disable certain functionality. (`ctrl+=` or `ctrl+0`)
+- AlbumArt in integrations ([best-effort](https://github.com/Mastermindzh/tidal-hifi/pull/88#pullrequestreview-840814847))
+
 ## Integrations

-TIDAL Hi-Fi comes with several integrations out of the box.
+Tidal-hifi comes with several integrations out of the box.
 You can find these in the settings menu (`ctrl + =` by default) under the "integrations" tab.

-![integrations menu, showing a list of integrations](./docs/images/integrations.png)
+![integrations menu, showing a list of integrations](./docs/integrations.png)

-Integrations with other projects that are not included natively:
+It currently includes:
+
+- MPRIS - MPRIS media player controls/status
+- Discord - Shows what you're listening to on Discord.
+
+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)
- [neptune](https://github.com/uwu/neptune) third party plugins & theming

-## Known bugs
+### Known bugs

-### DRM not working on Windows
+#### last.fm doesn't work out of the box. Use rescrobbler as a workaround

-Most Windows users run into DRM issues when trying to use TIDAL Hi-Fi.
-Nothing I can do about that I'm afraid... Tidal is working on removing/changing DRM so when they finish with that we can give it another shot.
+The last.fm login doesn't work, as is evident from the following issue: [Last.fm login doesn't work](https://github.com/Mastermindzh/tidal-hifi/issues/4).
+However, in that same issue you can read about a workaround using [rescrobbler](https://github.com/InputUsername/rescrobbled).
+For now that will be the default workaround.

-## Special thanks to
+## Why
+
+I moved from Spotify over to Tidal and found Linux support to be lacking.
+
+When I started this project there weren't any Linux apps that offered Tidal's "hifi" options nor any scripts to control it.
+
+## Why not extend existing projects?
+
+Whilst there are a handful of projects attempting to run Tidal on Electron they are all unappealing to me because of various reasons:
+
+- Lack of a maintainers/developers. (no hotfixes, no issues being handled etc)
+- Most are simple web wrappers, not my cup of tea.
+- Some are DE oriented. I want this to work on WM's too.
+- None have widevine working at the moment
+
+Sometimes it's just easier to start over, cover my own needs and then making it available to the public :)
+
+## Special thanks to...

 - [Castlabs](https://castlabs.com/)
  For maintaining Electron with Widevine CDM installation, Verified Media Path (VMP), and persistent licenses (StorageID)

-## Donations
+## Buy me a coffee? Please don't

-You can find my Github sponsorship page at: [https://github.com/sponsors/Mastermindzh](https://github.com/sponsors/Mastermindzh)
+Instead spend some money on a charity I care for: [kwf.nl](https://www.kwf.nl/donatie/donation).
+Inspired by [haydenjames' issue](https://github.com/Mastermindzh/tidal-hifi/issues/27#issuecomment-704198429)

 ## Images

 ### Settings window

-![settings window](./docs/images/settings-preview.png)
+![settings window](./docs/settings-preview.png)

 ### User setups

--- a/SECURITY.md
+++ b/SECURITY.md
@@ -1,11 +0,0 @@
-# Security Policy
-
-## Supported Versions
-
-Only the very latest 😄.
-
-## Reporting a Vulnerability
-
-If you find a vulnerability just add it as an issue.
-If there's an especially bad vulnerability that you don't want to make public just send me a private message (email, discord, wherever).
-
--- a/assets/TIDAL.icns
+++ b/assets/TIDAL.icns
--- a/assets/icon-inverted.png
+++ b/assets/icon-inverted.png
--- a/assets/icon.png
+++ b/assets/icon.png
--- a/assets/icons/128x128.png
+++ b/assets/icons/128x128.png
--- a/assets/icons/16x16.png
+++ b/assets/icons/16x16.png
--- a/assets/icons/22x22.png
+++ b/assets/icons/22x22.png
--- a/assets/icons/24x24.png
+++ b/assets/icons/24x24.png
--- a/assets/icons/256x256.png
+++ b/assets/icons/256x256.png
--- a/assets/icons/32x32.png
+++ b/assets/icons/32x32.png
--- a/assets/icons/384x384.png
+++ b/assets/icons/384x384.png
--- a/assets/icons/48x48.png
+++ b/assets/icons/48x48.png
--- a/assets/icons/64x64.png
+++ b/assets/icons/64x64.png
--- a/build/electron-builder.base.yml
+++ b/build/electron-builder.base.yml
@@ -1,17 +1,14 @@
 appId: com.rickvanlieshout.tidal-hifi
-electronVersion: 28.1.1
+electronVersion: 19.0.5
 electronDownload:
-  version: 28.1.1+wvcus
+  version: 19.0.5+wvcus
  mirror: https://github.com/castlabs/electron-releases/releases/download/v
 snap:
  plugs:
    - default
    - screen-inhibit-control
-extraResources:
-  - "themes/**"
 linux:
  category: AudioVideo
-  icon: build/icons/256x256.png
  target:
    - dir
  executableName: tidal-hifi
@@ -20,7 +17,7 @@ linux:
    Name: TIDAL Hi-Fi
    GenericName: TIDAL Hi-Fi
    Comment: The web version of listen.tidal.com running in electron with hifi support thanks to widevine.
-    Icon: tidal-hifi
+    Icon: icon.png
    StartupNotify: true
    Terminal: false
    Type: Application
--- a/build/electron-builder.deb.yml
+++ b/build/electron-builder.deb.yml
@@ -1,4 +1,6 @@
 extends: ./build/electron-builder.base.yml
 linux:
+  category: Audio
+  icon: icon.png
  target:
    - deb
--- a/build/electron-builder.pacman.yml
+++ b/build/electron-builder.pacman.yml
@@ -1,4 +1,6 @@
 extends: ./build/electron-builder.base.yml
 linux:
+  category: Audio
+  icon: icon.png
  target:
    - pacman
--- a/build/electron-builder.rpm.yml
+++ b/build/electron-builder.rpm.yml
@@ -1,4 +1,6 @@
 extends: ./build/electron-builder.base.yml
 linux:
+  category: Audio
+  icon: icon.png
  target:
    - rpm
--- a/build/electron-builder.snap.yml
+++ b/build/electron-builder.snap.yml
@@ -1,4 +1,6 @@
 extends: ./build/electron-builder.base.yml
 linux:
+  category: Audio
+  icon: icon.png
  target:
    - snap
--- a/build/electron-builder.yml
+++ b/build/electron-builder.yml
@@ -1,5 +1,9 @@
-extends: ./build/electron-builder.base.yml
+electronVersion: 19.0.5
+electronDownload:
+  version: 19.0.5+wvcus
+  mirror: https://github.com/castlabs/electron-releases/releases/download/v
 linux:
+  category: Audio
  target:
    - pacman
    - tar.gz
--- a/build/icon-inverted.png
+++ b/build/icon-inverted.png
--- a/build/icon.icns
+++ b/build/icon.icns
--- a/build/icon.png
+++ b/build/icon.png
--- a/build/icons/256x256.png
+++ b/build/icons/256x256.png
--- a/build/icons/icon-inverted.png
+++ b/build/icons/icon-inverted.png
--- a/build/icons/icon.icns
+++ b/build/icons/icon.icns
--- a/build/icons/icon.png
+++ b/build/icons/icon.png
--- a/docs/images/customcss-config.png
+++ b/docs/images/customcss-config.png
--- a/docs/images/customcss-menu.png
+++ b/docs/images/customcss-menu.png
--- a/docs/images/customcss.png
+++ b/docs/images/customcss.png
--- a/docs/images/discord.png
+++ b/docs/images/discord.png
--- a/docs/images/integrations.png
+++ b/docs/images/integrations.png
--- a/docs/images/new-about.png
+++ b/docs/images/new-about.png
--- a/docs/images/theming.png
+++ b/docs/images/theming.png
--- a/docs/images/tokyo-night.png
+++ b/docs/images/tokyo-night.png
--- a/docs/integrations.png
+++ b/docs/integrations.png
--- a/docs/muting-artists.md
+++ b/docs/muting-artists.md
@@ -0,0 +1,11 @@
+# Muting artists
+
+If you feel that some of your music is embarrassing for others you can mute specific artists in the settings window.
+This functionality is inspired by the [adblock ticket](https://github.com/Mastermindzh/tidal-hifi/issues/112), and whilst I personally feel you should simply buy Tidal, I also believe in muting sound that you don't want to hear.
+
+Anyway, to block an artist, open the settings window (see image below) and enter a list of artists in the textarea as seen below.
+Don't forget to turn the feature on and Tidal-hifi will automatically mute the player whenever that artist is playing.
+
+This will allow you to skip the song without anyone noticing. (you can always say "no idea, it seems to have no audio").
+
+![muted artists settings window](./settings-muted-artists.png)
--- a/docs/no-dutch-music.mp4
+++ b/docs/no-dutch-music.mp4
--- a/docs/images/preview.png
+++ b/docs/images/preview.png
--- a/docs/settings-muted-artists.png
+++ b/docs/settings-muted-artists.png
--- a/docs/images/settings-preview.png
+++ b/docs/images/settings-preview.png
--- a/docs/images/settings.png
+++ b/docs/images/settings.png
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -1,38 +0,0 @@
-# Theming TIDAL Hi-Fi
-
-## Table of contents
-
-<!-- toc -->
-
- [Theming TIDAL Hi-Fi](#theming-TIDAL Hi-Fi)
-  - [Table of contents](#table-of-contents)
-  - [Custom CSS](#custom-css)
-  - [config](#config)
-  - [Warning! Themes might break](#warning-themes-might-break)
-
-<!-- tocstop -->
-
-By default TIDAL Hi-Fi comes with a few themes.
-You can select these in the settings window under the theming tab as shown below.
-
-![Settings window with the theming tab opened](./images/theming.png)
-
-## Custom CSS
-
-The custom CSS will be added to the HTML document last.
-This means that it will overwrite any existing CSS, even that of themes, unless the original has an access modifier such as `$important`.
-
-![settings window on the theming tab with a custom CSS override](./images/customcss.png)
-
-## config
-
-The theme selector and customCSS are stored in the config file.
-The custom CSS is stored as a list of lines.
-
-![settings window on the theming tab next to the config file](./images/customcss-config.png)
-
-## Warning! Themes might break
-
-Themes might break at any point. Tidal changes their webpage structure a ton (they probably generate classNames and don't provide roles/ids/attributes.)
-
-If one breaks you can create an Issue on GitHub or ask for assistance in the [Discord channel](https://discord.gg/yhNwf4v4He).
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,76 +1,43 @@
 {
  "name": "tidal-hifi",
-  "version": "5.9.0",
+  "version": "4.1.2",
  "description": "Tidal on Electron with widevine(hifi) support",
-  "main": "ts-dist/main.js",
+  "main": "src/main.js",
  "scripts": {
-    "start": "electron --inspect=0.0.0.0:5858 .",
-    "watchStart": "nodemon dist -x \"npm run start\"",
-    "compile": "tsc && npm run sass-and-copy",
-    "deps": "npm run watch",
-    "watch": "tsc-watch --onSuccess \"npm run sass-and-copy\"",
-    "copy-files": "copyfiles -u 1 --exclude './src/**/*.ts' --exclude './src/**/*.scss' \"./src/**/*\" ts-dist",
-    "copy-themes-dev": "copyfiles -u 1 \"./themes/*\" node_modules/electron/dist/resources",
-    "sass-and-copy": "npm run sass && npm run copy-files && npm run copy-themes-dev",
-    "build": "npm run builder -- -c ./build/electron-builder.yml",
-    "build-deb": "npm run builder -- -c ./build/electron-builder.deb.yml",
-    "build-unpacked": "npm run builder -- -c ./build/electron-builder.unpacked.yml",
-    "build-rpm": "npm run builder -- -c ./build/electron-builder.rpm.yml",
-    "build-snap": "npm run builder -- -c ./build/electron-builder.snap.yml",
-    "build-arch": "npm run builder -- -c ./build/electron-builder.pacman.yml",
-    "build-wl": "npm run builder -- -c ./build/electron-builder.yml -wl",
-    "build-mac": "npm run builder -- -c ./build/electron-builder.yml -m",
-    "build-base": "npm run builder -- -c ./build/electron-builder.base.yml",
-    "prebuilder": "npm run compile",
-    "builder": "electron-builder --publish=never",
-    "sass": "sass ./src/pages/settings/settings.scss ./src/pages/settings/settings.css && sass --no-source-map src/themes:themes",
-    "style-lint": "npx stylelint **/*.scss",
-    "style-lint-fix": "npx stylelint --fix **/*.scss"
+    "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-base": "electron-builder --publish=never -c ./build/electron-builder.base.yml"
  },
  "keywords": [
    "electron",
    "hifi",
    "widevine",
-    "linux",
-    "drm",
-    "castlabs"
+    "linux"
  ],
  "author": "Rick van Lieshout <info@rickvanlieshout.com> (http://rickvanlieshout.com)",
  "homepage": "https://github.com/Mastermindzh/tidal-hifi",
  "license": "MIT",
  "dependencies": {
-    "@electron/remote": "^2.1.1",
-    "axios": "^1.6.5",
+    "@electron/remote": "^2.0.8",
    "discord-rpc": "^4.0.1",
    "electron-store": "^8.1.0",
-    "express": "^4.18.2",
-    "hotkeys-js": "^3.13.5",
+    "express": "^4.18.1",
+    "hotkeys-js": "^3.9.4",
    "mpris-service": "^2.1.2",
-    "request": "^2.88.2",
-    "sass": "^1.70.0"
+    "request": "^2.88.2"
  },
  "devDependencies": {
    "@mastermindzh/prettier-config": "^1.0.0",
-    "@types/discord-rpc": "^4.0.8",
-    "@types/express": "^4.17.21",
-    "@types/node": "^20.10.6",
-    "@types/request": "^2.48.12",
-    "@typescript-eslint/eslint-plugin": "^6.18.0",
-    "@typescript-eslint/parser": "^6.18.0",
-    "copyfiles": "^2.4.1",
-    "electron": "git+https://github.com/castlabs/electron-releases#v28.1.1+wvcus",
-    "electron-builder": "^24.9.1",
-    "eslint": "^8.56.0",
-    "js-yaml": "^4.1.0",
-    "markdown-toc": "^1.2.0",
-    "nodemon": "^3.0.2",
-    "prettier": "^3.1.1",
-    "stylelint": "^16.1.0",
-    "stylelint-config-standard": "^36.0.0",
-    "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-prettier": "^5.0.0",
-    "tsc-watch": "^6.0.4",
-    "typescript": "^5.3.3"
+    "electron": "git+https://github.com/castlabs/electron-releases.git#v19.0.5+wvcus",
+    "electron-builder": "^23.3.3",
+    "prettier": "^2.7.1"
  },
  "prettier": "@mastermindzh/prettier-config"
 }
--- a/scripts/resize-icons.sh
+++ b/scripts/resize-icons.sh
@@ -1,16 +0,0 @@
-#!/bin/bash
-
-if [ "$1" != "" ]; then # check if arg 1 is present
-    FILE=$1
-else
-    echo "Please provide a file as an argument."
-    exit 1
-fi
-
-SIZES=("16x16" "22x22" "24x24" "32x32" "48x48" "64x64" "128x128" "256x256" "384x384")
-
-echo "Resizing $FILE..."
-
-for i in "${SIZES[@]}"; do
-    convert "$FILE" -resize "$i" "$i.png"
-done
--- a/scripts/verifyElements.js
+++ b/scripts/verifyElements.js
@@ -1,45 +0,0 @@
-// for some dumb reason `listen.tidal.com` has disabled console.log
-// we can simply return an array with values though...
-// run this on a playlist or mix page and observe the result
-// NOTE: play & pause can't live together so one or the other will throw an error
-(() => {
-  let elements = {
-    play: '*[data-test="play"]',
-    pause: '*[data-test="pause"]',
-    next: '*[data-test="next"]',
-    previous: 'button[data-test="previous"]',
-    title: '*[data-test^="footer-track-title"]',
-    artists: '*[data-test^="grid-item-detail-text-title-artist"]',
-    home: '*[data-test="menu--home"]',
-    back: '[title^="Back"]',
-    forward: '[title^="Next"]',
-    search: '[class^="searchField"]',
-    shuffle: '*[data-test="shuffle"]',
-    repeat: '*[data-test="repeat"]',
-    account: '*[class^="profileOptions"]',
-    settings: '*[data-test^="open-settings"]',
-    media: '*[data-test="current-media-imagery"]',
-    image: "img",
-    current: '*[data-test="current-time"]',
-    duration: '*[class^=playbackControlsContainer] *[data-test="duration"]',
-    bar: '*[data-test="progress-bar"]',
-    footer: "#footerPlayer",
-    mediaItem: "[data-type='mediaItem']",
-    album_header_title: '.header-details [data-test="title"]',
-    currentlyPlaying: "[class^='isPlayingIcon'], [data-test-is-playing='true']",
-    album_name_cell: '[class^="album"]',
-    tracklist_row: '[data-test="tracklist-row"]',
-    volume: '*[data-test="volume"]',
-    favorite: '*[data-test="footer-favorite-button"]',
-  };
-
-  let results = [];
-
-  Object.entries(elements).forEach(([key, value]) => {
-    const returnValue = document.querySelector(`${value}`);
-    if (!returnValue) {
-      results.push(`element ${key} not found`);
-    }
-  });
-  return results;
-})();
--- a/src/constants/flags.js
+++ b/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;
--- a/src/constants/flags.ts
+++ b/src/constants/flags.ts
@@ -1,9 +0,0 @@
-export const flags: { [key: string]: { flag: string; value?: string }[] } = {
-  gpuRasterization: [{ flag: "enable-gpu-rasterization", value: undefined }],
-  disableHardwareMediaKeys: [{ flag: "disable-features", value: "HardwareMediaKeyHandling" }],
-  enableWaylandSupport: [
-    { flag: "enable-features", value: "UseOzonePlatform" },
-    { flag: "ozone-platform-hint", value: "auto" },
-    { flag: "enable-features", value: "WaylandWindowDecorations" },
-  ],
-};
--- a/src/constants/globalEvents.js
+++ b/src/constants/globalEvents.js
@@ -1,4 +1,4 @@
-export const globalEvents = {
+const globalEvents = {
  play: "play",
  pause: "pause",
  playPause: "playPause",
@@ -10,7 +10,6 @@ export const globalEvents = {
  showSettings: "showSettings",
  storeChanged: "storeChanged",
  error: "error",
-  whip: "whip",
-  log: "log",
-  toggleFavorite: "toggleFavorite",
 };
+
+module.exports = globalEvents;
--- a/src/constants/mediaKeys.js
+++ b/src/constants/mediaKeys.js
@@ -1,7 +1,9 @@
-import { globalEvents } from "./globalEvents";
+const globalEvents = require("./globalEvents");

-export const mediaKeys = {
+const mediaKeys = {
  MediaPlayPause: globalEvents.playPause,
  MediaNextTrack: globalEvents.next,
  MediaPreviousTrack: globalEvents.previous,
 };
+
+module.exports = mediaKeys;
--- a/src/constants/settings.js
+++ b/src/constants/settings.js
@@ -8,53 +8,33 @@
 *    },
 *    windowBounds: { width: 800, height: 600 },
 */
-export const settings = {
-  adBlock: "adBlock",
+const settings = {
+  notifications: "notifications",
  api: "api",
+  menuBar: "menuBar",
+  playBackControl: "playBackControl",
+  muteArtists: "muteArtists",
+  mutedArtists: "mutedArtists",
  apiSettings: {
    root: "apiSettings",
    port: "apiSettings.port",
  },
-  customCSS: "customCSS",
-  disableBackgroundThrottle: "disableBackgroundThrottle",
+  singleInstance: "singleInstance",
  disableHardwareMediaKeys: "disableHardwareMediaKeys",
-  enableCustomHotkeys: "enableCustomHotkeys",
-  enableDiscord: "enableDiscord",
-  discord: {
-    detailsPrefix: "discord.detailsPrefix",
-    buttonText: "discord.buttonText",
-    includeTimestamps: "discord.includeTimestamps",
-    showSong: "discord.showSong",
-    idleText: "discord.idleText",
-    usingText: "discord.usingText",
-  },
-  ListenBrainz: {
-    root: "ListenBrainz",
-    enabled: "ListenBrainz.enabled",
-    api: "ListenBrainz.api",
-    token: "ListenBrainz.token",
-    delay: "ListenBrainz.delay",
-  },
  flags: {
-    root: "flags",
    disableHardwareMediaKeys: "flags.disableHardwareMediaKeys",
    gpuRasterization: "flags.gpuRasterization",
-    enableWaylandSupport: "flags.enableWaylandSupport",
  },
-  menuBar: "menuBar",
-  minimizeOnClose: "minimizeOnClose",
  mpris: "mpris",
-  notifications: "notifications",
-  playBackControl: "playBackControl",
-  singleInstance: "singleInstance",
-  skipArtists: "skipArtists",
-  skippedArtists: "skippedArtists",
-  theme: "theme",
+  enableCustomHotkeys: "enableCustomHotkeys",
  trayIcon: "trayIcon",
-  updateFrequency: "updateFrequency",
+  enableDiscord: "enableDiscord",
  windowBounds: {
    root: "windowBounds",
    width: "windowBounds.width",
    height: "windowBounds.height",
  },
+  minimizeOnClose: "minimizeOnClose",
 };
+
+module.exports = settings;
--- a/src/constants/statuses.js
+++ b/src/constants/statuses.js
@@ -0,0 +1,4 @@
+module.exports = {
+  playing: "playing",
+  paused: "paused",
+};
--- a/src/constants/values.js
+++ b/src/constants/values.js
@@ -0,0 +1,3 @@
+module.exports = {
+  name: "tidal-hifi",
+};
--- a/src/constants/values.ts
+++ b/src/constants/values.ts
@@ -1,3 +0,0 @@
-export default {
-  name: "TIDAL Hi-Fi",
-};
--- a/src/declarations.d.ts
+++ b/src/declarations.d.ts
@@ -1 +0,0 @@
-declare module "mpris-service";
--- a/src/features/flags/flags.ts
+++ b/src/features/flags/flags.ts
@@ -1,42 +0,0 @@
-import { App } from "electron";
-import { flags } from "../../constants/flags";
-import { settings } from "../../constants/settings";
-import { settingsStore } from "../../scripts/settings";
-import { Logger } from "../logger";
-
-/**
- * Set default Electron flags
- */
-export function setDefaultFlags(app: App) {
-  setFlag(app, "disable-seccomp-filter-sandbox");
-  setFlag(app, "disable-features", "MediaSessionService");
-}
-
-/**
- * Set Tidal's managed flags from the user settings
- * @param app
- */
-export function setManagedFlagsFromSettings(app: App) {
-  const flagsFromSettings = settingsStore.get(settings.flags.root);
-  if (flagsFromSettings) {
-    for (const [key, value] of Object.entries(flagsFromSettings)) {
-      if (value) {
-        flags[key].forEach((flag) => {
-          setFlag(app, flag.flag, flag.value);
-        });
-      }
-    }
-  }
-}
-
-/**
- * Set a single flag for Electron
- * @param app app to set it on
- * @param flag flag name
- * @param value value to be set for the flag
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function setFlag(app: App, flag: string, value?: any) {
-  Logger.log(`enabling command line option ${flag} with value ${value}`);
-  app.commandLine.appendSwitch(flag, value);
-}
--- a/src/features/idleInhibitor/idleInhibitor.ts
+++ b/src/features/idleInhibitor/idleInhibitor.ts
@@ -1,65 +0,0 @@
-import { PowerSaveBlocker, powerSaveBlocker } from "electron";
-import { Logger } from "../logger";
-
-/**
- * Start blocking idle/screen timeouts
- * @param blocker optional instance of the powerSaveBlocker to use
- * @returns id of current block
- */
-export const acquireInhibitor = (blocker?: PowerSaveBlocker): number => {
-  const currentBlocker = blocker ?? powerSaveBlocker;
-  const blockId = currentBlocker.start("prevent-app-suspension");
-  Logger.log(`Started preventing app suspension with id: ${blockId}`);
-  return blockId;
-};
-
-/**
- * Check whether there is a blocker active for the current id, if not start it.
- * @param id id of inhibitor you want to check activity against
- * @param blocker optional instance of the powerSaveBlocker to use
- */
-export const acquireInhibitorIfInactive = (id: number, blocker?: PowerSaveBlocker): number => {
-  const currentBlocker = blocker ?? powerSaveBlocker;
-  if (!isInhibitorActive(id, currentBlocker)) {
-    return acquireInhibitor();
-  }
-
-  return id;
-};
-
-/**
- * stop blocking idle/screen timeouts
- * @param id id of inhibitor you want to check activity against
- * @param blocker optional instance of the powerSaveBlocker to use
- */
-export const releaseInhibitor = (id: number, blocker?: PowerSaveBlocker) => {
-  try {
-    const currentBlocker = blocker ?? powerSaveBlocker;
-    currentBlocker.stop(id);
-    Logger.log(`Released inhibitor with id: ${id}`);
-  } catch (error) {
-    Logger.log("Releasing inhibitor failed");
-  }
-};
-
-/**
- * stop blocking idle/screen timeouts if a inhibitor is active
- * @param id id of inhibitor you want to check activity against
- * @param blocker optional instance of the powerSaveBlocker to use
- */
-export const releaseInhibitorIfActive = (id: number, blocker?: PowerSaveBlocker) => {
-  const currentBlocker = blocker ?? powerSaveBlocker;
-  if (isInhibitorActive(id, currentBlocker)) {
-    releaseInhibitor(id, currentBlocker);
-  }
-};
-
-/**
- * check whether the inhibitor is active
- * @param id id of inhibitor you want to check activity against
- * @param blocker optional instance of the powerSaveBlocker to use
- */
-export const isInhibitorActive = (id: number, blocker?: PowerSaveBlocker) => {
-  const currentBlocker = blocker ?? powerSaveBlocker;
-  return currentBlocker.isStarted(id);
-};
--- a/src/features/listenbrainz/listenbrainz.ts
+++ b/src/features/listenbrainz/listenbrainz.ts
@@ -1,132 +0,0 @@
-import axios from "axios";
-import Store from "electron-store";
-import { settings } from "../../constants/settings";
-import { MediaStatus } from "../../models/mediaStatus";
-import { settingsStore } from "../../scripts/settings";
-import { Logger } from "../logger";
-import { StoreData } from "./models/storeData";
-
-const ListenBrainzStore = new Store({ name: "listenbrainz" });
-
-export const ListenBrainzConstants = {
-  oldData: "oldData",
-};
-
-export class ListenBrainz {
-  /**
-   * Create the object to store old information in the Store :)
-   * @param title
-   * @param artists
-   * @param duration
-   * @returns data passed along in an object + a "listenedAt" key with the current time
-   */
-  private static constructStoreData(title: string, artists: string, duration: number): StoreData {
-    return {
-      listenedAt: Math.floor(new Date().getTime() / 1000),
-      title,
-      artists,
-      duration,
-    };
-  }
-
-  /**
-   * Call the ListenBrainz API and create playing now payload and scrobble old song
-   * @param title
-   * @param artists
-   * @param status
-   * @param duration
-   */
-  public static async scrobble(
-    title: string,
-    artists: string,
-    status: string,
-    duration: number
-  ): Promise<void> {
-    try {
-      if (status === MediaStatus.paused) {
-        return;
-      } else {
-        // Fetches the oldData required for scrobbling and proceeds to construct a playing_now data payload for the Playing Now area
-        const oldData = ListenBrainzStore.get(ListenBrainzConstants.oldData) as StoreData;
-        const playing_data = {
-          listen_type: "playing_now",
-          payload: [
-            {
-              track_metadata: {
-                additional_info: {
-                  media_player: "Tidal Hi-Fi",
-                  submission_client: "Tidal Hi-Fi",
-                  music_service: "tidal.com",
-                  duration: duration,
-                },
-                artist_name: artists,
-                track_name: title,
-              },
-            },
-          ],
-        };
-
-        await axios.post(
-          `${settingsStore.get<string, string>(settings.ListenBrainz.api)}/1/submit-listens`,
-          playing_data,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Token ${settingsStore.get<string, string>(
-                settings.ListenBrainz.token
-              )}`,
-            },
-          }
-        );
-        if (!oldData) {
-          ListenBrainzStore.set(
-            ListenBrainzConstants.oldData,
-            this.constructStoreData(title, artists, duration)
-          );
-        } else {
-          if (oldData.title !== title) {
-            // This constructs the data required to scrobble the data after the song finishes
-            const scrobble_data = {
-              listen_type: "single",
-              payload: [
-                {
-                  listened_at: oldData.listenedAt,
-                  track_metadata: {
-                    additional_info: {
-                      media_player: "Tidal Hi-Fi",
-                      submission_client: "Tidal Hi-Fi",
-                      music_service: "listen.tidal.com",
-                      duration: oldData.duration,
-                    },
-                    artist_name: oldData.artists,
-                    track_name: oldData.title,
-                  },
-                },
-              ],
-            };
-            await axios.post(
-              `${settingsStore.get<string, string>(settings.ListenBrainz.api)}/1/submit-listens`,
-              scrobble_data,
-              {
-                headers: {
-                  "Content-Type": "application/json",
-                  Authorization: `Token ${settingsStore.get<string, string>(
-                    settings.ListenBrainz.token
-                  )}`,
-                },
-              }
-            );
-            ListenBrainzStore.set(
-              ListenBrainzConstants.oldData,
-              this.constructStoreData(title, artists, duration)
-            );
-          }
-        }
-      }
-    } catch (error) {
-      Logger.log(JSON.stringify(error));
-    }
-  }
-}
-
-export { ListenBrainzStore };
--- a/src/features/listenbrainz/models/storeData.ts
+++ b/src/features/listenbrainz/models/storeData.ts
@@ -1,9 +0,0 @@
-/**
- * Data saved for ListenBrainz
- */
-export interface StoreData {
-  listenedAt: number;
-  title: string;
-  artists: string;
-  duration: number;
-}
--- a/src/features/logger.ts
+++ b/src/features/logger.ts
@@ -1,52 +0,0 @@
-import { IpcMain, ipcMain, IpcMainEvent, ipcRenderer } from "electron";
-import { globalEvents } from "../constants/globalEvents";
-
-export class Logger {
-  /**
-   * Subscribe to watch for logs from the IPC client
-   * @param ipcMain main thread IPC client so we can subscribe to events
-   */
-  public static watch(ipcMain: IpcMain) {
-    ipcMain.on(
-      globalEvents.log,
-      (event: IpcMainEvent | { content: string; message: string }, message) => {
-        const { content, object } = message ?? event;
-        this.logToSTDOut(content, object);
-      }
-    );
-  }
-  /**
-   * Log content to STDOut
-   * @param content
-   * @param object js(on) object that will be prettyPrinted
-   */
-  public static log(content: string, object: object = {}) {
-    if (ipcRenderer) {
-      ipcRenderer.send(globalEvents.log, { content, object });
-    } else {
-      ipcMain.emit(globalEvents.log, { content, object });
-    }
-  }
-
-  /**
-   * Log content to STDOut and use the provided alert function to alert
-   * @param content
-   * @param object js(on) object that will be prettyPrinted
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  public static alert(content: string, object: any = {}, alert?: (msg: string) => void) {
-    Logger.log(content, object);
-    if (alert) {
-      alert(`${content} \n\nwith details: \n${JSON.stringify(object, null, 2)}`);
-    }
-  }
-
-  /**
-   * Log to STDOut
-   * @param content
-   * @param object
-   */
-  private static logToSTDOut(content: string, object = {}) {
-    console.log(content, Object.keys(object).length > 0 ? JSON.stringify(object, null, 2) : "");
-  }
-}
--- a/src/features/songwhip/models/Artist.ts
+++ b/src/features/songwhip/models/Artist.ts
@@ -1,21 +0,0 @@
-import { ServiceLinks } from "./ServiceLinks";
-
-export interface Artist {
-  type: string;
-  id: number;
-  path: string;
-  name: string;
-  sourceUrl: string;
-  sourceCountry: string;
-  url: string;
-  image: string;
-  createdAt: string;
-  updatedAt: string;
-  refreshedAt: string;
-  serviceIds: { [key: string]: string };
-  orchardId: string;
-  spotifyId: string;
-  links: { [key: string]: ServiceLinks[] };
-  linksCountries: string[];
-  description: string;
-}
--- a/src/features/songwhip/models/ServiceLinks.ts
+++ b/src/features/songwhip/models/ServiceLinks.ts
@@ -1,4 +0,0 @@
-export interface ServiceLinks {
-  link: string;
-  countries: string[];
-}
--- a/src/features/songwhip/models/whip.ts
+++ b/src/features/songwhip/models/whip.ts
@@ -1,27 +0,0 @@
-import { Artist } from "./Artist";
-import { ServiceLinks } from "./ServiceLinks";
-
-export interface WhippedResult {
-  status: string;
-  data: {
-    item: {
-      type: string;
-      id: number;
-      path: string;
-      name: string;
-      url: string;
-      sourceUrl: string;
-      sourceCountry: string;
-      releaseDate: string;
-      createdAt: string;
-      updatedAt: string;
-      refreshedAt: string;
-      image: string;
-      isrc: string;
-      isExplicit: boolean;
-      links: { [key: string]: ServiceLinks[] };
-      linksCountries: string[];
-      artists: Artist[];
-    };
-  };
-}
--- a/src/features/songwhip/songwhip.ts
+++ b/src/features/songwhip/songwhip.ts
@@ -1,32 +0,0 @@
-import { WhippedResult } from "./models/whip";
-import axios from "axios";
-
-export class Songwhip {
-  /**
-   * Call the songwhip API and create a shareable songwhip page
-   * @param currentUrl
-   * @returns
-   */
-  public static async whip(currentUrl: string): Promise<WhippedResult> {
-    try {
-      const response = await axios.post("https://songwhip.com/api/songwhip/create", {
-        url: currentUrl,
-        // doesn't actually matter.. returns everything the same way anyway
-        country: "NL",
-      });
-
-      return response.data;
-    } catch (error) {
-      console.log(JSON.stringify(error));
-    }
-  }
-
-  /**
-   * Transform a songwhip response into a shareable url
-   * @param response
-   * @returns
-   */
-  public static getWhipUrl(response: WhippedResult) {
-    return `https://songwhip.com${response.data.item.url}`;
-  }
-}
--- a/src/features/theming/theming.ts
+++ b/src/features/theming/theming.ts
@@ -1,31 +0,0 @@
-import fs from "fs";
-import { settings } from "../../constants/settings";
-import { settingsStore } from "../../scripts/settings";
-import { Logger } from "../logger";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function addCustomCss(app: any) {
-  window.addEventListener("DOMContentLoaded", () => {
-    const selectedTheme = settingsStore.get<string, string>(settings.theme);
-    if (selectedTheme !== "none") {
-      const userThemePath = `${app.getPath("userData")}/themes/${selectedTheme}`;
-      const resourcesThemePath = `${process.resourcesPath}/${selectedTheme}`;
-      const themeFile = fs.existsSync(userThemePath) ? userThemePath : resourcesThemePath;
-      fs.readFile(themeFile, "utf-8", (err, data) => {
-        if (err) {
-          Logger.alert("An error ocurred reading the theme file.", err, alert);
-          return;
-        }
-
-        const themeStyle = document.createElement("style");
-        themeStyle.innerHTML = data;
-        document.head.appendChild(themeStyle);
-      });
-    }
-
-    // read customCSS (it will override the theme)
-    const style = document.createElement("style");
-    style.innerHTML = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
-    document.head.appendChild(style);
-  });
-}
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,191 @@
+require("@electron/remote/main").initialize();
+const { app, BrowserWindow, components, globalShortcut, ipcMain, protocol } = require("electron");
+const {
+  settings,
+  store,
+  createSettingsWindow,
+  showSettingsWindow,
+  closeSettingsWindow,
+  hideSettingsWindow,
+} = require("./scripts/settings");
+const { addTray, refreshTray } = require("./scripts/tray");
+const { addMenu } = require("./scripts/menu");
+const path = require("path");
+const tidalUrl = "https://listen.tidal.com";
+const expressModule = require("./scripts/express");
+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();
+
+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
+ *
+ */
+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({
+    x: options.x,
+    y: options.y,
+    width: store && store.get(settings.windowBounds.width),
+    height: store && store.get(settings.windowBounds.height),
+    icon,
+    backgroundColor: options.backgroundColor,
+    webPreferences: {
+      preload: path.join(__dirname, "preload.js"),
+      plugins: true,
+      devTools: true, // I like tinkering, others might too
+    },
+  });
+  require("@electron/remote/main").enable(mainWindow.webContents);
+  registerHttpProtocols();
+  syncMenuBarWithStore();
+
+  // load the Tidal website
+  mainWindow.loadURL(tidalUrl);
+
+  // run stuff after first load
+  mainWindow.webContents.once("did-finish-load", () => {});
+
+  mainWindow.on("close", function (event) {
+    if (!app.isQuiting && store.get(settings.minimizeOnClose)) {
+      event.preventDefault();
+      mainWindow.hide();
+      refreshTray(mainWindow);
+    }
+    return false;
+  });
+  // Emitted when the window is closed.
+  mainWindow.on("closed", function () {
+    closeSettingsWindow();
+    app.quit();
+  });
+  mainWindow.on("resize", () => {
+    let { width, height } = mainWindow.getBounds();
+
+    store.set(settings.windowBounds.root, { width, height });
+  });
+}
+
+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}`, () => {
+      mainWindow.webContents.send("globalEvent", `${mediaKeys[key]}`);
+    });
+  });
+}
+
+// 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", async () => {
+  if (isMainInstanceOrMultipleInstancesAllowed()) {
+    await components.whenReady();
+    createWindow();
+    addMenu(mainWindow);
+    createSettingsWindow();
+    addGlobalShortcuts();
+    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 () {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow();
+  }
+});
+
+app.on("browser-window-created", (_, window) => {
+  require("@electron/remote/main").enable(window.webContents);
+});
+
+// IPC
+ipcMain.on(globalEvents.updateInfo, (_event, arg) => {
+  mediaInfoModule.update(arg);
+});
+
+ipcMain.on(globalEvents.hideSettings, (_event, _arg) => {
+  hideSettingsWindow();
+});
+ipcMain.on(globalEvents.showSettings, (_event, _arg) => {
+  showSettingsWindow();
+});
+
+ipcMain.on(globalEvents.refreshMenuBar, (_event, _arg) => {
+  syncMenuBarWithStore();
+});
+
+ipcMain.on(globalEvents.storeChanged, (_event, _arg) => {
+  syncMenuBarWithStore();
+
+  if (store.get(settings.enableDiscord) && !discordModule.rpc) {
+    discordModule.initRPC();
+  } else if (!store.get(settings.enableDiscord) && discordModule.rpc) {
+    discordModule.unRPC();
+  }
+});
+
+ipcMain.on(globalEvents.error, (event, _arg) => {
+  console.log(event);
+});
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,241 +0,0 @@
-import { enable, initialize } from "@electron/remote/main";
-import {
-  app,
-  BrowserWindow,
-  components,
-  globalShortcut,
-  ipcMain,
-  protocol,
-  session,
-} from "electron";
-import path from "path";
-import { globalEvents } from "./constants/globalEvents";
-import { mediaKeys } from "./constants/mediaKeys";
-import { settings } from "./constants/settings";
-import { setDefaultFlags, setManagedFlagsFromSettings } from "./features/flags/flags";
-import {
-  acquireInhibitorIfInactive,
-  releaseInhibitorIfActive,
-} from "./features/idleInhibitor/idleInhibitor";
-import { Logger } from "./features/logger";
-import { Songwhip } from "./features/songwhip/songwhip";
-import { MediaInfo } from "./models/mediaInfo";
-import { MediaStatus } from "./models/mediaStatus";
-import { initRPC, rpc, unRPC } from "./scripts/discord";
-import { startExpress } from "./scripts/express";
-import { updateMediaInfo } from "./scripts/mediaInfo";
-import { addMenu } from "./scripts/menu";
-import {
-  closeSettingsWindow,
-  createSettingsWindow,
-  hideSettingsWindow,
-  settingsStore,
-  showSettingsWindow,
-} from "./scripts/settings";
-import { addTray, refreshTray } from "./scripts/tray";
-const tidalUrl = "https://listen.tidal.com";
-let mainInhibitorId = -1;
-
-initialize();
-let mainWindow: BrowserWindow;
-const icon = path.join(__dirname, "../assets/icon.png");
-const PROTOCOL_PREFIX = "tidal";
-const windowPreferences = {
-  sandbox: false,
-  plugins: true,
-  devTools: true, // I like tinkering, others might too
-};
-
-setDefaultFlags(app);
-setManagedFlagsFromSettings(app);
-
-/**
- * Update the menuBarVisibility according to the store value
- *
- */
-function syncMenuBarWithStore() {
-  const fixedMenuBar = !!settingsStore.get(settings.menuBar);
-
-  mainWindow.autoHideMenuBar = !fixedMenuBar;
-  mainWindow.setMenuBarVisibility(fixedMenuBar);
-}
-
-/**
- * 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 (settingsStore.get(settings.singleInstance)) {
-    const gotTheLock = app.requestSingleInstanceLock();
-
-    if (!gotTheLock) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function createWindow(options = { x: 0, y: 0, backgroundColor: "white" }) {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    x: options.x,
-    y: options.y,
-    width: settingsStore?.get(settings.windowBounds.width),
-    height: settingsStore?.get(settings.windowBounds.height),
-    icon,
-    backgroundColor: options.backgroundColor,
-    autoHideMenuBar: true,
-    webPreferences: {
-      ...windowPreferences,
-      ...{
-        preload: path.join(__dirname, "preload.js"),
-      },
-    },
-  });
-  enable(mainWindow.webContents);
-  registerHttpProtocols();
-  syncMenuBarWithStore();
-
-  // load the Tidal website
-  mainWindow.loadURL(tidalUrl);
-
-  if (settingsStore.get(settings.disableBackgroundThrottle)) {
-    // prevent setInterval lag
-    mainWindow.webContents.setBackgroundThrottling(false);
-  }
-
-  mainWindow.on("close", function (event: CloseEvent) {
-    if (settingsStore.get(settings.minimizeOnClose)) {
-      event.preventDefault();
-      mainWindow.hide();
-      refreshTray(mainWindow);
-    }
-    return false;
-  });
-  // Emitted when the window is closed.
-  mainWindow.on("closed", function () {
-    releaseInhibitorIfActive(mainInhibitorId);
-    closeSettingsWindow();
-    app.quit();
-  });
-  mainWindow.on("resize", () => {
-    const { width, height } = mainWindow.getBounds();
-    settingsStore.set(settings.windowBounds.root, { width, height });
-  });
-  mainWindow.webContents.setWindowOpenHandler(() => {
-    return {
-      action: "allow",
-      overrideBrowserWindowOptions: {
-        webPreferences: {
-          sandbox: false,
-          plugins: true,
-          devTools: true, // I like tinkering, others might too
-        },
-      },
-    };
-  });
-}
-
-function registerHttpProtocols() {
-  protocol.registerHttpProtocol(PROTOCOL_PREFIX, (request) => {
-    mainWindow.loadURL(`${tidalUrl}/${request.url.substring(PROTOCOL_PREFIX.length + 3)}`);
-  });
-  if (!app.isDefaultProtocolClient(PROTOCOL_PREFIX)) {
-    app.setAsDefaultProtocolClient(PROTOCOL_PREFIX);
-  }
-}
-
-function addGlobalShortcuts() {
-  Object.keys(mediaKeys).forEach((key) => {
-    globalShortcut.register(`${key}`, () => {
-      mainWindow.webContents.send("globalEvent", `${(mediaKeys as any)[key]}`);
-    });
-  });
-}
-
-// 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", async () => {
-  if (isMainInstanceOrMultipleInstancesAllowed()) {
-    await components.whenReady();
-
-    // Adblock
-    if (settingsStore.get(settings.adBlock)) {
-      const filter = { urls: ["https://listen.tidal.com/*"] };
-      session.defaultSession.webRequest.onBeforeRequest(filter, (details, callback) => {
-        if (details.url.match(/\/users\/.*\d\?country/)) callback({ cancel: true });
-        else callback({ cancel: false });
-      });
-    }
-
-    createWindow();
-    addMenu(mainWindow);
-    createSettingsWindow();
-    addGlobalShortcuts();
-    if (settingsStore.get(settings.trayIcon)) {
-      addTray(mainWindow, { icon });
-      refreshTray(mainWindow);
-    }
-    settingsStore.get(settings.api) && startExpress(mainWindow);
-    settingsStore.get(settings.enableDiscord) && initRPC();
-  } else {
-    app.quit();
-  }
-});
-
-app.on("activate", function () {
-  // On OS X it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) {
-    createWindow();
-  }
-});
-
-app.on("browser-window-created", (_, window) => {
-  enable(window.webContents);
-});
-
-// IPC
-ipcMain.on(globalEvents.updateInfo, (_event, arg: MediaInfo) => {
-  updateMediaInfo(arg);
-  if (arg.status === MediaStatus.playing) {
-    mainInhibitorId = acquireInhibitorIfInactive(mainInhibitorId);
-  } else {
-    releaseInhibitorIfActive(mainInhibitorId);
-    mainInhibitorId = -1;
-  }
-});
-
-ipcMain.on(globalEvents.hideSettings, () => {
-  hideSettingsWindow();
-});
-ipcMain.on(globalEvents.showSettings, () => {
-  showSettingsWindow();
-});
-
-ipcMain.on(globalEvents.refreshMenuBar, () => {
-  syncMenuBarWithStore();
-});
-
-ipcMain.on(globalEvents.storeChanged, () => {
-  syncMenuBarWithStore();
-
-  if (settingsStore.get(settings.enableDiscord) && !rpc) {
-    initRPC();
-  } else if (!settingsStore.get(settings.enableDiscord) && rpc) {
-    unRPC();
-  }
-});
-
-ipcMain.on(globalEvents.error, (event) => {
-  console.log(event);
-});
-
-ipcMain.handle(globalEvents.whip, async (event, url) => {
-  return Songwhip.whip(url);
-});
-
-Logger.watch(ipcMain);
--- a/src/models/mediaInfo.ts
+++ b/src/models/mediaInfo.ts
@@ -1,14 +0,0 @@
-import { MediaStatus } from "./mediaStatus";
-
-export interface MediaInfo {
-  title: string;
-  artists: string;
-  album: string;
-  icon: string;
-  status: MediaStatus;
-  url: string;
-  current: string;
-  duration: string;
-  image: string;
-  favorite: boolean;
-}
--- a/src/models/mediaStatus.ts
+++ b/src/models/mediaStatus.ts
@@ -1,4 +0,0 @@
-export enum MediaStatus {
-  playing = "playing",
-  paused = "paused",
-}
--- a/src/models/options.ts
+++ b/src/models/options.ts
@@ -1,13 +0,0 @@
-export interface Options {
-  title: string;
-  artists: string;
-  album: string;
-  status: string;
-  url: string;
-  current: string;
-  duration: string;
-  "app-name": string;
-  image: string;
-  icon: string;
-  favorite: boolean;
-}
--- a/src/pages/settings/fonts/NotoSans-Bold.ttf
+++ b/src/pages/settings/fonts/NotoSans-Bold.ttf
--- a/src/pages/settings/fonts/NotoSans-Light.ttf
+++ b/src/pages/settings/fonts/NotoSans-Light.ttf
--- a/src/pages/settings/fonts/NotoSans-Regular.ttf
+++ b/src/pages/settings/fonts/NotoSans-Regular.ttf
--- a/src/pages/settings/fonts/NotoSans-SemiBold.ttf
+++ b/src/pages/settings/fonts/NotoSans-SemiBold.ttf
--- a/src/pages/settings/icon.png
+++ b/src/pages/settings/icon.png
--- a/src/pages/settings/preload.js
+++ b/src/pages/settings/preload.js
@@ -0,0 +1,141 @@
+let trayIcon,
+  minimizeOnClose,
+  mpris,
+  enableCustomHotkeys,
+  enableDiscord,
+  muteArtists,
+  notifications,
+  playBackControl,
+  api,
+  port,
+  menuBar,
+  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
+ */
+function refreshSettings() {
+  notifications.checked = store.get(settings.notifications);
+  playBackControl.checked = store.get(settings.playBackControl);
+  api.checked = store.get(settings.api);
+  port.value = store.get(settings.apiSettings.port);
+  menuBar.checked = store.get(settings.menuBar);
+  trayIcon.checked = store.get(settings.trayIcon);
+  mpris.checked = store.get(settings.mpris);
+  enableCustomHotkeys.checked = store.get(settings.enableCustomHotkeys);
+  enableDiscord.checked = store.get(settings.enableDiscord);
+  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
+ */
+function openExternal(url) {
+  const { shell } = require("electron");
+  shell.openExternal(url);
+}
+
+/**
+ * hide the settings window
+ */
+function hide() {
+  ipcRenderer.send(globalEvents.hideSettings);
+}
+
+/**
+ * Restart tidal-hifi after changes
+ */
+function restart() {
+  app.relaunch();
+  app.quit();
+}
+
+/**
+ * Bind UI components to functions after DOMContentLoaded
+ */
+window.addEventListener("DOMContentLoaded", () => {
+  function get(id) {
+    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) {
+      if (this.value === "on") {
+        store.set(key, source.checked);
+      } else {
+        store.set(key, this.value);
+      }
+      ipcRenderer.send(globalEvents.storeChanged);
+    });
+  }
+
+  function addTextAreaListener(source, key) {
+    source.addEventListener("input", function (_event, _data) {
+      store.set(key, source.value.split("\n"));
+      ipcRenderer.send(globalEvents.storeChanged);
+    });
+  }
+
+  ipcRenderer.on("refreshData", () => {
+    refreshSettings();
+  });
+
+  ipcRenderer.on("goToTab", (_, tab) => {
+    document.getElementById(tab).click();
+  });
+
+  notifications = get("notifications");
+  playBackControl = get("playBackControl");
+  api = get("apiCheckbox");
+  port = get("port");
+  menuBar = get("menuBar");
+  trayIcon = get("trayIcon");
+  minimizeOnClose = get("minimizeOnClose");
+  mpris = get("mprisCheckbox");
+  enableCustomHotkeys = get("enableCustomHotkeys");
+  enableDiscord = get("enableDiscord");
+  muteArtists = get("muteArtists");
+  mutedArtists = get("mutedArtists");
+  singleInstance = get("singleInstance");
+  disableHardwareMediaKeys = get("disableHardwareMediaKeys");
+  gpuRasterization = get("gpuRasterization");
+
+  refreshSettings();
+
+  addInputListener(notifications, settings.notifications);
+  addInputListener(playBackControl, settings.playBackControl);
+  addInputListener(api, settings.api);
+  addInputListener(port, settings.apiSettings.port);
+  addInputListener(menuBar, settings.menuBar);
+  addInputListener(trayIcon, settings.trayIcon);
+  addInputListener(mpris, settings.mpris);
+  addInputListener(enableCustomHotkeys, settings.enableCustomHotkeys);
+  addInputListener(enableDiscord, settings.enableDiscord);
+  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);
+});
--- a/src/pages/settings/preload.ts
+++ b/src/pages/settings/preload.ts
@@ -1,305 +0,0 @@
-import { app } from "@electron/remote";
-import { ipcRenderer, shell } from "electron";
-import fs from "fs";
-import { globalEvents } from "../../constants/globalEvents";
-import { settings } from "../../constants/settings";
-import { Logger } from "../../features/logger";
-import { addCustomCss } from "../../features/theming/theming";
-import { settingsStore } from "./../../scripts/settings";
-import { getOptions, getOptionsHeader, getThemeListFromDirectory } from "./theming";
-
-// All switches on the settings screen that show additional options based on their state
-const switchesWithSettings = {
-  listenBrainz: {
-    switch: "enableListenBrainz",
-    classToHide: "listenbrainz__options",
-    settingsKey: settings.ListenBrainz.enabled,
-  },
-  discord: {
-    switch: "enableDiscord",
-    classToHide: "discord_options",
-    settingsKey: settings.enableDiscord,
-  },
-  discord_show_song: {
-    switch: "discord_show_song",
-    classToHide: "discord_show_song_options",
-    settingsKey: settings.discord.showSong,
-  }
-};
-
-let adBlock: HTMLInputElement,
-  api: HTMLInputElement,
-  customCSS: HTMLInputElement,
-  disableBackgroundThrottle: HTMLInputElement,
-  disableHardwareMediaKeys: HTMLInputElement,
-  enableCustomHotkeys: HTMLInputElement,
-  enableDiscord: HTMLInputElement,
-  gpuRasterization: HTMLInputElement,
-  menuBar: HTMLInputElement,
-  minimizeOnClose: HTMLInputElement,
-  mpris: HTMLInputElement,
-  notifications: HTMLInputElement,
-  playBackControl: HTMLInputElement,
-  port: HTMLInputElement,
-  singleInstance: HTMLInputElement,
-  skipArtists: HTMLInputElement,
-  skippedArtists: HTMLInputElement,
-  theme: HTMLSelectElement,
-  trayIcon: HTMLInputElement,
-  updateFrequency: HTMLInputElement,
-  enableListenBrainz: HTMLInputElement,
-  ListenBrainzAPI: HTMLInputElement,
-  ListenBrainzToken: HTMLInputElement,
-  listenbrainz_delay: HTMLInputElement,
-  enableWaylandSupport: HTMLInputElement,
-  discord_details_prefix: HTMLInputElement,
-  discord_include_timestamps: HTMLInputElement,
-  discord_button_text: HTMLInputElement,
-  discord_show_song: HTMLInputElement,
-  discord_idle_text: HTMLInputElement,
-  discord_using_text: HTMLInputElement;
-
-addCustomCss(app);
-
-function getThemeFiles() {
-  const selectElement = document.getElementById("themesList") as HTMLSelectElement;
-  const builtInThemes = getThemeListFromDirectory(process.resourcesPath);
-  const userThemes = getThemeListFromDirectory(`${app.getPath("userData")}/themes`);
-
-  let allThemes = [
-    getOptionsHeader("Built-in Themes"),
-    new Option("Tidal - Default", "none"),
-  ].concat(getOptions(builtInThemes));
-
-  if (userThemes.length >= 1) {
-    allThemes = allThemes.concat([getOptionsHeader("User Themes")]).concat(getOptions(userThemes));
-  }
-
-  // empty old options
-  const oldOptions = document.querySelectorAll("#themesList option");
-  oldOptions.forEach((o) => o.remove());
-
-  allThemes.forEach((option) => {
-    selectElement.add(option, null);
-  });
-}
-
-function handleFileUploads() {
-  const fileMessage = document.getElementById("file-message");
-  fileMessage.innerText = "or drag and drop files here";
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  document.getElementById("theme-files").addEventListener("change", function (e: any) {
-    Array.from(e.target.files).forEach((file: File) => {
-      const destination = `${app.getPath("userData")}/themes/${file.name}`;
-      fs.copyFileSync(file.path, destination, null);
-    });
-    fileMessage.innerText = `${e.target.files.length} files successfully uploaded`;
-    getThemeFiles();
-  });
-}
-
-/**
- * hide or unhide an element
- * @param checked
- * @param toggleOptions
- */
-function setElementHidden(
-  checked: boolean,
-  toggleOptions: { switch: string; classToHide: string }
-) {
-  const element = document.getElementById(toggleOptions.classToHide);
-
-  checked ? element.classList.remove("hidden") : element.classList.add("hidden");
-}
-
-/**
- * Sync the UI forms with the current settings
- */
-function refreshSettings() {
-  try {
-    adBlock.checked = settingsStore.get(settings.adBlock);
-    api.checked = settingsStore.get(settings.api);
-    customCSS.value = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
-    disableBackgroundThrottle.checked = settingsStore.get(settings.disableBackgroundThrottle);
-    disableHardwareMediaKeys.checked = settingsStore.get(settings.flags.disableHardwareMediaKeys);
-    enableCustomHotkeys.checked = settingsStore.get(settings.enableCustomHotkeys);
-    enableDiscord.checked = settingsStore.get(settings.enableDiscord);
-    enableWaylandSupport.checked = settingsStore.get(settings.flags.enableWaylandSupport);
-    gpuRasterization.checked = settingsStore.get(settings.flags.gpuRasterization);
-    menuBar.checked = settingsStore.get(settings.menuBar);
-    minimizeOnClose.checked = settingsStore.get(settings.minimizeOnClose);
-    mpris.checked = settingsStore.get(settings.mpris);
-    notifications.checked = settingsStore.get(settings.notifications);
-    playBackControl.checked = settingsStore.get(settings.playBackControl);
-    port.value = settingsStore.get(settings.apiSettings.port);
-    singleInstance.checked = settingsStore.get(settings.singleInstance);
-    skipArtists.checked = settingsStore.get(settings.skipArtists);
-    theme.value = settingsStore.get(settings.theme);
-    skippedArtists.value = settingsStore.get<string, string[]>(settings.skippedArtists).join("\n");
-    trayIcon.checked = settingsStore.get(settings.trayIcon);
-    updateFrequency.value = settingsStore.get(settings.updateFrequency);
-    enableListenBrainz.checked = settingsStore.get(settings.ListenBrainz.enabled);
-    ListenBrainzAPI.value = settingsStore.get(settings.ListenBrainz.api);
-    ListenBrainzToken.value = settingsStore.get(settings.ListenBrainz.token);
-    listenbrainz_delay.value = settingsStore.get(settings.ListenBrainz.delay);
-    discord_details_prefix.value = settingsStore.get(settings.discord.detailsPrefix);
-    discord_include_timestamps.checked = settingsStore.get(settings.discord.includeTimestamps);
-    discord_button_text.value = settingsStore.get(settings.discord.buttonText);
-    discord_show_song.checked = settingsStore.get(settings.discord.showSong);
-    discord_idle_text.value = settingsStore.get(settings.discord.idleText);
-    discord_using_text.value = settingsStore.get(settings.discord.usingText);
-
-    // set state of all switches with additional settings
-    Object.values(switchesWithSettings).forEach((settingSwitch) => {
-      setElementHidden(settingsStore.get(settingSwitch.settingsKey), settingSwitch);
-    });
-  } catch (error) {
-    Logger.log("Refreshing settings failed.", error);
-  }
-}
-
-/**
- * Open an url in the default browsers
- */
-function openExternal(url: string) {
-  shell.openExternal(url);
-}
-
-/**
- * hide the settings window
- */
-function hide() {
-  ipcRenderer.send(globalEvents.hideSettings);
-}
-
-/**
- * Bind UI components to functions after DOMContentLoaded
- */
-window.addEventListener("DOMContentLoaded", () => {
-  function get<T = HTMLInputElement>(id: string): T {
-    return document.getElementById(id) as T;
-  }
-
-  getThemeFiles();
-  handleFileUploads();
-
-  document.getElementById("close").addEventListener("click", hide);
-  document.querySelectorAll(".external-link").forEach((elem) =>
-    elem.addEventListener("click", function (event) {
-      openExternal((event.target as HTMLElement).getAttribute("data-url"));
-    })
-  );
-
-  function addInputListener(
-    source: HTMLInputElement,
-    key: string,
-    toggleOptions?: { switch: string; classToHide: string }
-  ) {
-    source.addEventListener("input", () => {
-      if (source.value === "on") {
-        settingsStore.set(key, source.checked);
-      } else {
-        settingsStore.set(key, source.value);
-      }
-
-      if (toggleOptions) {
-        if (source.value === "on" && source.id === toggleOptions.switch) {
-          setElementHidden(source.checked, toggleOptions);
-        }
-      }
-      ipcRenderer.send(globalEvents.storeChanged);
-    });
-  }
-
-  function addTextAreaListener(source: HTMLInputElement, key: string) {
-    source.addEventListener("input", () => {
-      settingsStore.set(key, source.value.split("\n"));
-      ipcRenderer.send(globalEvents.storeChanged);
-    });
-  }
-
-  function addSelectListener(source: HTMLSelectElement, key: string) {
-    source.addEventListener("change", () => {
-      settingsStore.set(key, source.value);
-      ipcRenderer.send(globalEvents.storeChanged);
-    });
-  }
-
-  ipcRenderer.on("refreshData", () => {
-    refreshSettings();
-  });
-
-  ipcRenderer.on("goToTab", (_, tab) => {
-    document.getElementById(tab).click();
-  });
-
-  adBlock = get("adBlock");
-  api = get("apiCheckbox");
-  customCSS = get("customCSS");
-  disableBackgroundThrottle = get("disableBackgroundThrottle");
-  disableHardwareMediaKeys = get("disableHardwareMediaKeys");
-  enableCustomHotkeys = get("enableCustomHotkeys");
-  enableDiscord = get("enableDiscord");
-  enableWaylandSupport = get("enableWaylandSupport");
-  gpuRasterization = get("gpuRasterization");
-  menuBar = get("menuBar");
-  minimizeOnClose = get("minimizeOnClose");
-  mpris = get("mprisCheckbox");
-  notifications = get("notifications");
-  playBackControl = get("playBackControl");
-  port = get("port");
-  theme = get<HTMLSelectElement>("themesList");
-  trayIcon = get("trayIcon");
-  skipArtists = get("skipArtists");
-  skippedArtists = get("skippedArtists");
-  singleInstance = get("singleInstance");
-  updateFrequency = get("updateFrequency");
-  enableListenBrainz = get("enableListenBrainz");
-  ListenBrainzAPI = get("ListenBrainzAPI");
-  ListenBrainzToken = get("ListenBrainzToken");
-  discord_details_prefix = get("discord_details_prefix");
-  discord_include_timestamps = get("discord_include_timestamps");
-  listenbrainz_delay = get("listenbrainz_delay");
-  discord_button_text = get("discord_button_text");
-  discord_show_song = get("discord_show_song");
-  discord_using_text = get("discord_using_text");
-  discord_idle_text = get("discord_idle_text")
-
-  refreshSettings();
-  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);
-  addInputListener(enableDiscord, settings.enableDiscord, switchesWithSettings.discord);
-  addInputListener(enableWaylandSupport, settings.flags.enableWaylandSupport);
-  addInputListener(gpuRasterization, settings.flags.gpuRasterization);
-  addInputListener(menuBar, settings.menuBar);
-  addInputListener(minimizeOnClose, settings.minimizeOnClose);
-  addInputListener(mpris, settings.mpris);
-  addInputListener(notifications, settings.notifications);
-  addInputListener(playBackControl, settings.playBackControl);
-  addInputListener(port, settings.apiSettings.port);
-  addInputListener(skipArtists, settings.skipArtists);
-  addTextAreaListener(skippedArtists, settings.skippedArtists);
-  addInputListener(singleInstance, settings.singleInstance);
-  addSelectListener(theme, settings.theme);
-  addInputListener(trayIcon, settings.trayIcon);
-  addInputListener(updateFrequency, settings.updateFrequency);
-  addInputListener(
-    enableListenBrainz,
-    settings.ListenBrainz.enabled,
-    switchesWithSettings.listenBrainz
-  );
-  addInputListener(ListenBrainzAPI, settings.ListenBrainz.api);
-  addInputListener(ListenBrainzToken, settings.ListenBrainz.token);
-  addInputListener(listenbrainz_delay, settings.ListenBrainz.delay);
-  addInputListener(discord_details_prefix, settings.discord.detailsPrefix);
-  addInputListener(discord_include_timestamps, settings.discord.includeTimestamps);
-  addInputListener(discord_button_text, settings.discord.buttonText);
-  addInputListener(discord_show_song, settings.discord.showSong, switchesWithSettings.discord_show_song);
-  addInputListener(discord_idle_text, settings.discord.idleText);
-  addInputListener(discord_using_text, settings.discord.usingText);
-});
--- a/src/pages/settings/settings.html
+++ b/src/pages/settings/settings.html
@@ -2,456 +2,557 @@
 <html lang="en">

 <head>
-  <title>Tidal Hi-Fi settings</title>
+  <title>Tidal-hifi settings</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-  <link rel="stylesheet" href="./settings.css" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>

-<body class="settings-window">
-  <div class="settings-window__wrapper">
-    <div class="settings-window__drag-area"></div>
-    <a id="close" class="settings-window__close-button" title="Close settings">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.333 348.334" class="settings-window__svg-icon">
-        <path fill="white" d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85
-            c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563
-            c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85
-            l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554
-            L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z" />
-      </svg>
-    </a>
+<body>
+  <div class="header">
+    <h1 class="title">Settings</h1>
+    <a id="close" style="cursor: pointer;" class="exitWindow">

-    <main class="settings">
-      <input type="radio" name="tab" id="general" checked />
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 348.333 348.334">
+        <g>
+          <path fill="white" d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85
+              c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563
+              c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85
+              l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554
+              L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z" />
+      </svg>
+
+    </a>
+  </div>
+  <div class="body">
+    <div class="tabset">
+
+      <input type="radio" name="tabset" id="general" checked />
      <label for="general">General</label>

-      <input type="radio" name="tab" id="api" />
-      <label for="api">API</label>
+      <input type="radio" name="tabset" id="api" />
+      <label for="api">Api</label>

-      <input type="radio" name="tab" id="integrations" />
+      <!-- Integrations tab -->
+      <input type="radio" name="tabset" id="integrations" />
      <label for="integrations">Integrations</label>

-      <input type="radio" name="tab" id="advanced" />
+      <!-- advanced tab -->
+      <input type="radio" name="tabset" id="advanced" />
      <label for="advanced">Advanced</label>
-
-      <input type="radio" name="tab" id="theming" />
-      <label for="theming">Theming</label>
-
-      <input type="radio" name="tab" id="about" />
+      <!-- about tab -->
+      <input type="radio" name="tabset" id="about" />
      <label for="about">About</label>

-      <div class="tabs">
-        <section id="general-section" class="tabs__section">
-          <div class="group">
-            <p class="group__title">Playback</p>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Notifications</h4>
-                <p>Show a notification when a new song starts.</p>
-              </div>
-              <label class="switch">
-                <input id="notifications" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Skip Artists automatically</h4>
-                <p>The following list of artists (1 per line) will be skipped automatically.</p>
-              </div>
-              <label class="switch">
-                <input id="skipArtists" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-            <textarea id="skippedArtists" class="textarea" cols="40" rows="5" spellcheck="false"></textarea>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Block ads</h4>
-                <p>
-                  Disabled audio & visual ads, unlocked lyrics, suggested track, track info,
-                  unlimited skips
-                </p>
-              </div>
-              <label class="switch">
-                <input id="adBlock" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-          </div>
-          <div class="group">
-            <p class="group__title">UI</p>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Fixed menubar</h4>
-                <p>Always show TIDAL Hi-Fi's menu bar.</p>
-              </div>
-              <label class="switch">
-                <input id="menuBar" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-          </div>
-          <div class="group">
-            <p class="group__title">System</p>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Tray icon</h4>
-                <p>Show TIDAL Hi-Fi's tray icon.</p>
-              </div>
-              <label class="switch">
-                <input id="trayIcon" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Minimize on Close</h4>
-                <p>Minimize window on close instead.</p>
-              </div>
-              <label class="switch">
-                <input id="minimizeOnClose" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Hotkeys</h4>
-                <p>
-                  Enable extra hotkeys to achieve feature parity with the
-                  <a class="external-link" data-url="https://defkey.com/tidal-desktop-shortcuts">desktop apps</a>.
-                </p>
-              </div>
-              <label class="switch">
-                <input id="enableCustomHotkeys" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Single instance</h4>
-                <p>Prevent opening multiple TIDAL Hi-Fi's instances.</p>
-              </div>
-              <label class="switch">
-                <input id="singleInstance" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-          </div>
-        </section>
-
-        <section id="api-section" class="tabs__section">
-          <div class="group">
-            <p class="group__title">API</p>
-            <div class="group__description">
+      <div class="tab-panels">
+        <section id="general" class="tab-panel">
+          <div class="section">
+            <h3>Playback</h3>
+            <div class="option">
+              <h4>Notifications</h4>
              <p>
-                TIDAL Hi-Fi has a built-in web API to allow users to get current song information.
-                You can optionally enable playback control as well.
+                Whether to show a notification when a new song starts.
              </p>
-            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Web API</h4>
-                <p>Enable the TIDAL Hi-Fi web API.</p>
-              </div>
              <label class="switch">
-                <input id="apiCheckbox" type="checkbox" />
-                <span class="switch__slider"></span>
+                <input id="notifications" type="checkbox">
+                <span class="slider round"></span>
              </label>
            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <label for="port">API port</label>
-                <input id="port" type="number" class="text-input" name="port" />
-              </div>
-            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Playback control</h4>
-                <p>Enable playback control from the web API.</p>
-              </div>
-              <label class="switch">
-                <input id="playBackControl" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-          </div>
-        </section>
-
-        <section id="integrations-section" class="tabs__section">
-          <div class="group">
-            <p class="group__title">Integrations</p>
-            <div class="group__description">
+            <div class="option">
+              <h4>Mute Artists automatically</h4>
              <p>
-                TIDAL Hi-Fi is extensible through the use of integrations. You can enable or
-                disable them here.
+                The following list of artists (1 per line) will be muted automatically.
              </p>
+              <label class="switch" style="margin-bottom:10px">
+                <input id="muteArtists" type="checkbox">
+                <span class="slider round"></span>
+              </label>
+              <textarea id="mutedArtists" cols="40" rows="5"></textarea>
            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>MPRIS</h4>
-                <p>
-                  Enable MPRIS interface which provides a mechanism for discovery, querying and
-                  basic playback control on Linux systems.
-                </p>
-              </div>
+          </div>
+          <div class="section">
+            <h3>UI</h3>
+            <div class="option">
+              <h4>Menubar</h4>
+              <p>
+                Show Tidal-hifi's menu bar
+              </p>
              <label class="switch">
-                <input id="mprisCheckbox" type="checkbox" />
-                <span class="switch__slider"></span>
+                <input id="menuBar" type="checkbox">
+                <span class="slider round"></span>
              </label>
            </div>
          </div>
-          <div class="group">
-            <p class="group__title">Discord</p>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Discord RPC</h4>
-                <p>Show what you're listening to on Discord.</p>
-              </div>
+          <div class="section">
+            <h3>System</h3>
+            <div class="option">
+              <h4>Tray icon</h4>
+              <p>
+                Show Tidal-hifi's tray icon<br />
+              </p>
              <label class="switch">
-                <input id="enableDiscord" type="checkbox" />
-                <span class="switch__slider"></span>
+                <input id="trayIcon" type="checkbox">
+                <span class="slider round"></span>
              </label>
            </div>
-            <div id="discord_options">
-
-              <div class="group__option" class="hidden">
-                <div class="group__description">
-                  <h4>Idle Text</h4>
-                  <p>The text displayed on Discord's rich presence while idling in the app.</p>
-                  <input id="discord_idle_text" type="text" class="text-input" name="discord_idle_text" />
-                </div>
-              </div>
-
-              <div class="group__option" class="hidden">
-                <div class="group__description">
-                  <h4>Using Tidal Text</h4>
-                  <p>The text displayed on Discord's rich presence while "showSong" is turned off</p>
-                  <input id="discord_using_text" type="text" class="text-input" name="discord_using_text" />
-                </div>
-              </div>
-
-              <div class="group__option" class="hidden">
-                <div class="group__description">
-                  <h4>Show song</h4>
-                  <p>Show the current song in the Discord client</p>
-                </div>
-                <label class="switch">
-                  <input id="discord_show_song" type="checkbox" />
-                  <span class="switch__slider"></span>
-                </label>
-              </div>
-
-              <div id="discord_show_song_options" class="hidden">
-
-                <div class="group__option" class="hidden">
-                  <div class="group__description">
-                    <h4>Include timestamps</h4>
-                    <p>Show current/end playtime in the Discord client</p>
-                  </div>
-                  <label class="switch">
-                    <input id="discord_include_timestamps" type="checkbox" />
-                    <span class="switch__slider"></span>
-                  </label>
-                </div>
-
-                <div class="group__option" class="hidden">
-                  <div class="group__description">
-                    <h4>Details prefix</h4>
-                    <p>Prefix for the "details" field of Discord's rich presence.</p>
-                    <input id="discord_details_prefix" type="text" class="text-input" name="discord_details_prefix" />
-                  </div>
-                </div>
-
-                <div class="group__option">
-                  <div class="group__description">
-                    <h4>Button text</h4>
-                    <p>Text to display on the button below the song information.</p>
-                    <input id="discord_button_text" type="text" class="text-input" name="discord_button_text" />
-                  </div>
-                </div>
-              </div>
-
-            </div>
-          </div>
-          <div class="group">
-            <p class="group__title">ListenBrainz</p>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Enable ListenBrainz</h4>
-                <p>Scrobble your listens directly to ListenBrainz.</p>
-              </div>
+            <div class="option">
+              <h4>Minimize on Close</h4>
+              <p>
+                Minimize window on close instead <br />
+              </p>
              <label class="switch">
-                <input id="enableListenBrainz" type="checkbox" />
-                <span class="switch__slider"></span>
+                <input id="minimizeOnClose" type="checkbox">
+                <span class="slider round"></span>
              </label>
            </div>
-            <div id="listenbrainz__options" class="hidden">
-              <div class="group__option">
-                <div class="group__description">
-                  <h4>ListenBrainz API Url</h4>
-                  <p>There are multiple instances for ListenBrainz you can set the corresponding API url below.</p>
-                  <input id="ListenBrainzAPI" type="text" class="text-input" name="ListenBrainzAPI" />
-                </div>
-              </div>
-              <div class="group__option">
-                <div class="group__description">
-                  <h4>ListenBrainz User Token</h4>
-                  <p>Provide the user token you can get from the settings page.</p>
-                  <input id="ListenBrainzToken" type="text" class="text-input" name="ListenBrainzToken" />
-                </div>
-              </div>
-            </div>
-            <div class="group__description">
-              <h4>ScrobbleDelay</h4>
-              <p>The delay (in ms) to send a song to ListenBrainz. Prevents spamming the API when you fast forward
-                immediately</p>
-              <input id="listenbrainz_delay" type="number" class="text-input" name="listenbrainz_delay" />
-            </div>
-          </div>
-        </section>
-
-        <section id="advanced-section" class="tabs__section">
-          <div class="group">
-            <p class="group__title">Settings</p>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Update frequency</h4>
-                <p>
-                  The amount of time, in milliseconds, that TIDAL Hi-Fi will refresh its playback info by scraping the
-                  website.
-                  The default of 500 seems to work in more cases but if you are fine with a bit more resource usage you
-                  can decrease it as well.
-                </p>
-                <input id="updateFrequency" type="number" class="text-input" name="updateFrequency" />
-              </div>
-            </div>
-          </div>
-          <div class="group">
-            <p class="group__title">Flags</p>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Disable hardware built-in media keys</h4>
-                <p>
-                  Also prevents certain desktop environments from recognizing the chrome MPRIS
-                  client separately from the custom MPRIS client.
-                </p>
-              </div>
+            <div class="option">
+              <h4>Hotkeys</h4>
+              <p>
+                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="disableHardwareMediaKeys" type="checkbox" />
-                <span class="switch__slider"></span>
+                <input id="enableCustomHotkeys" type="checkbox">
+                <span class="slider round"></span>
              </label>
            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Enable GPU rasterization</h4>
-                <p>Move a part of the rendering to the GPU for increased performance.</p>
-              </div>
+            <div class="option">
+              <h4>Single instance</h4>
+              <p>
+                Prevent opening multiple tidal-hifi instances
+              </p>
              <label class="switch">
-                <input id="gpuRasterization" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Disable Background Throttling</h4>
-                <p>
-                  Makes app more responsive while in the background, at the cost of performance.
-                </p>
-              </div>
-              <label class="switch">
-                <input id="disableBackgroundThrottle" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
-            </div>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Wayland support</h4>
-                <p>
-                  Adds a couple of Electron flags to help TIDAL Hi-Fi run smoothly on the Wayland window system.
-                </p>
-              </div>
-              <label class="switch">
-                <input id="enableWaylandSupport" type="checkbox" />
-                <span class="switch__slider"></span>
+                <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.
+            </p>

-        <section id="theming-section" class="tabs__section">
-          <div class="group">
-            <p class="group__title">Theming</p>
-            <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 class="option">
+              <h4>Web API</h4>
+              <p>
+                Whether to enable the Tidal-hifi web api
+              </p>
+              <label class="switch">
+                <input id="apiCheckbox" type="checkbox">
+                <span class="slider round"></span>
+              </label>
            </div>
-          </div>
-          <textarea id="customCSS" class="textarea" cols="40" rows="8" spellcheck="false"></textarea>
-
-          <div class="group">
-            <p class="group__title">Theme files</p>
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Current theme</h4>
-                <p>
-                  Select a theme below or "Tidal - Default" to return to the original Tidal look.
-                </p>
-                <select class="select-input" id="themesList" name="themesList">
-
-                </select>
-              </div>
+            <div class="option">
+              <h4 style="margin-bottom: 5px;">API port</h4>
+              <input id="port" type="text" class="freeTextInput" name="port">
            </div>
-
-            <div class="group__option">
-              <div class="group__description">
-                <h4>Upload new themes</h4>
-                <p>
-                  Click the button and select the css files to import. They will be added to the theme list
-                  automatically.
-                </p>
-                <div class="file-drop-area">
-                  <div>
-                    <span class="file-btn">Choose files</span>
-                    <span id="file-message" class="file-msg">or drag and drop files here</span>
-                    <input id="theme-files" class="file-input" type="file" accept=".css" multiple>
-                  </div>
-                </div>
-              </div>
+            <div class="option">
+              <h4>Playback control</h4>
+              <p>
+                Whether to enable playback control from the api
+              </p>
+              <label class="switch">
+                <input id="playBackControl" type="checkbox">
+                <span class="slider round"></span>
+              </label>
            </div>
          </div>
        </section>
-
-        <section id="about-section" class="tabs__section about-section">
-          <img alt="tidal icon" class="about-section__icon" src="./icon.png" />
-          <h4>TIDAL Hi-Fi</h4>
-          <div class="about-section__version">
-            <a href="https://github.com/Mastermindzh/tidal-hifi/releases/tag/5.9.0">5.9.0</a>
+        <section id="integrations" class="tab-panel">
+          <div class="section">
+            <h3>integrations</h3>
+            <p style="margin-bottom: 15px;">
+              Tidal-hifi is extensible through the use of integrations. You can enable or disable integrations here
+            </p>
+            <div class="option">
+              <h4>MPRIS-player</h4>
+              <p>
+                Whether to enable the MPRIS media player controls for Linux systems
+              </p>
+              <label class="switch">
+                <input id="mprisCheckbox" type="checkbox">
+                <span class="slider round"></span>
+              </label>
+            </div>
+            <div class="option">
+              <h4>Discord RPC</h4>
+              <p>
+                Show what you're listening to on Discord
+              </p>
+              <label class="switch">
+                <input id="enableDiscord" type="checkbox">
+                <span class="slider round"></span>
+              </label>
+            </div>
          </div>
-          <div class="about-section__links">
-            <a href="https://github.com/mastermindzh/tidal-hifi/" class="about-section__button">Github <i
-                class="fa fa-external-link"></i></a>
-            <a href="https://github.com/Mastermindzh/tidal-hifi/issues" class="about-section__button">Report an issue <i
-                class="fa fa-external-link"></i></a>
-            <a href="https://github.com/Mastermindzh/tidal-hifi/graphs/contributors"
-              class="about-section__button">Contributors <i class="fa fa-external-link"></i></a>
+        </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">
+            <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>

-        <footer class="footer">
-          <p class="footer__note">
-            <strong>Note</strong>: some settings may require a restart of TIDAL Hi-Fi.
-          </p>
-        </footer>
+        <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>
      </div>
-    </main>
+    </div>
  </div>
 </body>

-</html>
+<style>
+  .header {
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+  }
+
+  .header a {
+    -webkit-app-region: no-drag;
+  }
+
+  * {
+    margin: 0%;
+    padding: 0%;
+    color: #ffffff;
+    font-weight: 400;
+    font-stretch: normal;
+    -webkit-font-smoothing: antialiased;
+    font-family: nationale, nationale-regular, Helvetica, sans-serif;
+  }
+
+  html,
+  body {
+    height: 100%;
+    background-color: black;
+    display: flex;
+    flex-direction: column;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  small {
+    font-style: italic;
+    color: #72777f;
+  }
+
+  .header {
+    background-color: #242528;
+    border-bottom: 1px solid #5a5a5a;
+    height: 50px;
+  }
+
+  .title {
+    float: left;
+    line-height: 50px;
+    margin-left: 15px;
+  }
+
+  .accent {
+    color: #0ff;
+  }
+
+  .exitWindow {
+    border: none;
+    outline: none;
+    text-decoration: none;
+    font-size: 1.4rem;
+    float: right;
+    margin-right: 15px;
+    height: 50px;
+    line-height: 50px;
+  }
+
+  .exitWindow:focus {
+    border: none;
+    outline: none;
+  }
+
+  .exitWindow svg {
+    height: 50px;
+    color: white;
+  }
+
+  .section {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(246, 245, 255, .1);
+  }
+
+  .section .option {
+    margin-bottom: 15px;
+  }
+
+  .section .option p {
+    max-width: 75%;
+    float: left
+  }
+
+  .section .option label {
+    float: right;
+  }
+
+  .section:after,
+  .section .option:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .section h3 {
+    margin-bottom: 15px;
+  }
+
+  .section h4 {
+    font-size: 0.9rem;
+  }
+
+  .section p {
+    color: #72777f;
+  }
+
+  .bottom-border {
+    border-bottom: 1px solid #0ff;
+  }
+
+  .body {
+    padding: 15px;
+    flex: 1 1 auto;
+    position: relative;
+    overflow-y: auto;
+  }
+
+  .body::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    background-color: 2a2a2a;
+  }
+
+  .body::-webkit-scrollbar {
+    width: 10px;
+    background-color: #2a2a2a;
+  }
+
+  .body::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+    background-color: #5a5a5a;
+  }
+
+  /* Tabs */
+
+  .tabset>input[type="radio"] {
+    position: absolute;
+    left: -200vw;
+  }
+
+  .tabset .tab-panel {
+    display: none;
+  }
+
+  .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(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(9):checked~.tab-panels>.tab-panel:nth-child(5) {
+    display: block;
+  }
+
+  .tabset>label {
+    position: relative;
+    display: inline-block;
+    padding: 15px 0px 10px;
+    border-bottom: 0;
+    cursor: pointer;
+  }
+
+  .tabset>input+label {
+    color: #e0e0e0;
+    margin-right: 30px;
+  }
+
+  .tabset>input:checked+label {
+    color: #0ff;
+    border-bottom: 2px solid #0ff;
+  }
+
+  .tab-panel {
+    padding: 10px 0;
+  }
+
+  /* switches */
+  /* The switch - the box around the slider */
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 28px;
+  }
+
+  /* Hide default HTML checkbox */
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  /* The slider */
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(246, 245, 255, .1);
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 24px;
+    width: 24px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  input:checked+.slider {
+    background-color: #0ff;
+  }
+
+  input:focus+.slider {
+    box-shadow: 0 0 1px #0ff;
+  }
+
+  input:checked+.slider:before {
+    -webkit-transform: translateX(22px);
+    -ms-transform: translateX(22px);
+    transform: translateX(22px);
+  }
+
+  /* Rounded sliders */
+
+  .slider.round {
+    border-radius: 34px;
+  }
+
+  .slider.round:before {
+    border-radius: 50%;
+  }
+
+  /* input field */
+
+  input {
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid rgba(246, 245, 255, .1);
+    color: rgba(229, 238, 255, .6);
+    width: 100%;
+    display: block;
+    padding: 0 0 12px;
+  }
+
+  .freeTextInput:focus {
+    outline: none;
+    border-bottom: 1px solid #0ff;
+  }
+
+  /* buttons */
+  button {
+    border: none;
+    background: none;
+    align-items: center;
+    background-color: rgba(229, 238, 255, .2);
+    display: inline-flex;
+    justify-content: center;
+    border-radius: 12px;
+    height: 48px;
+    line-height: 49px;
+    padding: 0 24px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: background .35s ease;
+    min-height: 0;
+    min-width: 0;
+    font-size: 1.14286rem;
+    font-family: nationale, nationale-regular, Helvetica, sans-serif;
+    margin-top: 10px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: rgba(229, 238, 255, .3);
+  }
+
+  textarea {
+    color: #72777f;
+    background: #242528;
+    border: 0;
+    width: 100%;
+    color: rgba(229, 238, 255, .6);
+    padding: 0 0 12px;
+    display: block;
+  }
+
+  textarea:focus {
+    outline: none;
+    border: 0;
+    border-bottom: 1px solid #0ff;
+  }
+</style>
+
+</html>
--- a/src/pages/settings/settings.scss
+++ b/src/pages/settings/settings.scss
@@ -1,505 +0,0 @@
-// --- Variables ---
-
-$black: #17171a;
-$grey-333: #333;
-$white: #f9f9f9;
-$tidal-blue: #0ff;
-$tidal-grey: #72777f;
-$tidal-grey-darker: #404248;
-$tidal-grey-darker-focus: #55585f;
-$tidal-grey-darkest: #242528;
-$tidal-grey-darkest-focus: #2e2f33;
-
-// --- Fonts ---
-
-@font-face {
-  font-family: "Noto Sans";
-  font-weight: 300;
-  src: url("fonts/NotoSans-Light.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Noto Sans";
-  font-weight: normal;
-  src: url("fonts/NotoSans-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Noto Sans";
-  font-weight: 600;
-  src: url("fonts/NotoSans-SemiBold.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Noto Sans";
-  font-weight: bold;
-  src: url("fonts/NotoSans-Bold.ttf") format("truetype");
-}
-
-$font1: "Noto Sans", helvetica, sans-serif;
-
-// --- Mixins ---
-
-@mixin drag($enabled: true) {
-  @if $enabled {
-    -webkit-app-region: drag;
-  } @else {
-    -webkit-app-region: no-drag;
-  }
-}
-
-button {
-  cursor: pointer;
-}
-
-// --- Settings window ---
-
-html {
-  height: 100%;
-}
-
-.external-link {
-  @extend button;
-
-  text-decoration: underline;
-}
-
-.settings-window {
-  height: 100%;
-  margin: 0;
-  color: $white;
-  font-family: $font1;
-
-  &__wrapper {
-    height: 100%;
-    background: $black;
-    box-shadow: inset 0 0 2px 0 $tidal-grey;
-    overflow: hidden;
-  }
-
-  &__drag-area {
-    @include drag;
-
-    position: absolute;
-    width: 100%;
-    height: 50px;
-    z-index: 0;
-    user-select: none;
-  }
-
-  &__close-button {
-    @extend button;
-    @include drag(false);
-
-    position: absolute;
-    top: 12px;
-    right: 10px;
-    padding: 10px;
-    border-radius: 100%;
-    z-index: 1;
-
-    &:hover {
-      background: $grey-333;
-    }
-  }
-
-  &__svg-icon {
-    display: block;
-    width: 18px;
-    height: 18px;
-    opacity: 0.7;
-  }
-
-  // --- Settings tabs ---
-}
-
-.settings {
-  height: 100%;
-  margin: 20px 0;
-  padding-left: 15px;
-  font-size: 0;
-
-  input {
-    &[type="radio"] {
-      margin-right: -18px;
-      transform: scale(0);
-      outline: none;
-    }
-
-    & + label {
-      @include drag(false);
-
-      display: inline-block;
-      position: relative;
-      margin-right: 35px;
-      padding-bottom: 8px;
-      border-bottom: 0;
-      font-size: 16px;
-      cursor: pointer;
-      z-index: 1;
-      user-select: none;
-    }
-
-    &:checked + label {
-      border-bottom: 2px solid $tidal-blue;
-      color: $tidal-blue;
-    }
-  }
-}
-
-.tabs {
-  height: calc(100% - 70px);
-  padding-right: 15px;
-  font-size: 16px;
-  overflow: auto;
-
-  &__section {
-    display: none;
-  }
-
-  @for $i from 1 to 7 {
-    .settings > input:nth-child(#{$i * 2 - 1}):checked ~ & > .tabs__section:nth-child(#{$i}) {
-      display: block;
-    }
-  }
-
-  &::-webkit-scrollbar {
-    width: 10px;
-
-    &-thumb {
-      border-radius: 10px;
-      background-color: $tidal-grey-darker;
-      box-shadow: inset 0 0 10px 2px $tidal-grey-darkest;
-    }
-
-    // --- Settings group ---
-  }
-}
-
-.group {
-  padding: 10px 0;
-  border-bottom: 1px solid $grey-333;
-
-  &:last-child {
-    border: 0;
-  }
-
-  &__title {
-    margin-bottom: 10px;
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  &__option {
-    display: flex;
-    align-items: center;
-  }
-
-  &__description {
-    flex-grow: 1;
-
-    h4,
-    label {
-      display: block;
-      margin-top: 10px;
-      margin-bottom: 0;
-      font-size: 14px;
-      font-weight: 600;
-    }
-
-    p {
-      margin-top: 5px;
-      margin-bottom: 8px;
-      color: $tidal-grey;
-      font-size: 14px;
-    }
-
-    .text-input {
-      display: block;
-      width: 100%;
-      margin-bottom: 10px;
-      padding: 5px 0;
-      transition: 0.2s;
-      border: 0;
-      border-bottom: solid 1px $grey-333;
-      outline: none;
-      background: transparent;
-      color: $tidal-grey;
-      font-size: 14px;
-
-      &:focus {
-        border-color: $tidal-blue;
-        color: $white;
-      }
-    }
-  }
-}
-
-.switch {
-  $this: &;
-
-  position: relative;
-  min-width: 50px;
-  height: 28px;
-  margin-left: 10px;
-
-  input {
-    transform: scale(0);
-    outline: none;
-
-    &:checked + #{$this}__slider {
-      background-color: $tidal-blue;
-
-      &::before {
-        transform: translateX(22px);
-        background-color: $white;
-      }
-    }
-
-    &:focus + #{$this}__slider {
-      box-shadow: inset 0 0 0 1px $tidal-blue;
-    }
-  }
-
-  &__slider {
-    @extend button;
-
-    position: absolute;
-    inset: 0;
-    transition: 0.4s;
-    border-radius: 40px;
-    background-color: $tidal-grey-darkest;
-
-    &::before {
-      position: absolute;
-      bottom: 2px;
-      left: 2px;
-      width: 24px;
-      height: 24px;
-      transition: 0.4s;
-      border-radius: 50%;
-      background-color: $white;
-      content: "";
-    }
-
-    // --- Textarea component
-  }
-}
-
-.textarea {
-  min-width: 100%;
-  max-width: 100%;
-  min-height: 50px;
-  max-height: 100px;
-  padding: 8px;
-  transition: 0.2s;
-  border: 0;
-  border-bottom: 1px solid transparent;
-  background: $tidal-grey-darkest;
-  color: $tidal-grey;
-  font-size: 13px;
-  box-sizing: border-box;
-
-  &:focus {
-    border-color: $tidal-blue;
-    outline: none;
-    color: $white;
-  }
-
-  // --- About section ---
-}
-
-.about-section {
-  padding-top: 40px;
-  text-align: center;
-
-  &__icon {
-    display: inline-block;
-    width: 200px;
-  }
-
-  &__text {
-    display: block;
-    max-width: 500px;
-    margin: -15px auto 0;
-  }
-
-  &__table {
-    width: 120px;
-    margin: 0 auto;
-
-    td {
-      text-align: left;
-    }
-  }
-
-  &__version {
-    margin: -10px 0 30px;
-
-    a {
-      background-color: $tidal-grey-darker;
-      border: none;
-      color: $tidal-blue;
-      padding: 8px 20px;
-      font-weight: bold;
-      text-align: center;
-      text-decoration: none;
-      display: inline-block;
-      border-radius: 100px;
-    }
-  }
-
-  &__links {
-    width: 300px;
-    margin: 0 auto;
-
-    a {
-      border-radius: 10px;
-      border: none;
-      color: $white;
-      padding: 10px 10px 10px 20px;
-      margin: 8px;
-      text-align: left;
-      font-size: 16px;
-      line-height: 30px;
-      display: flex;
-      text-decoration: none;
-      justify-content: space-between;
-      background-color: $tidal-grey-darkest;
-
-      i {
-        color: $white;
-        line-height: 30px;
-        font-size: 18px;
-      }
-
-      &:hover {
-        background-color: $tidal-grey-darkest-focus;
-      }
-    }
-  }
-}
-
-// --- Footer ---
-.footer {
-  position: sticky;
-  height: 100px;
-  padding-top: 20px;
-  text-align: center;
-
-  &__note {
-    max-width: 300px;
-    margin: 0 auto 15px;
-    color: $tidal-grey;
-    font-size: 12px;
-  }
-
-  &__button {
-    @extend button;
-
-    display: block;
-    height: 48px;
-    margin: auto;
-    padding: 0 24px;
-    transition: 0.2s;
-    border: 0;
-    border-radius: 12px;
-    background: $tidal-grey-darker;
-    color: $white;
-    font-size: 16px;
-
-    &:hover {
-      background: $tidal-grey-darker-focus;
-    }
-  }
-}
-
-// file upload
-
-.file-drop-area {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  max-width: 100%;
-  padding: 25px 0;
-  border: 1px dashed $tidal-grey;
-  border-radius: 3px;
-  transition: 0.2s;
-
-  &.is-active {
-    background-color: $black;
-  }
-
-  div {
-    padding-left: 25px;
-  }
-}
-
-.file-btn {
-  flex-shrink: 0;
-  background-color: $black;
-  border: 1px solid $tidal-grey;
-  border-radius: 3px;
-  padding: 8px 15px;
-  margin-right: 10px;
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.file-msg {
-  font-size: small;
-  font-weight: 300;
-  line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.file-input {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  cursor: pointer;
-  opacity: 0;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.select-input {
-  display: block;
-  width: 100%;
-  margin-bottom: 10px;
-  padding: 5px 0;
-  transition: 0.2s;
-  border: 0;
-  border-bottom: solid 1px $grey-333;
-  outline: none;
-  background: transparent;
-  color: $tidal-grey;
-  font-size: 14px;
-
-  &:focus {
-    border-color: $tidal-blue;
-    color: $white;
-  }
-
-  option {
-    background-color: $tidal-grey-darkest;
-
-    &:disabled {
-      font-size: 1.2em;
-      line-height: 1.5em;
-      text-align: center;
-      color: $white;
-    }
-  }
-}
-
-.hidden {
-  display: none !important;
-}
--- a/src/pages/settings/theming.ts
+++ b/src/pages/settings/theming.ts
@@ -1,55 +0,0 @@
-import fs from "fs";
-import { Logger } from "../../features/logger";
-
-const cssFilter = (file: string) => file.endsWith(".css");
-const sort = (a: string, b: string) => a.toLowerCase().localeCompare(b.toLowerCase());
-
-/**
- * Create an "options header" (disabled option) based on a bit of text
- * @param text of the header
- * @returns
- */
-export const getOptionsHeader = (text: string): HTMLOptionElement => {
-  const opt = new Option(text, undefined, false, false);
-  opt.disabled = true;
-  return opt;
-};
-
-/**
- * Maps a list of filenames to a list of HTMLOptionElements
- * Will strip ".css" from the name but keeps it in the value
- * @param array array of filenames
- * @returns
- */
-export const getOptions = (array: string[]) => {
-  return array.map((name) => {
-    return new Option(name.replace(".css", ""), name);
-  });
-};
-
-/**
- * Read .css files from a directory and return them in a sorted array.
- * @param directory to read from. Will be created if it doesn't exist
- * @returns
- */
-export const getThemeListFromDirectory = (directory: string): string[] => {
-  try {
-    makeUserThemesDirectory(directory);
-    return fs.readdirSync(directory).filter(cssFilter).sort(sort);
-  } catch (err) {
-    Logger.log(`Failed to get files from ${directory}`, err);
-    return [];
-  }
-};
-
-/**
- * Create the directory to store user themes in
- * @param directory directory to create
- */
-export const makeUserThemesDirectory = (directory: string) => {
-  try {
-    fs.mkdirSync(directory, { recursive: true });
-  } catch (err) {
-    Logger.log(`Failed to make user theme directory: ${directory}`, err);
-  }
-};
--- a/src/preload.js
+++ b/src/preload.js
@@ -0,0 +1,462 @@
+const { setTitle } = require("./scripts/window-functions");
+const { dialog, process, Notification } = require("@electron/remote");
+const { store, settings } = require("./scripts/settings");
+const { ipcRenderer } = require("electron");
+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 isMutedArtist = true;
+
+const elements = {
+  play: '*[data-test="play"]',
+  pause: '*[data-test="pause"]',
+  next: '*[data-test="next"]',
+  previous: 'button[data-test="previous"]',
+  title: '*[data-test^="footer-track-title"]',
+  artists: '*[data-test^="grid-item-detail-text-title-artist"]',
+  home: '*[data-test="menu--home"]',
+  back: '[class^="backwardButton"]',
+  forward: '[class^="forwardButton"]',
+  search: '[class^="searchField"]',
+  shuffle: '*[data-test="shuffle"]',
+  repeat: '*[data-test="repeat"]',
+  block: '[class="blockButton"]',
+  account: '*[data-test^="profile-image-button"]',
+  settings: '*[data-test^="open-settings"]',
+  media: '*[data-test="current-media-imagery"]',
+  image: "img",
+  current: '*[data-test="current-time"]',
+  duration: '*[data-test="duration"]',
+  bar: '*[data-test="progress-bar"]',
+  footer: "#footerPlayer",
+  album_header_title: '.header-details [data-test="title"]',
+  playing_title: 'span[data-test="table-cell-title"].css-geqnfr',
+  album_name_cell: '[data-test="table-cell-album"]',
+  tracklist_row: '[data-test="tracklist-row"]',
+  volume: '*[data-test="volume"]',
+  /**
+   * Get an element from the dom
+   * @param {*} key key in elements object to fetch
+   */
+  get: function (key) {
+    return window.document.querySelector(this[key.toLowerCase()]);
+  },
+
+  /**
+   * Get the icon of the current song
+   */
+  getSongIcon: function () {
+    const figure = this.get("media");
+
+    if (figure) {
+      const mediaElement = figure.querySelector(this["image"]);
+      if (mediaElement) {
+        return mediaElement.src.replace("80x80", "640x640");
+      }
+    }
+
+    return "";
+  },
+
+  getArtists: function () {
+    const footer = this.get("footer");
+
+    if (footer) {
+      const artists = footer.querySelector(this["artists"]);
+      if (artists) {
+        return artists.innerText;
+      }
+    }
+
+    return "unknown artist(s)";
+  },
+
+  getAlbumName: function () {
+    //If listening to an album, get its name from the header title
+    if (window.location.href.includes("/album/")) {
+      const albumName = window.document.querySelector(this.album_header_title);
+      if (albumName) {
+        return albumName.textContent;
+      }
+      //If listening to a playlist or a mix, get album name from the list
+    } else if (
+      window.location.href.includes("/playlist/") ||
+      window.location.href.includes("/mix/")
+    ) {
+      if (currentPlayStatus === statuses.playing) {
+        const row = window.document.querySelector(this.playing_title).closest(this.tracklist_row);
+        if (row) {
+          return row.querySelector(this.album_name_cell).textContent;
+        }
+      }
+    }
+
+    return "";
+  },
+
+  isMuted: function () {
+    return this.get("volume").getAttribute("aria-checked") === "false"; // it's muted if aria-checked is false
+  },
+
+  /**
+   * Shorthand function to get the text of a dom element
+   * @param {*} key key in elements object to fetch
+   */
+  getText: function (key) {
+    const element = this.get(key);
+    return element ? element.textContent : "";
+  },
+
+  /**
+   * Shorthand function to click a dom element
+   * @param {*} key key in elements object to fetch
+   */
+  click: function (key) {
+    this.get(key).click();
+    return this;
+  },
+
+  /**
+   * Shorthand function to focus a dom element
+   * @param {*} key key in elements object to fetch
+   */
+  focus: function (key) {
+    return this.get(key).focus();
+  },
+};
+
+/**
+ * Play or pause the current song
+ */
+function playPause() {
+  const play = elements.get("play");
+
+  if (play) {
+    elements.click("play");
+  } else {
+    elements.click("pause");
+  }
+}
+
+/**
+ * Add hotkeys for when tidal is focused
+ * Reflects the desktop hotkeys found on:
+ * https://defkey.com/tidal-desktop-shortcuts
+ */
+function addHotKeys() {
+  if (store.get(settings.enableCustomHotkeys)) {
+    hotkeys.add("Control+p", function () {
+      elements.click("account").click("settings");
+    });
+    hotkeys.add("Control+l", function () {
+      handleLogout();
+    });
+
+    hotkeys.add("Control+h", function () {
+      elements.click("home");
+    });
+
+    hotkeys.add("backspace", function () {
+      elements.click("back");
+    });
+
+    hotkeys.add("shift+backspace", function () {
+      elements.click("forward");
+    });
+
+    hotkeys.add("control+u", function () {
+      // reloading window without cache should show the update bar if applicable
+      window.location.reload(true);
+    });
+
+    hotkeys.add("control+r", function () {
+      elements.click("repeat");
+    });
+  }
+
+  // always add the hotkey for the settings window
+  hotkeys.add("control+=", function () {
+    ipcRenderer.send(globalEvents.showSettings);
+  });
+  hotkeys.add("control+0", function () {
+    ipcRenderer.send(globalEvents.showSettings);
+  });
+}
+
+/**
+ * This function will ask the user whether he/she wants to log out.
+ * It will log the user out if he/she selects "yes"
+ */
+function handleLogout() {
+  const logoutOptions = ["Cancel", "Yes, please", "No, thanks"];
+
+  dialog.showMessageBox(
+    null,
+    {
+      type: "question",
+      title: "Logging out",
+      message: "Are you sure you want to log out?",
+      buttons: logoutOptions,
+      defaultId: 2,
+    },
+    function (response) {
+      if (logoutOptions.indexOf("Yes, please") == response) {
+        for (let i = 0; i < window.localStorage.length; i++) {
+          const key = window.localStorage.key(i);
+          if (key.startsWith("_TIDAL_activeSession")) {
+            window.localStorage.removeItem(key);
+            i = window.localStorage.length + 1;
+          }
+        }
+        window.location.reload();
+      }
+    }
+  );
+}
+
+function addFullScreenListeners() {
+  window.document.addEventListener("fullscreenchange", () => {
+    ipcRenderer.send(globalEvents.refreshMenuBar);
+  });
+}
+
+/**
+ * Add ipc event listeners.
+ * Some actions triggered outside of the site need info from the site.
+ */
+function addIPCEventListeners() {
+  window.addEventListener("DOMContentLoaded", () => {
+    ipcRenderer.on("globalEvent", (_event, args) => {
+      switch (args) {
+        case globalEvents.playPause:
+          playPause();
+          break;
+        case globalEvents.next:
+          elements.click("next");
+          break;
+        case globalEvents.previous:
+          elements.click("previous");
+          break;
+        case globalEvents.play:
+          elements.click("play");
+          break;
+        case globalEvents.pause:
+          elements.click("pause");
+          break;
+      }
+    });
+  });
+}
+
+/**
+ * Update the current status of tidal (e.g playing or paused)
+ */
+function getCurrentlyPlayingStatus() {
+  let pause = elements.get("pause");
+  let status = undefined;
+
+  // if pause button is visible tidal is playing
+  if (pause) {
+    status = statuses.playing;
+  } else {
+    status = statuses.paused;
+  }
+  return status;
+}
+
+/**
+ * Convert the duration from MM:SS to seconds
+ * @param {*} duration
+ */
+function convertDuration(duration) {
+  const parts = duration.split(":");
+  return parseInt(parts[1]) + 60 * parseInt(parts[0]);
+}
+
+/**
+ * Update Tidal-hifi's media info
+ *
+ * @param {*} options
+ */
+function updateMediaInfo(options, notify) {
+  if (options) {
+    ipcRenderer.send(globalEvents.updateInfo, options);
+    if (store.get(settings.notifications) && notify) {
+      new Notification({ title: options.title, body: options.message, icon: options.icon }).show();
+    }
+    if (player) {
+      player.metadata = {
+        ...player.metadata,
+        ...{
+          "xesam:title": options.title,
+          "xesam:artist": [options.message],
+          "xesam:album": options.album,
+          "mpris:artUrl": options.image,
+          "mpris:length": convertDuration(options.duration) * 1000 * 1000,
+        },
+      };
+      player.playbackStatus = options.status == statuses.paused ? "Paused" : "Playing";
+    }
+  }
+}
+
+/**
+ * Checks if Tidal is playing a video or song by grabbing the "a" element from the title.
+ * If it's a song it returns the track URL, if not it will return undefined
+ */
+function getTrackURL() {
+  const URLelement = elements.get("title").querySelector("a");
+  if (URLelement !== null) {
+    const id = URLelement.href.replace(/[^0-9]/g, "");
+    return `https://tidal.com/browse/track/${id}`;
+  }
+
+  return window.location;
+}
+
+/**
+ * Watch for song changes and update title + notify
+ */
+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 songDashArtistTitle = `${title} - ${artists}`;
+  const currentStatus = getCurrentlyPlayingStatus();
+  const options = {
+    title,
+    message: artists,
+    album: album,
+    status: currentStatus,
+    url: getTrackURL(),
+    current,
+    duration,
+    "app-name": appName,
+  };
+  
+
+
+  const titleOrArtistChanged = currentSong !== songDashArtistTitle;
+
+
+  // update title, url and play info with new info
+  setTitle(songDashArtistTitle);
+  getTrackURL();
+  currentSong = songDashArtistTitle;
+  currentPlayStatus = currentStatus;
+
+  const image = elements.getSongIcon();
+
+  new Promise((resolve) => {
+    if (image.startsWith("http")) {
+      options.image = image;
+      downloadFile(image, notificationPath).then(
+        () => {
+          options.icon = notificationPath;
+          resolve();
+        },
+        () => {
+          // if the image can't be downloaded then continue without it
+          resolve();
+        }
+      );
+    } else {
+      // if the image can't be found on the page continue without it
+      resolve();
+    }
+  }).then(
+    () => {
+      updateMediaInfo(options, titleOrArtistChanged);
+    },
+    () => {}
+  );
+
+  /**
+   * Checks whether the current artist is included in the "muted artists" list and if so it will automatically mute the player
+   */
+  function muteArtistIfFoundInMutedArtistsList() {
+    if (store.get(settings.muteArtists)) {
+      const mutedArtists = store.get(settings.mutedArtists);
+      if (mutedArtists.find((artist) => artist === artists) !== undefined) {
+        if (!elements.isMuted()) {
+          isMutedArtist = true;
+          elements.click("volume");
+        }
+      } else if (isMutedArtist && elements.isMuted()) {
+        elements.click("volume");
+        isMutedArtist = false;
+      }
+    }
+  }
+}, 1000);
+
+if (process.platform === "linux" && store.get(settings.mpris)) {
+  try {
+    const Player = require("mpris-service");
+    player = Player({
+      name: "tidal-hifi",
+      identity: "tidal-hifi",
+      supportedUriSchemes: ["file"],
+      supportedMimeTypes: [
+        "audio/mpeg",
+        "audio/flac",
+        "audio/x-flac",
+        "application/ogg",
+        "audio/wav",
+      ],
+      supportedInterfaces: ["player"],
+      desktopEntry: "tidal-hifi",
+    });
+
+    // Events
+    var events = {
+      next: "next",
+      previous: "previous",
+      pause: "pause",
+      playpause: "playpause",
+      stop: "stop",
+      play: "play",
+      loopStatus: "repeat",
+      shuffle: "shuffle",
+      seek: "seek",
+    };
+    Object.keys(events).forEach(function (eventName) {
+      player.on(eventName, function () {
+        const eventValue = events[eventName];
+        switch (events[eventValue]) {
+          case events.playpause:
+            playPause();
+            break;
+
+          default:
+            elements.click(eventValue);
+        }
+      });
+    });
+    // Override get position function
+    player.getPosition = function () {
+      return convertDuration(elements.getText("current")) * 1000 * 1000;
+    };
+
+    player.on("quit", function () {
+      app.quit();
+    });
+  } catch (exception) {
+    console.log("player api not working");
+  }
+}
+
+addHotKeys();
+addIPCEventListeners();
+addFullScreenListeners();
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -1,600 +0,0 @@
-import { app, dialog, Notification } from "@electron/remote";
-import { clipboard, ipcRenderer } from "electron";
-import Player from "mpris-service";
-import { globalEvents } from "./constants/globalEvents";
-import { settings } from "./constants/settings";
-import {
-  ListenBrainz,
-  ListenBrainzConstants,
-  ListenBrainzStore,
-} from "./features/listenbrainz/listenbrainz";
-import { StoreData } from "./features/listenbrainz/models/storeData";
-import { Logger } from "./features/logger";
-import { Songwhip } from "./features/songwhip/songwhip";
-import { addCustomCss } from "./features/theming/theming";
-import { MediaStatus } from "./models/mediaStatus";
-import { Options } from "./models/options";
-import { downloadFile } from "./scripts/download";
-import { addHotkey } from "./scripts/hotkeys";
-import { settingsStore } from "./scripts/settings";
-import { setTitle } from "./scripts/window-functions";
-
-const notificationPath = `${app.getPath("userData")}/notification.jpg`;
-const appName = "TIDAL Hi-Fi";
-let currentSong = "";
-let player: Player;
-let currentPlayStatus = MediaStatus.paused;
-let currentListenBrainzDelayId: ReturnType<typeof setTimeout>;
-let scrobbleWaitingForDelay = false;
-let wasJustPausedOrResumed = false;
-let currentMediaInfo: Options;
-
-const elements = {
-  play: '*[data-test="play"]',
-  pause: '*[data-test="pause"]',
-  next: '*[data-test="next"]',
-  previous: 'button[data-test="previous"]',
-  title: '*[data-test^="footer-track-title"]',
-  artists: '*[data-test^="grid-item-detail-text-title-artist"]',
-  home: '*[data-test="menu--home"]',
-  back: '[title^="Back"]',
-  forward: '[title^="Next"]',
-  search: '[class^="searchField"]',
-  shuffle: '*[data-test="shuffle"]',
-  repeat: '*[data-test="repeat"]',
-  account: '*[class^="profileOptions"]',
-  settings: '*[data-test^="open-settings"]',
-  media: '*[data-test="current-media-imagery"]',
-  image: "img",
-  current: '*[data-test="current-time"]',
-  duration: '*[class^=playbackControlsContainer] *[data-test="duration"]',
-  bar: '*[data-test="progress-bar"]',
-  footer: "#footerPlayer",
-  mediaItem: "[data-type='mediaItem']",
-  album_header_title: '.header-details [data-test="title"]',
-  currentlyPlaying: "[class^='isPlayingIcon'], [data-test-is-playing='true']",
-  album_name_cell: '[class^="album"]',
-  tracklist_row: '[data-test="tracklist-row"]',
-  volume: '*[data-test="volume"]',
-  favorite: '*[data-test="footer-favorite-button"]',
-  /**
-   * Get an element from the dom
-   * @param {*} key key in elements object to fetch
-   */
-  get: function (key: string) {
-    return window.document.querySelector(this[key.toLowerCase()]);
-  },
-
-  /**
-   * Get the icon of the current song
-   */
-  getSongIcon: function () {
-    const figure = this.get("media");
-
-    if (figure) {
-      const mediaElement = figure.querySelector(this["image"]);
-      if (mediaElement) {
-        return mediaElement.src.replace("80x80", "640x640");
-      }
-    }
-
-    return "";
-  },
-
-  /**
-   * returns an array of all artists in the current song
-   * @returns {Array} artists
-   */
-  getArtistsArray: function () {
-    const footer = this.get("footer");
-
-    if (footer) {
-      const artists = footer.querySelectorAll(this.artists);
-      if (artists) return Array.from(artists).map((artist) => (artist as HTMLElement).textContent);
-    }
-    return [];
-  },
-
-  /**
-   * unify the artists array into a string separated by commas
-   * @param {Array} artistsArray
-   * @returns {String} artists
-   */
-  getArtistsString: function (artistsArray: string[]) {
-    if (artistsArray.length > 0) return artistsArray.join(", ");
-    return "unknown artist(s)";
-  },
-
-  getAlbumName: function () {
-    //If listening to an album, get its name from the header title
-    if (window.location.href.includes("/album/")) {
-      const albumName = window.document.querySelector(this.album_header_title);
-      if (albumName) {
-        return albumName.textContent;
-      }
-      //If listening to a playlist or a mix, get album name from the list
-    } else if (
-      window.location.href.includes("/playlist/") ||
-      window.location.href.includes("/mix/")
-    ) {
-      if (currentPlayStatus === MediaStatus.playing) {
-        // find the currently playing element from the list (which might be in an album icon), traverse back up to the mediaItem (row) and select the album cell.
-        // document.querySelector("[class^='isPlayingIcon'], [data-test-is-playing='true']").closest('[data-type="mediaItem"]').querySelector('[class^="album"]').textContent
-        const row = window.document.querySelector(this.currentlyPlaying).closest(this.mediaItem);
-        if (row) {
-          return row.querySelector(this.album_name_cell).textContent;
-        }
-      }
-    }
-
-    return "";
-  },
-
-  isMuted: function () {
-    return this.get("volume").getAttribute("aria-checked") === "false"; // it's muted if aria-checked is false
-  },
-
-  isFavorite: function () {
-    return this.get("favorite").getAttribute("aria-checked") === "true";
-  },
-
-  /**
-   * Shorthand function to get the text of a dom element
-   * @param {*} key key in elements object to fetch
-   */
-  getText: function (key: string) {
-    const element = this.get(key);
-    return element ? element.textContent : "";
-  },
-
-  /**
-   * Shorthand function to click a dom element
-   * @param {*} key key in elements object to fetch
-   */
-  click: function (key: string) {
-    this.get(key).click();
-    return this;
-  },
-
-  /**
-   * Shorthand function to focus a dom element
-   * @param {*} key key in elements object to fetch
-   */
-  focus: function (key: string) {
-    return this.get(key).focus();
-  },
-};
-
-/**
- * Get the update frequency from the store
- * make sure it returns a number, if not use the default
- */
-function getUpdateFrequency() {
-  const storeValue = settingsStore.get<string, number>(settings.updateFrequency);
-  const defaultValue = 500;
-
-  if (!isNaN(storeValue)) {
-    return storeValue;
-  } else {
-    return defaultValue;
-  }
-}
-
-/**
- * Play or pause the current song
- */
-function playPause() {
-  wasJustPausedOrResumed = true;
-  const play = elements.get("play");
-
-  if (play) {
-    elements.click("play");
-  } else {
-    elements.click("pause");
-  }
-}
-
-/**
- * Clears the old listenbrainz data on launch
- */
-ListenBrainzStore.clear();
-
-/**
- * Add hotkeys for when tidal is focused
- * Reflects the desktop hotkeys found on:
- * https://defkey.com/tidal-desktop-shortcuts
- */
-function addHotKeys() {
-  if (settingsStore.get(settings.enableCustomHotkeys)) {
-    addHotkey("Control+p", function () {
-      elements.click("account");
-      setTimeout(() => {
-        elements.click("settings");
-      }, 100);
-    });
-    addHotkey("Control+l", function () {
-      handleLogout();
-    });
-
-    addHotkey("Control+a", function () {
-      elements.click("favorite");
-    });
-
-    addHotkey("Control+h", function () {
-      elements.click("home");
-    });
-
-    addHotkey("backspace", function () {
-      elements.click("back");
-    });
-
-    addHotkey("shift+backspace", function () {
-      elements.click("forward");
-    });
-
-    addHotkey("control+u", function () {
-      // reloading window without cache should show the update bar if applicable
-      window.location.reload();
-    });
-
-    addHotkey("control+r", function () {
-      elements.click("repeat");
-    });
-    addHotkey("control+w", async function () {
-      const result = await ipcRenderer.invoke(globalEvents.whip, getTrackURL());
-      const url = Songwhip.getWhipUrl(result);
-      clipboard.writeText(url);
-      new Notification({
-        title: `Successfully whipped: `,
-        body: `URL copied to clipboard: ${url}`,
-      }).show();
-    });
-  }
-
-  // always add the hotkey for the settings window
-  addHotkey("control+=", function () {
-    ipcRenderer.send(globalEvents.showSettings);
-  });
-  addHotkey("control+0", function () {
-    ipcRenderer.send(globalEvents.showSettings);
-  });
-}
-
-/**
- * This function will ask the user whether he/she wants to log out.
- * It will log the user out if he/she selects "yes"
- */
-function handleLogout() {
-  const logoutOptions = ["Cancel", "Yes, please", "No, thanks"];
-
-  dialog
-    .showMessageBox(null, {
-      type: "question",
-      title: "Logging out",
-      message: "Are you sure you want to log out?",
-      buttons: logoutOptions,
-      defaultId: 2,
-    })
-    .then((result: { response: number }) => {
-      if (logoutOptions.indexOf("Yes, please") === result.response) {
-        for (let i = 0; i < window.localStorage.length; i++) {
-          const key = window.localStorage.key(i);
-          if (key.startsWith("_TIDAL_activeSession")) {
-            window.localStorage.removeItem(key);
-            break;
-          }
-        }
-        window.location.reload();
-      }
-    });
-}
-
-function addFullScreenListeners() {
-  window.document.addEventListener("fullscreenchange", () => {
-    ipcRenderer.send(globalEvents.refreshMenuBar);
-  });
-}
-
-/**
- * Add ipc event listeners.
- * Some actions triggered outside of the site need info from the site.
- */
-function addIPCEventListeners() {
-  window.addEventListener("DOMContentLoaded", () => {
-    ipcRenderer.on("globalEvent", (_event, args) => {
-      switch (args) {
-        case globalEvents.playPause:
-        case globalEvents.play:
-        case globalEvents.pause:
-          playPause();
-          break;
-        case globalEvents.next:
-          elements.click("next");
-          break;
-        case globalEvents.previous:
-          elements.click("previous");
-          break;
-        case globalEvents.toggleFavorite:
-          elements.click("favorite");
-          break;
-        default:
-          break;
-      }
-    });
-  });
-}
-
-/**
- * Update the current status of tidal (e.g playing or paused)
- */
-function getCurrentlyPlayingStatus() {
-  const pause = elements.get("pause");
-  let status = undefined;
-
-  // if pause button is visible tidal is playing
-  if (pause) {
-    status = MediaStatus.playing;
-  } else {
-    status = MediaStatus.paused;
-  }
-  return status;
-}
-
-/**
- * Convert the duration from MM:SS to seconds
- * @param {*} duration
- */
-function convertDuration(duration: string) {
-  const parts = duration.split(":");
-  return parseInt(parts[1]) + 60 * parseInt(parts[0]);
-}
-
-/**
- * Update Tidal-hifi's media info
- *
- * @param {*} options
- */
-function updateMediaInfo(options: Options, notify: boolean) {
-  if (options) {
-    currentMediaInfo = options;
-    ipcRenderer.send(globalEvents.updateInfo, options);
-    if (settingsStore.get(settings.notifications) && notify) {
-      new Notification({ title: options.title, body: options.artists, icon: options.icon }).show();
-    }
-    updateMpris(options);
-    updateListenBrainz(options);
-  }
-}
-
-function addMPRIS() {
-  if (process.platform === "linux" && settingsStore.get(settings.mpris)) {
-    try {
-      player = Player({
-        name: "tidal-hifi",
-        identity: "tidal-hifi",
-        supportedUriSchemes: ["file"],
-        supportedMimeTypes: [
-          "audio/mpeg",
-          "audio/flac",
-          "audio/x-flac",
-          "application/ogg",
-          "audio/wav",
-        ],
-        supportedInterfaces: ["player"],
-        desktopEntry: "tidal-hifi",
-      });
-      // Events
-      const events = {
-        next: "next",
-        previous: "previous",
-        pause: "pause",
-        playpause: "playpause",
-        stop: "stop",
-        play: "play",
-        loopStatus: "repeat",
-        shuffle: "shuffle",
-        seek: "seek",
-      } as { [key: string]: string };
-      Object.keys(events).forEach(function (eventName) {
-        player.on(eventName, function () {
-          const eventValue = events[eventName];
-          switch (events[eventValue]) {
-            case events.playpause:
-              playPause();
-              break;
-            default:
-              elements.click(eventValue);
-          }
-        });
-      });
-      // Override get position function
-      player.getPosition = function () {
-        return convertDuration(elements.getText("current")) * 1000 * 1000;
-      };
-      player.on("quit", function () {
-        app.quit();
-      });
-    } catch (exception) {
-      Logger.log("MPRIS player api not working", exception);
-    }
-  }
-}
-
-function updateMpris(options: Options) {
-  if (player) {
-    player.metadata = {
-      ...player.metadata,
-      ...{
-        "xesam:title": options.title,
-        "xesam:artist": [options.artists],
-        "xesam:album": options.album,
-        "mpris:artUrl": options.image,
-        "mpris:length": convertDuration(options.duration) * 1000 * 1000,
-        "mpris:trackid": "/org/mpris/MediaPlayer2/track/" + getTrackID(),
-      },
-    };
-    player.playbackStatus = options.status === MediaStatus.paused ? "Paused" : "Playing";
-  }
-}
-
-/**
- * Update the listenbrainz service with new data based on a few conditions
- */
-function updateListenBrainz(options: Options) {
-  if (settingsStore.get(settings.ListenBrainz.enabled)) {
-    const oldData = ListenBrainzStore.get(ListenBrainzConstants.oldData) as StoreData;
-    if (
-      (!oldData && options.status === MediaStatus.playing) ||
-      (oldData && oldData.title !== options.title)
-    ) {
-      if (!scrobbleWaitingForDelay) {
-        scrobbleWaitingForDelay = true;
-        clearTimeout(currentListenBrainzDelayId);
-        currentListenBrainzDelayId = setTimeout(
-          () => {
-            ListenBrainz.scrobble(
-              options.title,
-              options.artists,
-              options.status,
-              convertDuration(options.duration)
-            );
-            scrobbleWaitingForDelay = false;
-          },
-          settingsStore.get(settings.ListenBrainz.delay) ?? 0
-        );
-      }
-    }
-  }
-}
-
-/**
- * Checks if Tidal is playing a video or song by grabbing the "a" element from the title.
- * If it's a song it returns the track URL, if not it will return undefined
- */
-function getTrackURL() {
-  const id = getTrackID();
-  return `https://tidal.com/browse/track/${id}`;
-}
-
-function getTrackID() {
-  const URLelement = elements.get("title").querySelector("a");
-  if (URLelement !== null) {
-    const id = URLelement.href.replace(/\D/g, "");
-    return id;
-  }
-
-  return window.location;
-}
-
-function updateMediaSession(options: Options) {
-  if ("mediaSession" in navigator) {
-    navigator.mediaSession.metadata = new MediaMetadata({
-      title: options.title,
-      artist: options.artists,
-      album: options.album,
-      artwork: [
-        {
-          src: options.icon,
-          sizes: "640x640",
-          type: "image/png",
-        },
-      ],
-    });
-  }
-}
-
-/**
- * Watch for song changes and update title + notify
- */
-setInterval(function () {
-  const title = elements.getText("title");
-  const artistsArray = elements.getArtistsArray();
-  const artistsString = elements.getArtistsString(artistsArray);
-  const songDashArtistTitle = `${title} - ${artistsString}`;
-  const titleOrArtistsChanged = currentSong !== songDashArtistTitle;
-  const current = elements.getText("current");
-  const currentStatus = getCurrentlyPlayingStatus();
-
-  // update info if song changed or was just paused/resumed
-  if (titleOrArtistsChanged || wasJustPausedOrResumed) {
-    if (wasJustPausedOrResumed) {
-      wasJustPausedOrResumed = false;
-    }
-    skipArtistsIfFoundInSkippedArtistsList(artistsArray);
-
-    const album = elements.getAlbumName();
-    const duration = elements.getText("duration");
-    const options = {
-      title,
-      artists: artistsString,
-      album: album,
-      status: currentStatus,
-      url: getTrackURL(),
-      current,
-      duration,
-      "app-name": appName,
-      image: "",
-      icon: "",
-      favorite: elements.isFavorite(),
-    };
-
-    // update title, url and play info with new info
-    setTitle(songDashArtistTitle);
-    getTrackURL();
-    currentSong = songDashArtistTitle;
-    currentPlayStatus = currentStatus;
-
-    const image = elements.getSongIcon();
-
-    new Promise<void>((resolve) => {
-      if (image.startsWith("http")) {
-        options.image = image;
-        downloadFile(image, notificationPath).then(
-          () => {
-            options.icon = notificationPath;
-            resolve();
-          },
-          () => {
-            // if the image can't be downloaded then continue without it
-            resolve();
-          }
-        );
-      } else {
-        // if the image can't be found on the page continue without it
-        resolve();
-      }
-    }).then(() => {
-      updateMediaInfo(options, titleOrArtistsChanged);
-      if (titleOrArtistsChanged) {
-        updateMediaSession(options);
-      }
-    });
-  } else {
-    // just update the time
-    updateMediaInfo({ ...currentMediaInfo, ...{ current } }, false);
-  }
-
-  /**
-   * automatically skip a song if the artists are found in the list of artists to skip
-   * @param {*} artists array of artists
-   */
-  function skipArtistsIfFoundInSkippedArtistsList(artists: string[]) {
-    if (settingsStore.get(settings.skipArtists)) {
-      const skippedArtists = settingsStore.get<string, string[]>(settings.skippedArtists);
-      if (skippedArtists.length > 0) {
-        const artistsToSkip = skippedArtists.map((artist) => artist);
-        const artistNames = Object.values(artists).map((artist) => artist);
-        const foundArtist = artistNames.some((artist) => artistsToSkip.includes(artist));
-        if (foundArtist) {
-          elements.click("next");
-        }
-      }
-    }
-  }
-}, getUpdateFrequency());
-
-addMPRIS();
-addCustomCss(app);
-addHotKeys();
-addIPCEventListeners();
-addFullScreenListeners();
--- a/src/scripts/discord.js
+++ b/src/scripts/discord.js
@@ -0,0 +1,95 @@
+const discordrpc = require("discord-rpc");
+const { app, ipcMain } = require("electron");
+const globalEvents = require("../constants/globalEvents");
+const clientId = "833617820704440341";
+const mediaInfoModule = require("./mediaInfo");
+const discordModule = [];
+
+function timeToSeconds(timeArray) {
+  let minutes = timeArray[0] * 1;
+  let seconds = minutes * 60 + timeArray[1] * 1;
+  return seconds;
+}
+
+let rpc;
+const observer = (event, arg) => {
+  if (mediaInfoModule.mediaInfo.status == "paused" && rpc) {
+    rpc.setActivity(idleStatus);
+  } else if (rpc) {
+    const currentSeconds = timeToSeconds(mediaInfoModule.mediaInfo.current.split(":"));
+    const durationSeconds = timeToSeconds(mediaInfoModule.mediaInfo.duration.split(":"));
+    const date = new Date();
+    const now = (date.getTime() / 1000) | 0;
+    const remaining = date.setSeconds(date.getSeconds() + (durationSeconds - currentSeconds));
+    if (mediaInfoModule.mediaInfo.url) {
+      rpc.setActivity({
+        ...idleStatus,
+        ...{
+          details: `Listening to ${mediaInfoModule.mediaInfo.title}`,
+          state: mediaInfoModule.mediaInfo.artist
+            ? mediaInfoModule.mediaInfo.artist
+            : "unknown artist(s)",
+          startTimestamp: parseInt(now),
+          endTimestamp: parseInt(remaining),
+          largeImageKey: mediaInfoModule.mediaInfo.image,
+          largeImageText: mediaInfoModule.mediaInfo.album
+            ? mediaInfoModule.mediaInfo.album
+            : `${idleStatus.largeImageText}`,
+          buttons: [{ label: "Play on Tidal", url: mediaInfoModule.mediaInfo.url }],
+        },
+      });
+    } else {
+      rpc.setActivity({
+        ...idleStatus,
+        ...{
+          details: `Watching ${mediaInfoModule.mediaInfo.title}`,
+          state: mediaInfoModule.mediaInfo.artist,
+          startTimestamp: parseInt(now),
+          endTimestamp: parseInt(remaining),
+        },
+      });
+    }
+  }
+};
+
+const idleStatus = {
+  details: `Browsing Tidal`,
+  largeImageKey: "tidal-hifi-icon",
+  largeImageText: `Tidal HiFi ${app.getVersion()}`,
+  instance: false,
+};
+
+/**
+ * Set up the discord rpc and listen on globalEvents.updateInfo
+ */
+discordModule.initRPC = function () {
+  rpc = new discordrpc.Client({ transport: "ipc" });
+  rpc.login({ clientId }).then(
+    () => {
+      discordModule.rpc = rpc;
+
+      rpc.on("ready", () => {
+        rpc.setActivity(idleStatus);
+      });
+      ipcMain.on(globalEvents.updateInfo, observer);
+    },
+    () => {
+      console.error("Can't connect to Discord, is it running?");
+    }
+  );
+};
+
+/**
+ * Remove any RPC connection with discord and remove the event listener on globalEvents.updateInfo
+ */
+discordModule.unRPC = function () {
+  if (rpc) {
+    rpc.clearActivity();
+    rpc.destroy();
+    rpc = false;
+    discordModule.rpc = undefined;
+    ipcMain.removeListener(globalEvents.updateInfo, observer);
+  }
+};
+
+module.exports = discordModule;
--- a/src/scripts/discord.ts
+++ b/src/scripts/discord.ts
@@ -1,118 +0,0 @@
-import { Client, Presence } from "discord-rpc";
-import { app, ipcMain } from "electron";
-import { globalEvents } from "../constants/globalEvents";
-import { settings } from "../constants/settings";
-import { Logger } from "../features/logger";
-import { MediaStatus } from "../models/mediaStatus";
-import { mediaInfo } from "./mediaInfo";
-import { settingsStore } from "./settings";
-
-const clientId = "833617820704440341";
-
-function timeToSeconds(timeArray: string[]) {
-  const minutes = parseInt(timeArray[0]) * 1;
-  const seconds = minutes * 60 + parseInt(timeArray[1]) * 1;
-  return seconds;
-}
-
-export let rpc: Client;
-
-const observer = () => {
-  if (rpc) {
-    rpc.setActivity(getActivity());
-  }
-};
-
-const defaultPresence = {
-  largeImageKey: "tidal-hifi-icon",
-  largeImageText: `TIDAL Hi-Fi ${app.getVersion()}`,
-  instance: false,
-};
-
-const getActivity = (): Presence => {
-  const presence: Presence = { ...defaultPresence };
-
-  if (mediaInfo.status === MediaStatus.paused) {
-    presence.details =
-      settingsStore.get<string, string>(settings.discord.idleText) ?? "Browsing Tidal";
-  } else {
-    const showSong = settingsStore.get<string, boolean>(settings.discord.showSong) ?? false;
-    if (showSong) {
-      const { includeTimestamps, detailsPrefix, buttonText } = getFromStore();
-      includeTimeStamps(includeTimestamps);
-      setPresenceFromMediaInfo(detailsPrefix, buttonText);
-    } else {
-      presence.details =
-        settingsStore.get<string, string>(settings.discord.usingText) ?? "Playing media on TIDAL";
-    }
-  }
-  return presence;
-
-  function getFromStore() {
-    const includeTimestamps =
-      settingsStore.get<string, boolean>(settings.discord.includeTimestamps) ?? true;
-    const detailsPrefix =
-      settingsStore.get<string, string>(settings.discord.detailsPrefix) ?? "Listening to ";
-    const buttonText =
-      settingsStore.get<string, string>(settings.discord.buttonText) ?? "Play on TIDAL";
-
-    return { includeTimestamps, detailsPrefix, buttonText };
-  }
-
-  function setPresenceFromMediaInfo(detailsPrefix: any, buttonText: any) {
-    if (mediaInfo.url) {
-      presence.details = `${detailsPrefix}${mediaInfo.title}`;
-      presence.state = mediaInfo.artists ? mediaInfo.artists : "unknown artist(s)";
-      presence.largeImageKey = mediaInfo.image;
-      if (mediaInfo.album) {
-        presence.largeImageText = mediaInfo.album;
-      }
-      presence.buttons = [{ label: buttonText, url: mediaInfo.url }];
-    } else {
-      presence.details = `Watching ${mediaInfo.title}`;
-      presence.state = mediaInfo.artists;
-    }
-  }
-
-  function includeTimeStamps(includeTimestamps: any) {
-    if (includeTimestamps) {
-      const currentSeconds = timeToSeconds(mediaInfo.current.split(":"));
-      const durationSeconds = timeToSeconds(mediaInfo.duration.split(":"));
-      const date = new Date();
-      const now = (date.getTime() / 1000) | 0;
-      const remaining = date.setSeconds(date.getSeconds() + (durationSeconds - currentSeconds));
-      presence.startTimestamp = now;
-      presence.endTimestamp = remaining;
-    }
-  }
-};
-
-/**
- * Set up the discord rpc and listen on globalEvents.updateInfo
- */
-export const initRPC = () => {
-  rpc = new Client({ transport: "ipc" });
-  rpc.login({ clientId }).then(
-    () => {
-      rpc.on("ready", () => {
-        rpc.setActivity(getActivity());
-      });
-      ipcMain.on(globalEvents.updateInfo, observer);
-    },
-    () => {
-      Logger.log("Can't connect to Discord, is it running?");
-    }
-  );
-};
-
-/**
- * Remove any RPC connection with discord and remove the event listener on globalEvents.updateInfo
- */
-export const unRPC = () => {
-  if (rpc) {
-    rpc.clearActivity();
-    rpc.destroy();
-    rpc = null;
-    ipcMain.removeListener(globalEvents.updateInfo, observer);
-  }
-};
--- a/src/scripts/download.js
+++ b/src/scripts/download.js
@@ -0,0 +1,26 @@
+const download = {};
+const request = require("request");
+const fs = require("fs");
+
+/**
+ * download and save a file
+ * @param {*} fileUrl url to download
+ * @param {*} targetPath path to save it at
+ */
+download.downloadFile = function(fileUrl, targetPath) {
+  return new Promise((resolve, reject) => {
+    var req = request({
+      method: "GET",
+      uri: fileUrl,
+    });
+
+    var out = fs.createWriteStream(targetPath);
+    req.pipe(out);
+
+    req.on("end", resolve);
+
+    req.on("error", reject);
+  });
+};
+
+module.exports = download;
--- a/src/scripts/download.ts
+++ b/src/scripts/download.ts
@@ -1,23 +0,0 @@
-import fs from "fs";
-import request from "request";
-
-/**
- * download and save a file
- * @param {string} fileUrl url to download
- * @param {string} targetPath path to save it at
- */
-export const downloadFile = function (fileUrl: string, targetPath: string) {
-  return new Promise((resolve, reject) => {
-    const req = request({
-      method: "GET",
-      uri: fileUrl,
-    });
-
-    const out = fs.createWriteStream(targetPath);
-    req.pipe(out);
-
-    req.on("end", resolve);
-
-    req.on("error", reject);
-  });
-};
--- a/src/scripts/express.js
+++ b/src/scripts/express.js
@@ -0,0 +1,70 @@
+const express = require("express");
+const { mediaInfo } = require("./mediaInfo");
+const { store, settings } = require("./settings");
+const globalEvents = require("./../constants/globalEvents");
+const statuses = require("./../constants/statuses");
+const expressModule = {};
+const fs = require("fs");
+
+let expressInstance;
+
+/**
+ * Function to enable tidal-hifi's express api
+ */
+expressModule.run = function(mainWindow) {
+  /**
+   * Shorthand to handle a fire and forget global event
+   * @param {*} res
+   * @param {*} action
+   */
+  function handleGlobalEvent(res, action) {
+    mainWindow.webContents.send("globalEvent", action);
+    res.sendStatus(200);
+  }
+
+  const expressApp = express();
+  expressApp.get("/", (req, res) => res.send("Hello World!"));
+  expressApp.get("/current", (req, res) => res.json(mediaInfo));
+  expressApp.get("/image", (req, res) => {
+    var stream = fs.createReadStream(mediaInfo.icon);
+    stream.on("open", function() {
+      res.set("Content-Type", "image/png");
+      stream.pipe(res);
+    });
+    stream.on("error", function() {
+      res.set("Content-Type", "text/plain");
+      res.status(404).end("Not found");
+    });
+  });
+
+  if (store.get(settings.playBackControl)) {
+    expressApp.get("/play", (req, res) => handleGlobalEvent(res, globalEvents.play));
+    expressApp.get("/pause", (req, res) => handleGlobalEvent(res, globalEvents.pause));
+    expressApp.get("/next", (req, res) => handleGlobalEvent(res, globalEvents.next));
+    expressApp.get("/previous", (req, res) => handleGlobalEvent(res, globalEvents.previous));
+    expressApp.get("/playpause", (req, res) => {
+      if (mediaInfo.status == statuses.playing) {
+        handleGlobalEvent(res, globalEvents.pause);
+      } else {
+        handleGlobalEvent(res, globalEvents.play);
+      }
+    });
+  }
+  if (store.get(settings.api)) {
+    let port = store.get(settings.apiSettings.port);
+
+    expressInstance = expressApp.listen(port, "127.0.0.1", () => {});
+    expressInstance.on("error", function(e) {
+      let message = e.code;
+      if (e.code === "EADDRINUSE") {
+        message = `Port ${port} in use.`;
+      }
+      const { dialog } = require("electron");
+      dialog.showErrorBox("Api failed to start.", message);
+    });
+  } else {
+    expressInstance = undefined;
+  }
+};
+
+module.exports = expressModule;
--- a/src/scripts/express.ts
+++ b/src/scripts/express.ts
@@ -1,69 +0,0 @@
-import { BrowserWindow, dialog } from "electron";
-import express, { Response } from "express";
-import fs from "fs";
-import { settings } from "../constants/settings";
-import { MediaStatus } from "../models/mediaStatus";
-import { globalEvents } from "./../constants/globalEvents";
-import { mediaInfo } from "./mediaInfo";
-import { settingsStore } from "./settings";
-
-/**
- * Function to enable TIDAL Hi-Fi's express api
- */
-
-// expressModule.run = function (mainWindow)
-export const startExpress = (mainWindow: BrowserWindow) => {
-  /**
-   * Shorthand to handle a fire and forget global event
-   * @param {*} res
-   * @param {*} action
-   */
-  function handleGlobalEvent(res: Response, action: string) {
-    mainWindow.webContents.send("globalEvent", action);
-    res.sendStatus(200);
-  }
-
-  const expressApp = express();
-  expressApp.get("/", (req, res) => res.send("Hello World!"));
-  expressApp.get("/current", (req, res) => res.json({ ...mediaInfo, artist: mediaInfo.artists }));
-  expressApp.get("/image", (req, res) => {
-    const stream = fs.createReadStream(mediaInfo.icon);
-    stream.on("open", function () {
-      res.set("Content-Type", "image/png");
-      stream.pipe(res);
-    });
-    stream.on("error", function () {
-      res.set("Content-Type", "text/plain");
-      res.status(404).end("Not found");
-    });
-  });
-
-  if (settingsStore.get(settings.playBackControl)) {
-    expressApp.get("/play", (req, res) => handleGlobalEvent(res, globalEvents.play));
-    expressApp.post("/favorite/toggle", (req, res) =>
-      handleGlobalEvent(res, globalEvents.toggleFavorite)
-    );
-    expressApp.get("/pause", (req, res) => handleGlobalEvent(res, globalEvents.pause));
-    expressApp.get("/next", (req, res) => handleGlobalEvent(res, globalEvents.next));
-    expressApp.get("/previous", (req, res) => handleGlobalEvent(res, globalEvents.previous));
-    expressApp.get("/playpause", (req, res) => {
-      if (mediaInfo.status === MediaStatus.playing) {
-        handleGlobalEvent(res, globalEvents.pause);
-      } else {
-        handleGlobalEvent(res, globalEvents.play);
-      }
-    });
-  }
-
-  const port = settingsStore.get<string, number>(settings.apiSettings.port);
-
-  const expressInstance = expressApp.listen(port, "127.0.0.1");
-  expressInstance.on("error", function (e: { code: string }) {
-    let message = e.code;
-    if (e.code === "EADDRINUSE") {
-      message = `Port ${port} in use.`;
-    }
-
-    dialog.showErrorBox("Api failed to start.", message);
-  });
-};
--- a/src/scripts/hotkeys.js
+++ b/src/scripts/hotkeys.js
@@ -0,0 +1,11 @@
+const hotkeyjs = require("hotkeys-js");
+const hotkeys = {};
+
+hotkeys.add = function(keys, func) {
+  hotkeyjs(keys, function(event, args) {
+    event.preventDefault();
+    func(event, args);
+  });
+};
+
+module.exports = hotkeys;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Mastermindzh	0fe1f7a509	- Changed the category of the desktop file to AudioVideo - Changed desktop file name to "TIDAL Hi-Fi"	2022-09-11 22:53:42 +02:00
Ivo Šmerek	87bb19a255	Update configuration of the desktop file (#165 )	2022-09-11 22:48:55 +02:00