Merge pull request #241 from Mastermindzh/release/5.3.0

Release/5.3.0

.drone.yml

@@ -0,0 +1,16 @@
+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

.editorconfig

@@ -10,6 +10,10 @@ insert_final_newline = true
 indent_style = space
 indent_size = 2
 
+[**.ts]
+indent_style = space
+indent_size = 2
+
 [**.json]
 indent_style = space
 indent_size = 2
@@ -50,4 +54,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

.github/workflows/build.yml

@@ -5,6 +5,10 @@ on:
     branches-ignore:
       - master
       - develop
+  pull_request:
+    branches-ignore:
+      - master
+      - develop
 jobs:
   build_on_linux:
     runs-on: ubuntu-latest

.github/workflows/release.yml

@@ -5,6 +5,10 @@ on:
     branches:
       - master
       - develop
+  pull_request:
+    branches:
+      - master
+
 jobs:
   build_on_linux:
     runs-on: ubuntu-latest
@@ -16,7 +20,7 @@ jobs:
       - uses: actions/checkout@master
       - uses: actions/setup-node@master
         with:
-          node-version: 16
+          node-version: 19
       - run: npm install
       - run: npm run build
       - uses: actions/upload-artifact@master
@@ -25,12 +29,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: 16
+          node-version: 19
       - run: npm install
       - run: npm run build
       - uses: actions/upload-artifact@master
@@ -44,7 +48,7 @@ jobs:
       - uses: actions/checkout@master
       - uses: actions/setup-node@master
         with:
-          node-version: 16
+          node-version: 19
       - run: npm install
       - run: npm run build
       - uses: actions/upload-artifact@master

.gitignore

@@ -9,9 +9,11 @@ build/linux/arch/*
 !build/linux/arch/install.sh
 *.css
 *.css.map
-!src/themes/**/**.css
 
 # JetBrains IDE configuration
 .idea
 ts-dist/**
 ts-dist
+themes
+!src/themes
+.sass-cache

CHANGELOG.md

@@ -4,6 +4,21 @@ 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.3.0
+
+- SPKChaosPhoenix updated the beautiful Tokyo Night theme:
+
+![](./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

README.md

@@ -1,42 +1,80 @@
 # Tidal-hifi<img src = "./build/icon.png" height="40" align="right"/>
 
-![GitHub release](https://img.shields.io/github/release/Mastermindzh/tidal-hifi.svg)
+![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.
 
-![tidal-hifi preview](./docs/preview.png)
+![tidal-hifi preview](./docs/images/preview.png)
 
 ## Table of Contents
 
 <!-- toc -->
 
-- [Installation](#installation)
-  - [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)
-- [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)
+- [Tidal-hifi](#tidal-hifi)
+  - [Table of Contents](#table-of-contents)
+  - [Features](#features)
+  - [Contributions](#contributions)
+  - [Why did I create tidal-hifi?](#why-did-i-create-tidal-hifi)
+    - [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)
+      - [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)
+  - [Special thanks to](#special-thanks-to)
+  - [Donations](#donations)
+  - [Images](#images)
+    - [Settings window](#settings-window)
+    - [User setups](#user-setups)
 
 <!-- tocstop -->
 
+## Features
+
+- HiFi playback
+- Notifications
+- Custom [theming](./docs/theming.md)
+- Custom hotkeys ([source](https://defkey.com/tidal-desktop-shortcuts))
+- 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))
+- Custom [integrations](#integrations)
+- [Settings feature](./docs/images/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))
+
+## 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-hifi?
+
+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 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 :)
+
 ## 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.
+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
 
@@ -48,15 +86,15 @@ 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
 
@@ -91,23 +129,12 @@ To install and work with the code on this project follow these steps:
 - npm install
 - npm start
 
-## Features
-
-- HiFi playback
-- Notifications
-- Custom hotkeys ([source](https://defkey.com/tidal-desktop-shortcuts))
-- 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))
-- 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-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/integrations.png)
+![integrations menu, showing a list of integrations](./docs/images/integrations.png)
 
 It currently includes:
 
@@ -126,38 +153,20 @@ The last.fm login doesn't work, as is evident from the following issue: [Last.fm
 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.
 
-## 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)
 
-## Buy me a coffee? Please don't
+## Donations
 
-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)
+You can find my Github sponsorship page at: [https://github.com/sponsors/Mastermindzh](https://github.com/sponsors/Mastermindzh)
 
 ## Images
 
 ### Settings window
 
-![settings window](./docs/settings-preview.png)
+![settings window](./docs/images/settings-preview.png)
 
 ### User setups
 

build/electron-builder.base.yml

@@ -7,6 +7,8 @@ snap:
   plugs:
     - default
     - screen-inhibit-control
+extraResources:
+  - "themes/**"
 linux:
   category: AudioVideo
   icon: assets/icons

docs/theming.md

@@ -0,0 +1,38 @@
+# Theming tidal-hifi
+
+## Table of contents
+
+<!-- toc -->
+
+- [Theming tidal-hifi](#theming-tidal-hifi)
+  - [Table of contents](#table-of-contents)
+  - [Custom CSS](#custom-css)
+  - [config](#config)
+  - [Warning! Themes might break](#warning-themes-might-break)
+
+<!-- tocstop -->
+
+By default tidal-hifi 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).

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tidal-hifi",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tidal-hifi",
-      "version": "5.1.0",
+      "version": "5.3.0",
       "license": "MIT",
       "dependencies": {
         "@electron/remote": "^2.0.9",
@@ -25,6 +25,7 @@
         "@types/request": "^2.48.8",
         "@typescript-eslint/eslint-plugin": "^5.59.1",
         "@typescript-eslint/parser": "^5.59.1",
+        "copyfiles": "^2.4.1",
         "electron": "git+https://github.com/castlabs/electron-releases.git#v24.1.2+wvcus",
         "electron-builder": "^24.2.1",
         "eslint": "^8.39.0",
@@ -2631,6 +2632,85 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/copyfiles": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.4.1.tgz",
+      "integrity": "sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.0.5",
+        "minimatch": "^3.0.3",
+        "mkdirp": "^1.0.4",
+        "noms": "0.0.0",
+        "through2": "^2.0.1",
+        "untildify": "^4.0.0",
+        "yargs": "^16.1.0"
+      },
+      "bin": {
+        "copyfiles": "copyfiles",
+        "copyup": "copyfiles"
+      }
+    },
+    "node_modules/copyfiles/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/copyfiles/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/copyfiles/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/copyfiles/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/copyfiles/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -5992,6 +6072,40 @@
         "node": ">=10"
       }
     },
+    "node_modules/noms": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz",
+      "integrity": "sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "readable-stream": "~1.0.31"
+      }
+    },
+    "node_modules/noms/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "dev": true
+    },
+    "node_modules/noms/node_modules/readable-stream": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+      "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "node_modules/noms/node_modules/string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
+      "dev": true
+    },
     "node_modules/nopt": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
@@ -8416,6 +8530,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/untildify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",

package.json

@@ -1,14 +1,15 @@
 {
   "name": "tidal-hifi",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "Tidal on Electron with widevine(hifi) support",
   "main": "ts-dist/main.js",
   "scripts": {
     "start": "electron .",
     "compile": "tsc && npm run sass-and-copy",
     "watch": "tsc-watch --onSuccess \"npm run sass-and-copy\"",
-    "sass-and-copy": "npm run sass && npm run copy-files",
-    "copy-files": "rsync -av --exclude '*.ts' --exclude '*.scss' ./src/pages ts-dist",
+    "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",
@@ -20,7 +21,7 @@
     "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": "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"
   },
@@ -50,6 +51,7 @@
     "@types/request": "^2.48.8",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
+    "copyfiles": "^2.4.1",
     "electron": "git+https://github.com/castlabs/electron-releases.git#v24.1.2+wvcus",
     "electron-builder": "^24.2.1",
     "eslint": "^8.39.0",

src/constants/flags.ts

@@ -1,4 +1,4 @@
-export const flags: { [key: string]: { flag: string; value?: any }[] } = {
+export const flags: { [key: string]: { flag: string; value?: string }[] } = {
   gpuRasterization: [{ flag: "enable-gpu-rasterization", value: undefined }],
   disableHardwareMediaKeys: [{ flag: "disable-features", value: "HardwareMediaKeyHandling" }],
 };

src/constants/settings.ts

@@ -33,6 +33,7 @@ export const settings = {
   singleInstance: "singleInstance",
   skipArtists: "skipArtists",
   skippedArtists: "skippedArtists",
+  theme: "theme",
   trayIcon: "trayIcon",
   updateFrequency: "updateFrequency",
   windowBounds: {

src/pages/settings/preload.ts

@@ -1,8 +1,10 @@
-import remote from "@electron/remote";
+import remote, { app } from "@electron/remote";
 import { ipcRenderer, shell } from "electron";
+import fs from "fs";
 import { globalEvents } from "../../constants/globalEvents";
 import { settings } from "../../constants/settings";
 import { settingsStore } from "./../../scripts/settings";
+import { getOptions, getOptionsHeader, getThemeListFromDirectory } from "./theming";
 
 let adBlock: HTMLInputElement,
   api: HTMLInputElement,
@@ -21,8 +23,45 @@ let adBlock: HTMLInputElement,
   singleInstance: HTMLInputElement,
   skipArtists: HTMLInputElement,
   skippedArtists: HTMLInputElement,
+  theme: HTMLSelectElement,
   trayIcon: HTMLInputElement,
   updateFrequency: HTMLInputElement;
+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";
+
+  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();
+  });
+}
 
 /**
  * Sync the UI forms with the current settings
@@ -30,7 +69,7 @@ let adBlock: HTMLInputElement,
 function refreshSettings() {
   adBlock.checked = settingsStore.get(settings.adBlock);
   api.checked = settingsStore.get(settings.api);
-  customCSS.value = settingsStore.get(settings.customCSS);
+  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);
@@ -44,6 +83,7 @@ function refreshSettings() {
   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);
@@ -75,10 +115,13 @@ function restart() {
  * Bind UI components to functions after DOMContentLoaded
  */
 window.addEventListener("DOMContentLoaded", () => {
-  function get(id: string): HTMLInputElement {
-    return document.getElementById(id) as HTMLInputElement;
+  function get<T = HTMLInputElement>(id: string): T {
+    return document.getElementById(id) as T;
   }
 
+  getThemeFiles();
+  handleFileUploads();
+
   document.getElementById("close").addEventListener("click", hide);
   document.getElementById("restart").addEventListener("click", restart);
   document.querySelectorAll(".external-link").forEach((elem) =>
@@ -105,6 +148,13 @@ window.addEventListener("DOMContentLoaded", () => {
     });
   }
 
+  function addSelectListener(source: HTMLSelectElement, key: string) {
+    source.addEventListener("change", () => {
+      settingsStore.set(key, source.value);
+      ipcRenderer.send(globalEvents.storeChanged);
+    });
+  }
+
   ipcRenderer.on("refreshData", () => {
     refreshSettings();
   });
@@ -127,6 +177,7 @@ window.addEventListener("DOMContentLoaded", () => {
   notifications = get("notifications");
   playBackControl = get("playBackControl");
   port = get("port");
+  theme = get<HTMLSelectElement>("themesList");
   trayIcon = get("trayIcon");
   skipArtists = get("skipArtists");
   skippedArtists = get("skippedArtists");
@@ -152,6 +203,7 @@ window.addEventListener("DOMContentLoaded", () => {
   addInputListener(skipArtists, settings.skipArtists);
   addTextAreaListener(skippedArtists, settings.skippedArtists);
   addInputListener(singleInstance, settings.singleInstance);
+  addSelectListener(theme, settings.theme);
   addInputListener(trayIcon, settings.trayIcon);
   addInputListener(updateFrequency, settings.updateFrequency);
 });

src/pages/settings/settings.html

@@ -35,6 +35,9 @@
       <input type="radio" name="tab" 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" />
       <label for="about">About</label>
 
@@ -226,6 +229,49 @@
                 <input id="updateFrequency" type="number" class="text-input" name="updateFrequency" />
               </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>
+                <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="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>
@@ -238,41 +284,34 @@
           <textarea id="customCSS" class="textarea" cols="40" rows="8" spellcheck="false"></textarea>
 
           <div class="group">
-            <p class="group__title">Flags</p>
+            <p class="group__title">Theme files</p>
             <div class="group__option">
               <div class="group__description">
-                <h4>Disable hardware built-in media keys</h4>
+                <h4>Current theme</h4>
                 <p>
-                  Also prevents certain desktop environments from recognizing the chrome MPRIS
-                  client separately from the custom MPRIS client.
+                  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>
-              <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>
+                <h4>Upload new themes</h4>
                 <p>
-                  Makes app more responsive while in the background, at the cost of performance.
+                  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>
-              <label class="switch">
-                <input id="disableBackgroundThrottle" type="checkbox" />
-                <span class="switch__slider"></span>
-              </label>
             </div>
           </div>
         </section>

src/pages/settings/settings.scss

@@ -156,7 +156,7 @@ html {
     display: none;
   }
 
-  @for $i from 1 to 6 {
+  @for $i from 1 to 7 {
     .settings > input:nth-child(#{$i * 2 - 1}):checked ~ & > .tabs__section:nth-child(#{$i}) {
       display: block;
     }
@@ -230,8 +230,6 @@ html {
         border-color: $tidal-blue;
         color: $white;
       }
-
-      // --- Switch slider component ---
     }
   }
 }
@@ -361,3 +359,87 @@ html {
     }
   }
 }
+
+// file upload
+
+.file-drop-area {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  padding: 25px 0 25px 0px;
+  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;
+    }
+  }
+}

src/pages/settings/theming.ts

@@ -0,0 +1,54 @@
+import fs from "fs";
+
+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) {
+    console.error(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) {
+    console.error(err);
+  }
+};

src/preload.ts

@@ -1,5 +1,6 @@
 import { Notification, app, dialog } from "@electron/remote";
 import { ipcRenderer } from "electron";
+import fs from "fs";
 import Player from "mpris-service";
 import { globalEvents } from "./constants/globalEvents";
 import { settings } from "./constants/settings";
@@ -13,7 +14,7 @@ import { setTitle } from "./scripts/window-functions";
 const notificationPath = `${app.getPath("userData")}/notification.jpg`;
 const appName = "Tidal Hifi";
 let currentSong = "";
-let player: any;
+let player: Player;
 let currentPlayStatus = statuses.paused;
 
 const elements = {
@@ -39,7 +40,7 @@ const elements = {
   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',
+  playing_title: 'span[data-test="table-cell-title"].css-1vjc1xk',
   album_name_cell: '[data-test="table-cell-album"]',
   tracklist_row: '[data-test="tracklist-row"]',
   volume: '*[data-test="volume"]',
@@ -147,8 +148,24 @@ const elements = {
 
 function addCustomCss() {
   window.addEventListener("DOMContentLoaded", () => {
+    const selectedTheme = settingsStore.get(settings.theme);
+    if (selectedTheme !== "none") {
+      const themeFile = `${process.resourcesPath}/${selectedTheme}`;
+      fs.readFile(themeFile, "utf-8", (err, data) => {
+        if (err) {
+          alert("An error ocurred reading the theme file.");
+          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(settings.customCSS);
+    style.innerHTML = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
     document.head.appendChild(style);
   });
 }

src/scripts/express.ts

@@ -18,7 +18,7 @@ export const startExpress = (mainWindow: BrowserWindow) => {
    * @param {*} res
    * @param {*} action
    */
-  function handleGlobalEvent(res: Response, action: any) {
+  function handleGlobalEvent(res: Response, action: string) {
     mainWindow.webContents.send("globalEvent", action);
     res.sendStatus(200);
   }

src/scripts/settings.ts

@@ -13,7 +13,7 @@ export const settingsStore = new Store({
     apiSettings: {
       port: 47836,
     },
-    customCSS: "",
+    customCSS: [],
     disableBackgroundThrottle: true,
     disableHardwareMediaKeys: false,
     enableCustomHotkeys: false,
@@ -30,6 +30,7 @@ export const settingsStore = new Store({
     singleInstance: true,
     skipArtists: false,
     skippedArtists: [""],
+    theme: "none",
     trayIcon: true,
     updateFrequency: 500,
     windowBounds: { width: 800, height: 600 },
@@ -54,7 +55,7 @@ export const createSettingsWindow = function () {
   settingsWindow = new BrowserWindow({
     width: 700,
     height: 600,
-    resizable: false,
+    resizable: true,
     show: false,
     transparent: true,
     frame: false,
@@ -66,7 +67,7 @@ export const createSettingsWindow = function () {
     },
   });
 
-  settingsWindow.on("close", (event: any) => {
+  settingsWindow.on("close", (event: Event) => {
     if (settingsWindow != null) {
       event.preventDefault();
       settingsWindow.hide();

src/themes/Blood.scss

@@ -0,0 +1,10 @@
+$foreground: red;
+$background: black;
+
+span {
+  color: $foreground;
+}
+
+.sidebar--WvRg_ {
+  background-color: $background;
+}

src/themes/Tokyo Night.scss

@@ -0,0 +1,85 @@
+:root {
+  --footer-player-background: #1a1b26;
+  --sidebar-background: #1a1b26;
+  --sidebar-hover-background: #414868;
+  --sidebar-menu-top-text: #565f89;
+  --sidebar-menu-playlist-text: #565f89;
+  --search-background: #1a1b26;
+  --main-background: #16161e;
+  --main-navigation-control-background: #1a1b26;
+  --main-feed-button-background: #1a1b26;
+  --player-control-background: #24283b;
+  --player-control-active-button: #ff9e64;
+  --player-progress-bar: #ff9e64;
+  --indicator-hifi-background: #9ece6a;
+  --indicator-hifi-span: #1a1b26;
+  --player-control-favorite: #f7768e;
+  --search-dialog-background: #24283b;
+  --right-queue-background: #24283b;
+}
+.player--gAOQG.notFullscreen--xbpBL {
+  background-color: var(--footer-player-background);
+}
+.sidebar--jVJai {
+  background-color: var(--sidebar-background);
+  contain: strict;
+  flex-grow: 1;
+  overflow-y: auto;
+}
+.item--buEQw:hover {
+  background-color: var(--sidebar-hover-background);
+}
+.main--jxfcQ {
+  background-color: var(--main-background);
+}
+button.button--yO9Cd {
+  background-color: var(--main-navigation-control-background);
+}
+.player--gAOQG.lossLess--ON3FI button.withBackground[aria-checked="true"] path {
+  fill: var(--player-control-active-button);
+}
+.player--gAOQG.lossLess--ON3FI button.withBackground[aria-checked="true"] {
+  background-color: var(--player-control-background);
+}
+.activeItem--kFIk0 .activeItem--kFIk0 .playlistItem--mQrxp .section--PSIay.playingItem--eWkYS {
+  color: #565f89;
+}
+.progressBarWrapper--IBBI9 {
+  color: var(--player-progress-bar);
+}
+.playbackControls--FhKVf button .tidal-ui__icon {
+  transform: scale(1);
+}
+.css-11m9iw3 {
+  background-color: var(--indicator-hifi-background);
+}
+.css-11m9iw3 span {
+  color: var(--indicator-hifi-span);
+}
+.activeItem--kFIk0 {
+  color: var(--sidebar-menu-top-text);
+}
+.activeItem--kFIk0 .playlistItem--mQrxp {
+  color: var(--sidebar-menu-playlist-text);
+}
+button.feedBell--kvAbD {
+  background-color: var(--main-feed-button-background);
+}
+.baseContainer--jxCbW {
+  background-color: var(--search-dialog-background);
+}
+.favoriteButton--Qladw.is-favorite path {
+  fill: var(--player-control-favorite);
+}
+.container--PFTHk {
+  background-color: var(--right-queue-background);
+}
+.container--cl4MJ{
+  background-color: var(--search-background);
+}
+.searchFieldHighlighted--Fitvs {
+  color: var(--snow-white);
+}
+.searchField--EGBSq {
+  background-color: var(--search-background);
+}

src/themes/test.css

@@ -1,3 +0,0 @@
-h1 {
-  color: green;
-}

src/types/mpris-service.d.ts

@@ -0,0 +1,60 @@
+declare class InitOptions {
+  name: string;
+  identity: string;
+  supportedUriSchemes: string[];
+  supportedMimeTypes: string[];
+  supportedInterfaces: string[];
+  desktopEntry: string;
+}
+
+declare class Player {
+  metadata: {
+    "xesam:title": string;
+    "xesam:artist": string[];
+    "xesam:album": string;
+    "mpris:artUrl": string;
+    "mpris:length": number;
+    "mpris:trackid": string;
+    // other options
+    [key: string]: string | number | string[] | object;
+  };
+  playbackStatus: string;
+  identity: string;
+  fullscreen: boolean;
+  supportedUriSchemes: string[];
+  supportedMimeTypes: string[];
+  canQuit: boolean;
+  canRaise: boolean;
+  canSetFullscreen: boolean;
+  hasTrackList: boolean;
+  desktopEntry: string;
+  loopStatus: string;
+  shuffle: boolean;
+  volume: number;
+  canControl: boolean;
+  canPause: boolean;
+  canPlay: boolean;
+  canSeek: boolean;
+  canGoNext: boolean;
+  canGoPrevious: boolean;
+  rate: number;
+  minimumRate: number;
+  maximumRate: number;
+  playlists: string[];
+  activePlaylist: string;
+
+  constructor(opts: { name: string; supportedInterfaces?: string[] });
+  constructor(opts: InitOptions);
+
+  getPosition(): number;
+  seeked(): void;
+  getTrackIndex(trackId: number): number;
+  getTrack(trackId: number): string;
+  addTrack(track: object): void;
+  removeTrack(trackId: number): number;
+  getPlaylistIndex(playlistId: number): number;
+  setPlaylists(playlists: object): void;
+  setActivePlaylist(playlistId: number): void;
+
+  on(event: string | symbol, listener: (...args: object[]) => void): this;
+}

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "typeRoots": ["src/types"],
     "module": "commonjs",
     "target": "ES6",
     "noImplicitAny": true,