Merge branch 'master' of github.com:Mastermindzh/tidal-hifi

Bump minimatch and electron-builder

.github/workflows/build.yml

@@ -16,17 +16,17 @@ jobs:
       - uses: actions/checkout@master
       - uses: actions/setup-node@master
         with:
-          node-version: 16
+          node-version: 19
       - 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: 16
+          node-version: 19
       - run: npm install
       - run: npm run build
 
@@ -36,6 +36,6 @@ jobs:
       - uses: actions/checkout@master
       - uses: actions/setup-node@master
         with:
-          node-version: 16
+          node-version: 19
       - run: npm install
       - run: npm run build

.gitignore

@@ -7,3 +7,8 @@ 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

.nvmrc

@@ -0,0 +1 @@
+19.8.1

CHANGELOG.md

@@ -4,6 +4,44 @@ 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.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-Hifi
+
+## 4.1.2
+
+- Changed the category of the desktop file to AudioVideo
+- Changed desktop file name to "TIDAL Hi-Fi"
+
 ## 4.1.1
 
 - Fixed `cannot read property of undefined` error because of not passing mainWindow around.

README.md

@@ -1,39 +1,43 @@
-<h1>
-Tidal-hifi
-<img src = "./build/icon.png" height="40" align="right" />
-</h1>
+# Tidal-hifi<img src = "./build/icon.png" height="40" align="right"/>
+
+![GitHub release](https://img.shields.io/github/release/Mastermindzh/tidal-hifi.svg)
 
 The web version of [listen.tidal.com](https://listen.tidal.com) running in electron with hifi support thanks to widevine.
 
 ![tidal-hifi preview](./docs/preview.png)
 
-## Table of contents
+## Table of Contents
 
 <!-- toc -->
 
 - [Installation](#installation)
-  * [Using releases](#using-releases)
-  * [Snap](#snap)
-  * [Arch Linux](#arch-linux)
-  * [Flatpak](#flatpak)
-  * [Nix](#nix)
-  * [Using source](#using-source)
+  - [Dependencies](#dependencies)
+  - [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)
+  - [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)
+- [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)
+  - [Settings window](#settings-window)
+  - [User setups](#user-setups)
 
 <!-- tocstop -->
 
 ## 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) in order 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.
@@ -93,7 +97,7 @@ To install and work with the code on this project follow these steps:
 - 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")
+- 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))
 - 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))
@@ -139,7 +143,7 @@ Whilst there are a handful of projects attempting to run Tidal on Electron they
 
 Sometimes it's just easier to start over, cover my own needs and then making it available to the public :)
 
-## Special thanks to...
+## Special thanks to
 
 - [Castlabs](https://castlabs.com/)
   For maintaining Electron with Widevine CDM installation, Verified Media Path (VMP), and persistent licenses (StorageID)

build/electron-builder.base.yml

@@ -1,21 +1,22 @@
 appId: com.rickvanlieshout.tidal-hifi
-electronVersion: 19.0.5
+electronVersion: 24.1.2
 electronDownload:
-  version: 19.0.5+wvcus
+  version: 24.1.2+wvcus
   mirror: https://github.com/castlabs/electron-releases/releases/download/v
 snap:
   plugs:
     - default
     - screen-inhibit-control
 linux:
-  category: Audio
+  category: AudioVideo
+  icon: icon.png
   target:
     - dir
   executableName: tidal-hifi
   desktop:
     Encoding: UTF-8
-    Name: tidal-hifi
-    GenericName: tidal-hifi
+    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: icon.png
     StartupNotify: true

build/electron-builder.deb.yml

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

build/electron-builder.pacman.yml

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

build/electron-builder.rpm.yml

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

build/electron-builder.snap.yml

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

build/electron-builder.yml

@@ -1,9 +1,5 @@
-electronVersion: 19.0.5
-electronDownload:
-  version: 19.0.5+wvcus
-  mirror: https://github.com/castlabs/electron-releases/releases/download/v
+extends: ./build/electron-builder.base.yml
 linux:
-  category: Audio
   target:
     - pacman
     - tar.gz

docs/muting-artists.md

@@ -1,11 +0,0 @@
-# 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)

package.json

@@ -1,19 +1,25 @@
 {
   "name": "tidal-hifi",
-  "version": "4.1.1",
+  "version": "5.0.0",
   "description": "Tidal on Electron with widevine(hifi) support",
   "main": "src/main.js",
   "scripts": {
     "start": "electron .",
-    "build": "electron-builder --publish=never -c ./build/electron-builder.yml",
-    "build-deb": "electron-builder --publish=never -c ./build/electron-builder.deb.yml",
-    "build-unpacked": "electron-builder --publish=never -c ./build/electron-builder.unpacked.yml",
-    "build-rpm": "electron-builder --publish=never -c ./build/electron-builder.rpm.yml",
-    "build-snap": "electron-builder --publish=never -c ./build/electron-builder.snap.yml",
-    "build-arch": "electron-builder --publish=never -c ./build/electron-builder.pacman.yml",
-    "build-wl": "electron-builder --publish=never -c ./build/electron-builder.yml -wl",
-    "build-mac": "electron-builder --publish=never -c ./build/electron-builder.yml -m",
-    "build-base": "electron-builder --publish=never -c ./build/electron-builder.base.yml"
+    "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",
+    "prestart": "npm run sass",
+    "prebuilder": "npm run sass",
+    "builder": "electron-builder --publish=never",
+    "sass": "sass ./src/pages/settings/settings.scss ./src/pages/settings/settings.css",
+    "sass-lint": "sass-lint -vc ./sass-lint.yml ./src/pages/settings/settings.scss",
+    "sass-lint-fix": "sass-lint-auto-fix ./src/pages/settings/settings.scss --config-sass-lint ./sass-lint.yml"
   },
   "keywords": [
     "electron",
@@ -25,19 +31,24 @@
   "homepage": "https://github.com/Mastermindzh/tidal-hifi",
   "license": "MIT",
   "dependencies": {
-    "@electron/remote": "^2.0.8",
+    "@electron/remote": "^2.0.9",
     "discord-rpc": "^4.0.1",
     "electron-store": "^8.1.0",
-    "express": "^4.18.1",
-    "hotkeys-js": "^3.9.4",
+    "express": "^4.18.2",
+    "hotkeys-js": "^3.10.2",
     "mpris-service": "^2.1.2",
-    "request": "^2.88.2"
+    "request": "^2.88.2",
+    "sass": "^1.62.0"
   },
   "devDependencies": {
     "@mastermindzh/prettier-config": "^1.0.0",
-    "electron": "git+https://github.com/castlabs/electron-releases.git#v19.0.5+wvcus",
-    "electron-builder": "^23.3.3",
-    "prettier": "^2.7.1"
+    "electron": "git+https://github.com/castlabs/electron-releases.git#v24.1.2+wvcus",
+    "electron-builder": "^24.2.1",
+    "js-yaml": "^4.1.0",
+    "markdown-toc": "^1.2.0",
+    "prettier": "^2.8.7",
+    "sass-lint": "^1.13.1",
+    "sass-lint-auto-fix": "^0.21.2"
   },
   "prettier": "@mastermindzh/prettier-config"
 }

sass-lint.yml

@@ -0,0 +1,21 @@
+rules:
+  property-sort-order:
+    - 1
+    - order: "smacss"
+  class-name-format:
+    - 1
+    - convention: "hyphenatedbem"
+  quotes:
+    - 1
+    - style: "double"
+  nesting-depth:
+    - 1
+    - max-depth: 3
+  placeholder-in-extend:
+    - 0
+  no-vendor-prefixes:
+    - 0
+  empty-line-between-blocks:
+    - 0
+  force-pseudo-nesting:
+    - 0

src/constants/settings.js

@@ -13,8 +13,10 @@ const settings = {
   api: "api",
   menuBar: "menuBar",
   playBackControl: "playBackControl",
-  muteArtists: "muteArtists",
-  mutedArtists: "mutedArtists",
+  skipArtists: "skipArtists",
+  skippedArtists: "skippedArtists",
+  adBlock: "adBlock",
+  disableBackgroundThrottle: "disableBackgroundThrottle",
   apiSettings: {
     root: "apiSettings",
     port: "apiSettings.port",

src/main.js

@@ -1,5 +1,13 @@
 require("@electron/remote/main").initialize();
-const { app, BrowserWindow, components, globalShortcut, ipcMain, protocol } = require("electron");
+const {
+  app,
+  BrowserWindow,
+  components,
+  globalShortcut,
+  ipcMain,
+  protocol,
+  session,
+} = require("electron");
 const {
   settings,
   store,
@@ -49,7 +57,10 @@ function setFlags() {
  *
  */
 function syncMenuBarWithStore() {
-  mainWindow.setMenuBarVisibility(store.get(settings.menuBar));
+  const fixedMenuBar = store.get(settings.menuBar);
+
+  mainWindow.autoHideMenuBar = !fixedMenuBar;
+  mainWindow.setMenuBarVisibility(fixedMenuBar);
 }
 
 /**
@@ -78,7 +89,9 @@ function createWindow(options = {}) {
     height: store && store.get(settings.windowBounds.height),
     icon,
     backgroundColor: options.backgroundColor,
+    autoHideMenuBar: true,
     webPreferences: {
+      sandbox: false,
       preload: path.join(__dirname, "preload.js"),
       plugins: true,
       devTools: true, // I like tinkering, others might too
@@ -91,6 +104,11 @@ function createWindow(options = {}) {
   // load the Tidal website
   mainWindow.loadURL(tidalUrl);
 
+  if (store.get(settings.disableBackgroundThrottle)) {
+    // prevent setInterval lag
+    mainWindow.webContents.setBackgroundThrottling(false);
+  }
+
   // run stuff after first load
   mainWindow.webContents.once("did-finish-load", () => {});
 
@@ -118,7 +136,9 @@ function registerHttpProtocols() {
   protocol.registerHttpProtocol(PROTOCOL_PREFIX, (request, _callback) => {
     mainWindow.loadURL(`${tidalUrl}/${request.url.substring(PROTOCOL_PREFIX.length + 3)}`);
   });
-  app.setAsDefaultProtocolClient(PROTOCOL_PREFIX);
+  if (!app.isDefaultProtocolClient(PROTOCOL_PREFIX)) {
+    app.setAsDefaultProtocolClient(PROTOCOL_PREFIX);
+  }
 }
 
 function addGlobalShortcuts() {
@@ -135,6 +155,16 @@ function addGlobalShortcuts() {
 app.on("ready", async () => {
   if (isMainInstanceOrMultipleInstancesAllowed()) {
     await components.whenReady();
+
+    // Adblock
+    if (store.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();

src/pages/settings/preload.js

@@ -3,13 +3,15 @@ let trayIcon,
   mpris,
   enableCustomHotkeys,
   enableDiscord,
-  muteArtists,
+  skipArtists,
   notifications,
   playBackControl,
   api,
   port,
   menuBar,
-  mutedArtists,
+  skippedArtists,
+  adBlock,
+  disableBackgroundThrottle,
   singleInstance,
   disableHardwareMediaKeys,
   gpuRasterization;
@@ -33,11 +35,13 @@ function refreshSettings() {
   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");
+  skipArtists.checked = store.get(settings.skipArtists);
+  skippedArtists.value = store.get(settings.skippedArtists).join("\n");
+  adBlock.checked = store.get(settings.adBlock);
   singleInstance.checked = store.get(settings.singleInstance);
   disableHardwareMediaKeys.checked = store.get(settings.flags.disableHardwareMediaKeys);
   gpuRasterization.checked = store.get(settings.flags.gpuRasterization);
+  disableBackgroundThrottle.checked = store.get("disableBackgroundThrottle");
 }
 
 /**
@@ -60,7 +64,7 @@ function hide() {
  */
 function restart() {
   app.relaunch();
-  app.quit();
+  app.exit();
 }
 
 /**
@@ -73,7 +77,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
   document.getElementById("close").addEventListener("click", hide);
   document.getElementById("restart").addEventListener("click", restart);
-  document.querySelectorAll("#openExternal").forEach((elem) =>
+  document.querySelectorAll(".external-link").forEach((elem) =>
     elem.addEventListener("click", function (event) {
       openExternal(event.target.getAttribute("data-url"));
     })
@@ -115,8 +119,10 @@ window.addEventListener("DOMContentLoaded", () => {
   mpris = get("mprisCheckbox");
   enableCustomHotkeys = get("enableCustomHotkeys");
   enableDiscord = get("enableDiscord");
-  muteArtists = get("muteArtists");
-  mutedArtists = get("mutedArtists");
+  skipArtists = get("skipArtists");
+  skippedArtists = get("skippedArtists");
+  adBlock = get("adBlock");
+  disableBackgroundThrottle = get("disableBackgroundThrottle");
   singleInstance = get("singleInstance");
   disableHardwareMediaKeys = get("disableHardwareMediaKeys");
   gpuRasterization = get("gpuRasterization");
@@ -133,8 +139,10 @@ window.addEventListener("DOMContentLoaded", () => {
   addInputListener(enableCustomHotkeys, settings.enableCustomHotkeys);
   addInputListener(enableDiscord, settings.enableDiscord);
   addInputListener(minimizeOnClose, settings.minimizeOnClose);
-  addInputListener(muteArtists, settings.muteArtists);
-  addTextAreaListener(mutedArtists, settings.mutedArtists);
+  addInputListener(skipArtists, settings.skipArtists);
+  addTextAreaListener(skippedArtists, settings.skippedArtists);
+  addInputListener(adBlock, settings.adBlock);
+  addInputListener(disableBackgroundThrottle, settings.disableBackgroundThrottle);
   addInputListener(singleInstance, settings.singleInstance);
   addInputListener(disableHardwareMediaKeys, settings.flags.disableHardwareMediaKeys);
   addInputListener(gpuRasterization, settings.flags.gpuRasterization);

src/pages/settings/settings.html

@@ -2,557 +2,277 @@
 <html lang="en">
 
 <head>
-  <title>Tidal-hifi settings</title>
+  <title>Tidal Hi-Fi 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" />
 </head>
 
-<body>
-  <div class="header">
-    <h1 class="title">Settings</h1>
-    <a id="close" style="cursor: pointer;" class="exitWindow">
-
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 348.333 348.334">
-        <g>
-          <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" />
+<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>
-  </div>
-  <div class="body">
-    <div class="tabset">
 
-      <input type="radio" name="tabset" id="general" checked />
+    <main class="settings">
+      <input type="radio" name="tab" id="general" checked />
       <label for="general">General</label>
 
-      <input type="radio" name="tabset" id="api" />
-      <label for="api">Api</label>
+      <input type="radio" name="tab" id="api" />
+      <label for="api">API</label>
 
-      <!-- Integrations tab -->
-      <input type="radio" name="tabset" id="integrations" />
+      <input type="radio" name="tab" id="integrations" />
       <label for="integrations">Integrations</label>
 
-      <!-- advanced tab -->
-      <input type="radio" name="tabset" id="advanced" />
+      <input type="radio" name="tab" id="advanced" />
       <label for="advanced">Advanced</label>
-      <!-- about tab -->
-      <input type="radio" name="tabset" id="about" />
+
+      <input type="radio" name="tab" id="about" />
       <label for="about">About</label>
 
-      <div class="tab-panels">
-        <section id="general" class="tab-panel">
-          <div class="section">
-            <h3>Playback</h3>
-            <div class="option">
-              <h4>Notifications</h4>
-              <p>
-                Whether to show a notification when a new song starts.
-              </p>
+      <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="slider round"></span>
+                <input id="notifications" type="checkbox" />
+                <span class="switch__slider"></span>
               </label>
             </div>
-            <div class="option">
-              <h4>Mute Artists automatically</h4>
-              <p>
-                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>
-          <div class="section">
-            <h3>UI</h3>
-            <div class="option">
-              <h4>Menubar</h4>
-              <p>
-                Show Tidal-hifi's menu bar
-              </p>
+            <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="menuBar" type="checkbox">
-                <span class="slider round"></span>
+                <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="section">
-            <h3>System</h3>
-            <div class="option">
-              <h4>Tray icon</h4>
-              <p>
-                Show Tidal-hifi's tray icon<br />
-              </p>
+          <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="trayIcon" type="checkbox">
-                <span class="slider round"></span>
-              </label>
-            </div>
-            <div class="option">
-              <h4>Minimize on Close</h4>
-              <p>
-                Minimize window on close instead <br />
-              </p>
-              <label class="switch">
-                <input id="minimizeOnClose" type="checkbox">
-                <span class="slider round"></span>
-              </label>
-            </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="enableCustomHotkeys" type="checkbox">
-                <span class="slider round"></span>
-              </label>
-            </div>
-            <div class="option">
-              <h4>Single instance</h4>
-              <p>
-                Prevent opening multiple tidal-hifi instances
-              </p>
-              <label class="switch">
-                <input id="singleInstance" type="checkbox">
-                <span class="slider round"></span>
+                <input id="menuBar" type="checkbox" />
+                <span class="switch__slider"></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>
-
-            <div class="option">
-              <h4>Web API</h4>
-              <p>
-                Whether to enable the Tidal-hifi web api
-              </p>
+          <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="apiCheckbox" type="checkbox">
-                <span class="slider round"></span>
+                <input id="trayIcon" type="checkbox" />
+                <span class="switch__slider"></span>
               </label>
             </div>
-            <div class="option">
-              <h4 style="margin-bottom: 5px;">API port</h4>
-              <input id="port" type="text" class="freeTextInput" name="port">
-            </div>
-            <div class="option">
-              <h4>Playback control</h4>
-              <p>
-                Whether to enable playback control from the api
-              </p>
+            <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="playBackControl" type="checkbox">
-                <span class="slider round"></span>
+                <input id="minimizeOnClose" type="checkbox" />
+                <span class="switch__slider"></span>
               </label>
             </div>
-          </div>
-        </section>
-        <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>
+            <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="mprisCheckbox" type="checkbox">
-                <span class="slider round"></span>
+                <input id="enableCustomHotkeys" type="checkbox" />
+                <span class="switch__slider"></span>
               </label>
             </div>
-            <div class="option">
-              <h4>Discord RPC</h4>
-              <p>
-                Show what you're listening to on Discord
-              </p>
+            <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="enableDiscord" type="checkbox">
-                <span class="slider round"></span>
+                <input id="singleInstance" type="checkbox" />
+                <span class="switch__slider"></span>
               </label>
             </div>
           </div>
         </section>
-        <section id="advanced" class="tab-panel">
-          <div class="section">
-            <h3>Flags</h3>
-            <div class="option">
-              <h4>Disable hardware media keys</h4>
-              <p>
-                Disable built-in media keys. <br />
-                Also prevents certain desktop environments from recognizing the chrome MPRIS client separetely from the
-                custom MPRIS client.
-              </p>
-              <label class="switch">
-                <input id="disableHardwareMediaKeys" type="checkbox">
-                <span class="slider round"></span>
-              </label>
-            </div>
-            <div class="option">
-              <h4>Enable GPU rasterization</h4>
-              <p>
-                Move a part of the rendering to the GPU for increased performance.
-              </p>
-              <label class="switch">
-                <input id="gpuRasterization" type="checkbox">
-                <span class="slider round"></span>
-              </label>
-            </div>
-          </div>
-        </section>
-        <section id="about" class="tab-panel">
-          <div class="section">
-            <img alt="tidal icon"
-              style="width: 100px; height: auto; display: block; margin: 0 auto; margin-bottom: 20px; margin-top: 20px;"
-              src="./icon.png">
-            <p style="max-width: 350px; display:block; margin: 0 auto; text-align: center;">
-              <a id="openExternal" style="text-decoration: underline; cursor: pointer;"
-                data-url="https://github.com/Mastermindzh/tidal-hifi">Tidal-hifi</a> is made by <a id="openExternal"
-                data-url="https://www.rickvanlieshout.com" style="text-decoration: underline; cursor: pointer;">Rick van
-                Lieshout</a>.<br />
-              It uses <a style="text-decoration: underline; cursor: pointer;" id="openExternal"
-                data-url="https://castlabs.com/">Castlabs'</a> versions of Electron for widevine support.
-            </p>
-          </div>
-        </section>
 
-        <small>Some settings require a restart of Tidal-hifi. To do so, click the button below:</small>
-        <button id="restart" style="width: 100%">Restart Tidal-hifi</button>
+        <section id="api-section" class="tabs__section">
+          <div class="group">
+            <p class="group__title">API</p>
+            <div class="group__description">
+              <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.
+              </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>
+              </label>
+            </div>
+            <div class="group__option">
+              <div class="group__description">
+                <label for="port">API port</label>
+                <input id="port" type="text" 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">
+              <p>
+                TIDAL Hi-Fi is extensible through the use of integrations. You can enable or
+                disable them here.
+              </p>
+            </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>
+              <label class="switch">
+                <input id="mprisCheckbox" type="checkbox" />
+                <span class="switch__slider"></span>
+              </label>
+            </div>
+            <div class="group__option">
+              <div class="group__description">
+                <h4>Discord RPC</h4>
+                <p>Show what you're listening to on Discord.</p>
+              </div>
+              <label class="switch">
+                <input id="enableDiscord" type="checkbox" />
+                <span class="switch__slider"></span>
+              </label>
+            </div>
+          </div>
+        </section>
+
+        <section id="advanced-section" class="tabs__section">
+          <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>
+              <label class="switch">
+                <input id="disableHardwareMediaKeys" type="checkbox" />
+                <span class="switch__slider"></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>
+              <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>
+        </section>
+
+        <section id="about-section" class="tabs__section about-section">
+          <img alt="tidal icon" class="about-section__icon" src="./icon.png" />
+          <p class="about-section__text">
+            <a class="external-link" data-url="https://github.com/Mastermindzh/tidal-hifi">TIDAL Hi-Fi</a>
+            is made by
+            <a class="external-link" data-url="https://www.rickvanlieshout.com">
+              Rick van Lieshout</a>. <br />It uses
+            <a class="external-link" data-url="https://castlabs.com/">Castlabs'</a>
+            version of Electron for widevine support.
+          </p>
+        </section>
+
+        <footer class="footer">
+          <p class="footer__note">
+            Some settings may require a restart of TIDAL Hi-Fi. To do so, click the button below:
+          </p>
+          <button class="footer__button" id="restart">Restart TIDAL Hi-Fi</button>
+        </footer>
       </div>
-    </div>
+    </main>
   </div>
 </body>
 
-<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>
+</html>

src/pages/settings/settings.scss

@@ -0,0 +1,363 @@
+// --- 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;
+
+// --- 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: .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 6 {
+    .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: .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 slider component ---
+    }
+  }
+}
+
+.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;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transition: .4s;
+    border-radius: 40px;
+    background-color: $tidal-grey-darkest;
+
+    &::before {
+      position: absolute;
+      bottom: 2px;
+      left: 2px;
+      width: 24px;
+      height: 24px;
+      transition: .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: .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: 120px;
+  text-align: center;
+
+  &__icon {
+    display: inline-block;
+    width: 100px;
+  }
+
+  &__text {
+    display: block;
+    max-width: 350px;
+    margin: 20px auto 0;
+  }
+
+  // --- Footer ---
+}
+
+.footer {
+  position: sticky;
+  top: calc(100% - 120px);
+  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: .2s;
+    border: 0;
+    border-radius: 12px;
+    background: $tidal-grey-darker;
+    color: $white;
+    font-size: 16px;
+
+    &:hover {
+      background: $tidal-grey-darker-focus;
+    }
+  }
+}

src/preload.js

@@ -7,12 +7,12 @@ const { downloadFile } = require("./scripts/download");
 const statuses = require("./constants/statuses");
 const hotkeys = require("./scripts/hotkeys");
 const globalEvents = require("./constants/globalEvents");
+const { skipArtists } = require("./constants/settings");
 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"]',
@@ -300,6 +300,7 @@ function updateMediaInfo(options, notify) {
           "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 == statuses.paused ? "Paused" : "Playing";
@@ -312,10 +313,15 @@ function updateMediaInfo(options, notify) {
  * 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(/[^0-9]/g, "");
-    return `https://tidal.com/browse/track/${id}`;
+    const id = URLelement.href.replace(/\D/g, "");
+    return id;
   }
 
   return window.location;
@@ -327,8 +333,8 @@ function getTrackURL() {
 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
-  
+  skipArtistsIfFoundInSkippedArtistsList(artists);
+
   const album = elements.getAlbumName();
   const current = elements.getText("current");
   const duration = elements.getText("duration");
@@ -344,12 +350,9 @@ setInterval(function () {
     duration,
     "app-name": appName,
   };
-  
-
 
   const titleOrArtistChanged = currentSong !== songDashArtistTitle;
 
-
   // update title, url and play info with new info
   setTitle(songDashArtistTitle);
   getTrackURL();
@@ -383,23 +386,18 @@ setInterval(function () {
   );
 
   /**
-   * Checks whether the current artist is included in the "muted artists" list and if so it will automatically mute the player
+   * automatically skip a song if the artists are found in the list of artists to skip
+   * @param {*} artists list of artists to skip
    */
-  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;
+  function skipArtistsIfFoundInSkippedArtistsList(artists) {
+    if (store.get(skipArtists)) {
+      const skippedArtists = store.get(settings.skippedArtists);
+      if (skippedArtists.find((artist) => artist === artists) !== undefined) {
+        elements.click("next");
       }
     }
   }
-}, 1000);
+}, 100);
 
 if (process.platform === "linux" && store.get(settings.mpris)) {
   try {

src/scripts/menu.js

@@ -8,7 +8,7 @@ const settingsMenuEntry = {
   click() {
     showSettingsWindow();
   },
-  accelerator: "Control+/",
+  accelerator: "Control+=",
 };
 
 const quitMenuEntry = {
@@ -110,6 +110,7 @@ menuModule.getMenu = function (mainWindow) {
       },
     },
     toggleWindow,
+    quitMenuEntry,
   ];
 
   return Menu.buildFromTemplate(mainMenu);

src/scripts/settings.js

@@ -10,8 +10,10 @@ const store = new Store({
     notifications: true,
     api: true,
     playBackControl: true,
-    muteArtists: false,
-    mutedArtists: ["TIDAL"],
+    skipArtists: false,
+    skippedArtists: [""],
+    adBlock: false,
+    disableBackgroundThrottle: true,
     menuBar: true,
     apiSettings: {
       port: 47836,
@@ -48,11 +50,13 @@ const settingsModule = {
 
 settingsModule.createSettingsWindow = function () {
   settingsWindow = new BrowserWindow({
-    width: 500,
+    width: 700,
     height: 600,
+    resizable: false,
     show: false,
+    transparent: true,
     frame: false,
-    title: "Tidal-hifi - settings",
+    title: "TIDAL Hi-Fi settings",
     webPreferences: {
       preload: path.join(__dirname, "../pages/settings/preload.js"),
       plugins: true,

src/scripts/tray.js

@@ -11,6 +11,18 @@ trayModule.addTray = function (mainWindow, options = { icon: "" }) {
   const menu = getMenu(mainWindow);
 
   tray.setContextMenu(menu);
+
+  tray.on("click", function () {
+    if (mainWindow.isVisible()) {
+      if (!mainWindow.isFocused()) {
+        mainWindow.focus();
+      } else {
+        mainWindow.hide();
+      }
+    } else {
+      mainWindow.show();
+    }
+  });
 };
 
 trayModule.refreshTray = function (mainWindow) {