Merge pull request #279 from Mastermindzh/snyk-upgrade-e43be58e4e7a5f073bb845196cc13d2b

[Snyk] Upgrade hotkeys-js from 3.11.2 to 3.12.0

.vscode/settings.json

@@ -16,5 +16,9 @@
     "tracklist",
     "widevine",
     "xesam"
-  ]
+  ],
+  "sonarlint.connectedMode.project": {
+    "connectionId": "public-sonarcloud",
+    "projectKey": "Mastermindzh_tidal-hifi"
+  }
 }

CHANGELOG.md

@@ -4,10 +4,19 @@ 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.7.0]
+
+- Renamed app to TIDAL Hi-Fi.
+- Made sure all windows run with the same web preferences set (compared to main app).
+  - Fixes the last.fm bug.
+- Added settings to customize the Discord rich presence information
+  - Discord settings are now also collapsible like the ListenBrainz ones are
+- Restyled settings menu to include version number and useful links on the about page
+
 ## [5.6.0]
 
 - Added support for Wayland (on by default) fixes [#262](https://github.com/Mastermindzh/tidal-hifi/issues/262) and [#157](https://github.com/Mastermindzh/tidal-hifi/issues/157)
-- Made it clear in the readme that this tidal-hifi client supports High & Max audio settings. fixes [#261](https://github.com/Mastermindzh/tidal-hifi/issues/261)
+- Made it clear in the readme that this TIDAL Hi-Fi client supports High & Max audio settings. fixes [#261](https://github.com/Mastermindzh/tidal-hifi/issues/261)
 - Added app suspension inhibitors when music is playing. fixes [#257](https://github.com/Mastermindzh/tidal-hifi/issues/257)
 - Fixed bug with theme files from user directory trying to load: "an error occurred reading the theme file"
 - Fixed: config flags not being set correctly
@@ -89,7 +98,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.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
+  - Name has changed to TIDAL Hi-Fi
 
 ## 4.1.2
 
@@ -137,7 +146,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Updated to Electron 15
 - Fixed the develop "build-unpacked" command
-- Added setting to disable multiple tidal-hifi windows (defaults to true)
+- Added setting to disable multiple TIDAL Hi-Fi windows (defaults to true)
 - Added setting to disable HardwareMediaKeyHandling (defaults to false)
 
 ## 2.8.2
@@ -175,7 +184,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## 2.5.0
 
-- Notify-send now correctly shows "Tidal HiFi" as the program name
+- Notify-send now correctly shows "Tidal Hi-Fi" as the program name
 - Updated dependencies (including electron itself)
 
 ### known issues

README.md

@@ -1,20 +1,20 @@
-# Tidal-hifi<img src = "./build/icon.png" height="40" align="right"/>
+# TIDAL Hi-Fi (Max quality)<img src = "./build/icon.png" height="40" align="right"/>
 
 ![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 (High & Max) support thanks to widevine.
+The web version of [listen.tidal.com](https://listen.tidal.com) running in electron with Hi-Fi (High & Max) support thanks to widevine.
 
-![tidal-hifi preview](./docs/images/preview.png)
+![TIDAL Hi-Fi preview](./docs/images/preview.png)
 
 ## Table of Contents
 
 <!-- toc -->
 
-- [Tidal-hifi](#tidal-hifi)
+- [TIDAL Hi-Fi (Max quality)](#tidal-hi-fi-max-quality)
   - [Table of Contents](#table-of-contents)
   - [Features](#features)
   - [Contributions](#contributions)
-  - [Why did I create tidal-hifi?](#why-did-i-create-tidal-hifi)
+  - [Why did I create TIDAL Hi-Fi?](#why-did-i-create-tidal-hi-fi)
     - [Why not extend existing projects?](#why-not-extend-existing-projects)
   - [Installation](#installation)
     - [Dependencies](#dependencies)
@@ -26,7 +26,6 @@ The web version of [listen.tidal.com](https://listen.tidal.com) running in elect
     - [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)
     - [DRM not working on Windows](#drm-not-working-on-windows)
   - [Special thanks to](#special-thanks-to)
   - [Donations](#donations)
@@ -42,6 +41,7 @@ The web version of [listen.tidal.com](https://listen.tidal.com) running in elect
 - Notifications
 - Custom [theming](./docs/theming.md)
 - Custom hotkeys ([source](https://defkey.com/tidal-desktop-shortcuts))
+- Better icons thanks to [Papirus-icon-theme](https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/)
 - [Settings feature](./docs/images/settings.png) to disable certain functionality. (`ctrl+=` or `ctrl+0`)
 - API for status and playback
 - Disabled audio & visual ads, unlocked lyrics, suggested track, track info, and unlimited skips thanks to uBlockOrigin custom filters ([source](https://github.com/uBlockOrigin/uAssets/issues/17495))
@@ -58,7 +58,7 @@ To contribute you can use the standard GitHub features (issues, prs, etc) or joi
 
 - ![Discord logo](./docs/images/discord.png) [Join the Discord server](https://discord.gg/yhNwf4v4He)
 
-## Why did I create tidal-hifi?
+## Why did I create TIDAL Hi-Fi?
 
 I moved from Spotify over to Tidal and found Linux support to be lacking.
 When I started this project there weren't any Linux apps that offered Tidal's "hifi" options nor any scripts to control it.
@@ -103,10 +103,10 @@ To install with `snap` you need to download the pre-packaged snap-package from t
 
 ### Arch Linux
 
-Arch Linux users can use the AUR to install tidal-hifi:
+Arch Linux users can use the AUR to install TIDAL Hi-Fi:
 
 ```sh
-trizen tidal-hifi-bin
+trizen tidal-hifi-git
 ```
 
 ### Flatpak
@@ -130,13 +130,13 @@ nix-env -iA nixpkgs.tidal-hifi
 To install and work with the code on this project follow these steps:
 
 - git clone [https://github.com/Mastermindzh/tidal-hifi.git](https://github.com/Mastermindzh/tidal-hifi.git)
-- cd tidal-hifi
+- cd TIDAL Hi-Fi
 - npm install
 - npm start
 
 ## Integrations
 
-tidal-hifi comes with several integrations out of the box.
+TIDAL Hi-Fi comes with several integrations out of the box.
 You can find these in the settings menu (`ctrl + =` by default) under the "integrations" tab.
 
 ![integrations menu, showing a list of integrations](./docs/images/integrations.png)
@@ -148,15 +148,9 @@ Integrations with other projects that are not included natively:
 
 ## Known bugs
 
-### last.fm doesn't work out of the box. Use rescrobbler as a workaround
-
-The last.fm login doesn't work, as is evident from the following issue: [Last.fm login doesn't work](https://github.com/Mastermindzh/tidal-hifi/issues/4).
-However, in that same issue you can read about a workaround using [rescrobbler](https://github.com/InputUsername/rescrobbled).
-For now, that will be the default workaround.
-
 ### DRM not working on Windows
 
-Most Windows users run into DRM issues when trying to use tidal-hifi.
+Most Windows users run into DRM issues when trying to use TIDAL Hi-Fi.
 Nothing I can do about that I'm afraid... Tidal is working on removing/changing DRM so when they finish with that we can give it another shot.
 
 ## Special thanks to

docs/theming.md

@@ -1,10 +1,10 @@
-# Theming tidal-hifi
+# Theming TIDAL Hi-Fi
 
 ## Table of contents
 
 <!-- toc -->
 
-- [Theming tidal-hifi](#theming-tidal-hifi)
+- [Theming TIDAL Hi-Fi](#theming-TIDAL Hi-Fi)
   - [Table of contents](#table-of-contents)
   - [Custom CSS](#custom-css)
   - [config](#config)
@@ -12,7 +12,7 @@
 
 <!-- tocstop -->
 
-By default tidal-hifi comes with a few themes.
+By default TIDAL Hi-Fi comes with a few themes.
 You can select these in the settings window under the theming tab as shown below.
 
 ![Settings window with the theming tab opened](./images/theming.png)

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "tidal-hifi",
+  "name": "TIDAL Hi-Fi",
   "version": "5.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "tidal-hifi",
+      "name": "TIDAL Hi-Fi",
       "version": "5.6.0",
       "license": "MIT",
       "dependencies": {
@@ -14,7 +14,7 @@
         "discord-rpc": "^4.0.1",
         "electron-store": "^8.1.0",
         "express": "^4.18.2",
-        "hotkeys-js": "^3.11.2",
+        "hotkeys-js": "^3.12.0",
         "mpris-service": "^2.1.2",
         "request": "^2.88.2",
         "sass": "^1.64.1"
@@ -4855,9 +4855,9 @@
       }
     },
     "node_modules/hotkeys-js": {
-      "version": "3.11.2",
+      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.11.2.tgz",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.12.0.tgz",
-      "integrity": "sha512-hLuR+wtvrVrVFHku5cud44cPXQf5ke+96TonRaGzlNSt22rh2LH65avLYFNsc+QpzMuOEQG/IxJT5mEop99rvg=="
+      "integrity": "sha512-Z+N573ycUKIGwFYS3ID1RzMJiGmtWMGKMiaNLyJS8B1ei+MllF4ZYmKS2T0kMWBktOz+WZLVNikftEgnukOrXg=="
     },
     "node_modules/html-tags": {
       "version": "3.3.1",

package.json

@@ -43,7 +43,7 @@
     "discord-rpc": "^4.0.1",
     "electron-store": "^8.1.0",
     "express": "^4.18.2",
-    "hotkeys-js": "^3.11.2",
+    "hotkeys-js": "^3.12.0",
     "mpris-service": "^2.1.2",
     "request": "^2.88.2",
     "sass": "^1.64.1"

scripts/resize-icons.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+if [ "$1" != "" ]; then # check if arg 1 is present
+    FILE=$1
+else
+    echo "Please provide a file as an argument."
+    exit 1
+fi
+
+SIZES=("16x16" "22x22" "24x24" "32x32" "48x48" "64x64" "128x128" "256x256" "384x384")
+
+echo "Resizing $FILE..."
+
+for i in "${SIZES[@]}"; do
+    convert "$FILE" -resize "$i" "$i.png"
+done

src/constants/settings.ts

@@ -20,6 +20,10 @@ export const settings = {
   disableHardwareMediaKeys: "disableHardwareMediaKeys",
   enableCustomHotkeys: "enableCustomHotkeys",
   enableDiscord: "enableDiscord",
+  discord: {
+    detailsPrefix: "discord.detailsPrefix",
+    buttonText: "discord.buttonText",
+  },
   ListenBrainz: {
     root: "ListenBrainz",
     enabled: "ListenBrainz.enabled",

src/constants/values.ts

@@ -1,3 +1,3 @@
 export default {
-  name: "tidal-hifi",
+  name: "TIDAL Hi-Fi",
 };

src/features/flags/flags.ts

@@ -21,7 +21,6 @@ export function setManagedFlagsFromSettings(app: App) {
     for (const [key, value] of Object.entries(flagsFromSettings)) {
       if (value) {
         flags[key].forEach((flag) => {
-          Logger.log(`enabling command line option ${flag.flag} with value ${flag.value}`);
           setFlag(app, flag.flag, flag.value);
         });
       }
@@ -37,5 +36,6 @@ export function setManagedFlagsFromSettings(app: App) {
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function setFlag(app: App, flag: string, value?: any) {
+  Logger.log(`enabling command line option ${flag} with value ${value}`);
   app.commandLine.appendSwitch(flag, value);
 }

src/main.ts

@@ -37,10 +37,14 @@ const tidalUrl = "https://listen.tidal.com";
 let mainInhibitorId = -1;
 
 initialize();
-
 let mainWindow: BrowserWindow;
 const icon = path.join(__dirname, "../assets/icon.png");
 const PROTOCOL_PREFIX = "tidal";
+const windowPreferences = {
+  sandbox: false,
+  plugins: true,
+  devTools: true, // I like tinkering, others might too
+};
 
 setDefaultFlags(app);
 setManagedFlagsFromSettings(app);
@@ -84,10 +88,10 @@ function createWindow(options = { x: 0, y: 0, backgroundColor: "white" }) {
     backgroundColor: options.backgroundColor,
     autoHideMenuBar: true,
     webPreferences: {
-      sandbox: false,
+      ...windowPreferences,
+      ...{
         preload: path.join(__dirname, "preload.js"),
-      plugins: true,
+      },
-      devTools: true, // I like tinkering, others might too
     },
   });
   enable(mainWindow.webContents);
@@ -120,6 +124,18 @@ function createWindow(options = { x: 0, y: 0, backgroundColor: "white" }) {
     const { width, height } = mainWindow.getBounds();
     settingsStore.set(settings.windowBounds.root, { width, height });
   });
+  mainWindow.webContents.setWindowOpenHandler(() => {
+    return {
+      action: "allow",
+      overrideBrowserWindowOptions: {
+        webPreferences: {
+          sandbox: false,
+          plugins: true,
+          devTools: true, // I like tinkering, others might too
+        },
+      },
+    };
+  });
 }
 
 function registerHttpProtocols() {

src/pages/settings/preload.ts

@@ -7,6 +7,20 @@ import { Logger } from "../../features/logger";
 import { settingsStore } from "./../../scripts/settings";
 import { getOptions, getOptionsHeader, getThemeListFromDirectory } from "./theming";
 
+// All switches on the settings screen that show additional options based on their state
+const switchesWithSettings = {
+  listenBrainz: {
+    switch: "enableListenBrainz",
+    classToHide: "listenbrainz__options",
+    settingsKey: settings.ListenBrainz.enabled,
+  },
+  discord: {
+    switch: "enableDiscord",
+    classToHide: "discord_options",
+    settingsKey: settings.enableDiscord,
+  },
+};
+
 let adBlock: HTMLInputElement,
   api: HTMLInputElement,
   customCSS: HTMLInputElement,
@@ -30,7 +44,9 @@ let adBlock: HTMLInputElement,
   enableListenBrainz: HTMLInputElement,
   ListenBrainzAPI: HTMLInputElement,
   ListenBrainzToken: HTMLInputElement,
-  enableWaylandSupport: HTMLInputElement;
+  enableWaylandSupport: HTMLInputElement,
+  discord_details_prefix: HTMLInputElement,
+  discord_button_text: HTMLInputElement;
 
 function getThemeFiles() {
   const selectElement = document.getElementById("themesList") as HTMLSelectElement;
@@ -69,6 +85,20 @@ function handleFileUploads() {
   });
 }
 
+/**
+ * hide or unhide an element
+ * @param checked
+ * @param toggleOptions
+ */
+function setElementHidden(
+  checked: boolean,
+  toggleOptions: { switch: string; classToHide: string }
+) {
+  const element = document.getElementById(toggleOptions.classToHide);
+
+  checked ? element.classList.remove("hidden") : element.classList.add("hidden");
+}
+
 /**
  * Sync the UI forms with the current settings
  */
@@ -98,6 +128,13 @@ function refreshSettings() {
     enableListenBrainz.checked = settingsStore.get(settings.ListenBrainz.enabled);
     ListenBrainzAPI.value = settingsStore.get(settings.ListenBrainz.api);
     ListenBrainzToken.value = settingsStore.get(settings.ListenBrainz.token);
+    discord_details_prefix.value = settingsStore.get(settings.discord.detailsPrefix);
+    discord_button_text.value = settingsStore.get(settings.discord.buttonText);
+
+    // set state of all switches with additional settings
+    Object.values(switchesWithSettings).forEach((settingSwitch) => {
+      setElementHidden(settingsStore.get(settingSwitch.settingsKey), settingSwitch);
+    });
   } catch (error) {
     Logger.log("Refreshing settings failed.", error);
   }
@@ -118,7 +155,7 @@ function hide() {
 }
 
 /**
- * Restart tidal-hifi after changes
+ * Restart TIDAL Hi-Fi after changes
  */
 function restart() {
   app.relaunch();
@@ -144,18 +181,22 @@ window.addEventListener("DOMContentLoaded", () => {
     })
   );
 
-  function addInputListener(source: HTMLInputElement, key: string) {
+  function addInputListener(
+    source: HTMLInputElement,
+    key: string,
+    toggleOptions?: { switch: string; classToHide: string }
+  ) {
     source.addEventListener("input", () => {
       if (source.value === "on") {
         settingsStore.set(key, source.checked);
       } else {
         settingsStore.set(key, source.value);
       }
-      // Live update the view for ListenBrainz input, hide if disabled/show if enabled
+
-      if (source.value === "on" && source.id === "enableListenBrainz") {
+      if (toggleOptions) {
-        source.checked
+        if (source.value === "on" && source.id === toggleOptions.switch) {
-          ? document.getElementById("listenbrainz__options").removeAttribute("hidden")
+          setElementHidden(source.checked, toggleOptions);
-          : document.getElementById("listenbrainz__options").setAttribute("hidden", "true");
+        }
       }
       ipcRenderer.send(globalEvents.storeChanged);
     });
@@ -207,19 +248,17 @@ window.addEventListener("DOMContentLoaded", () => {
   enableListenBrainz = get("enableListenBrainz");
   ListenBrainzAPI = get("ListenBrainzAPI");
   ListenBrainzToken = get("ListenBrainzToken");
+  discord_details_prefix = get("discord_details_prefix");
+  discord_button_text = get("discord_button_text");
 
   refreshSettings();
-  enableListenBrainz.checked
-    ? document.getElementById("listenbrainz__options").removeAttribute("hidden")
-    : document.getElementById("listenbrainz__options").setAttribute("hidden", "true");
-
   addInputListener(adBlock, settings.adBlock);
   addInputListener(api, settings.api);
   addTextAreaListener(customCSS, settings.customCSS);
   addInputListener(disableBackgroundThrottle, settings.disableBackgroundThrottle);
   addInputListener(disableHardwareMediaKeys, settings.flags.disableHardwareMediaKeys);
   addInputListener(enableCustomHotkeys, settings.enableCustomHotkeys);
-  addInputListener(enableDiscord, settings.enableDiscord);
+  addInputListener(enableDiscord, settings.enableDiscord, switchesWithSettings.discord);
   addInputListener(enableWaylandSupport, settings.flags.enableWaylandSupport);
   addInputListener(gpuRasterization, settings.flags.gpuRasterization);
   addInputListener(menuBar, settings.menuBar);
@@ -234,7 +273,13 @@ window.addEventListener("DOMContentLoaded", () => {
   addSelectListener(theme, settings.theme);
   addInputListener(trayIcon, settings.trayIcon);
   addInputListener(updateFrequency, settings.updateFrequency);
-  addInputListener(enableListenBrainz, settings.ListenBrainz.enabled);
+  addInputListener(
+    enableListenBrainz,
+    settings.ListenBrainz.enabled,
+    switchesWithSettings.listenBrainz
+  );
   addTextAreaListener(ListenBrainzAPI, settings.ListenBrainz.api);
   addTextAreaListener(ListenBrainzToken, settings.ListenBrainz.token);
+  addInputListener(discord_details_prefix, settings.discord.detailsPrefix);
+  addInputListener(discord_button_text, settings.discord.buttonText);
 });

src/pages/settings/settings.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="stylesheet" href="./settings.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 
 <body class="settings-window">
@@ -201,6 +202,9 @@
                 <span class="switch__slider"></span>
               </label>
             </div>
+          </div>
+          <div class="group">
+            <p class="group__title">Discord</p>
             <div class="group__option">
               <div class="group__description">
                 <h4>Discord RPC</h4>
@@ -211,6 +215,23 @@
                 <span class="switch__slider"></span>
               </label>
             </div>
+            <div id="discord_options">
+              <div class="group__option" class="hidden">
+                <div class="group__description">
+                  <h4>Details prefix</h4>
+                  <p>Prefix for the "details" field of Discord's rich presence.</p>
+                  <input id="discord_details_prefix" type="text" class="text-input" name="discord_details_prefix" />
+                </div>
+              </div>
+
+              <div class="group__option">
+                <div class="group__description">
+                  <h4>Button text</h4>
+                  <p>Text to display on the button below the song information.</p>
+                  <input id="discord_button_text" type="text" class="text-input" name="discord_button_text" />
+                </div>
+              </div>
+            </div>
           </div>
           <div class="group">
             <p class="group__title">ListenBrainz</p>
@@ -224,7 +245,7 @@
                 <span class="switch__slider"></span>
               </label>
             </div>
-            <div id="listenbrainz__options" hidden="true">
+            <div id="listenbrainz__options" class="hidden">
               <div class="group__option">
                 <div class="group__description">
                   <h4>ListenBrainz API Url</h4>
@@ -250,7 +271,7 @@
               <div class="group__description">
                 <h4>Update frequency</h4>
                 <p>
-                  The amount of time, in milliseconds, that tidal-hifi will refresh its playback info by scraping the
+                  The amount of time, in milliseconds, that TIDAL Hi-Fi will refresh its playback info by scraping the
                   website.
                   The default of 500 seems to work in more cases but if you are fine with a bit more resource usage you
                   can decrease it as well.
@@ -300,7 +321,7 @@
               <div class="group__description">
                 <h4>Wayland support</h4>
                 <p>
-                  Adds a couple of Electron flags to help Tidal-hifi run smoothly on the Wayland window system.
+                  Adds a couple of Electron flags to help TIDAL Hi-Fi run smoothly on the Wayland window system.
                 </p>
               </div>
               <label class="switch">
@@ -360,21 +381,24 @@
 
         <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">
+          <h4>TIDAL Hi-Fi</h4>
-            <a class="external-link" data-url="https://github.com/Mastermindzh/tidal-hifi">TIDAL Hi-Fi</a>
+          <div class="about-section__version">
-            is made by
+            <a href="">5.7.0</a>
-            <a class="external-link" data-url="https://www.rickvanlieshout.com">
+          </div>
-              Rick van Lieshout</a>. <br />It uses
+          <div class="about-section__links">
-            <a class="external-link" data-url="https://castlabs.com/">Castlabs'</a>
+            <a href="https://github.com/mastermindzh/tidal-hifi/" class="about-section__button">Github <i
-            version of Electron for widevine support.
+                class="fa fa-external-link"></i></a>
-          </p>
+            <a href="https://github.com/Mastermindzh/tidal-hifi/issues" class="about-section__button">Report an issue <i
+                class="fa fa-external-link"></i></a>
+            <a href="https://github.com/Mastermindzh/tidal-hifi/graphs/contributors"
+              class="about-section__button">Contributors <i class="fa fa-external-link"></i></a>
+          </div>
         </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:
+            <strong>Note</strong>: some settings may require a restart of TIDAL Hi-Fi.
           </p>
-          <button class="footer__button" id="restart">Restart TIDAL Hi-Fi</button>
         </footer>
       </div>
     </main>

src/pages/settings/settings.scss

@@ -8,6 +8,7 @@ $tidal-grey: #72777f;
 $tidal-grey-darker: #404248;
 $tidal-grey-darker-focus: #55585f;
 $tidal-grey-darkest: #242528;
+$tidal-grey-darkest-focus: #2e2f33;
 
 // --- Fonts ---
 
@@ -309,26 +310,75 @@ html {
 }
 
 .about-section {
-  padding-top: 120px;
+  padding-top: 40px;
   text-align: center;
 
   &__icon {
     display: inline-block;
-    width: 100px;
+    width: 200px;
   }
 
   &__text {
     display: block;
-    max-width: 350px;
+    max-width: 500px;
-    margin: 20px auto 0;
+    margin: -15px auto 0;
+  }
+  &__table {
+    width: 120px;
+    margin: 0 auto 0;
+
+    td {
+      text-align: left;
+    }
+  }
+  &__version {
+    margin: -10px 0px 30px 0px;
+    a {
+      background-color: $tidal-grey-darker;
+      border: none;
+      color: $tidal-blue;
+      padding: 8px 20px;
+      font-weight: bold;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      border-radius: 100px;
+    }
+  }
+
+  &__links {
+    width: 300px;
+    margin: 0 auto;
+    a {
+      border-radius: 10px;
+      border: none;
+      color: $white;
+      padding: 10px 10px 10px 20px;
+      margin: 8px;
+      text-align: left;
+      font-size: 16px;
+      line-height: 30px;
+      display: flex;
+      text-decoration: none;
+      justify-content: space-between;
+      background-color: $tidal-grey-darkest;
+
+      i {
+        color: $white;
+        line-height: 30px;
+        font-size: 18px;
+      }
+
+      &:hover {
+        background-color: $tidal-grey-darkest-focus;
+      }
+    }
+  }
 }
 
 // --- Footer ---
-}
-
 .footer {
   position: sticky;
-  top: calc(100% - 120px);
   height: 100px;
   padding-top: 20px;
   text-align: center;
@@ -443,3 +493,7 @@ html {
     }
   }
 }
+
+.hidden {
+  display: none !important;
+}

src/preload.ts

@@ -20,7 +20,7 @@ import { settingsStore } from "./scripts/settings";
 import { setTitle } from "./scripts/window-functions";
 
 const notificationPath = `${app.getPath("userData")}/notification.jpg`;
-const appName = "Tidal Hifi";
+const appName = "TIDAL Hi-Fi";
 let currentSong = "";
 let player: Player;
 let currentPlayStatus = MediaStatus.paused;
@@ -531,8 +531,8 @@ setInterval(function () {
 if (process.platform === "linux" && settingsStore.get(settings.mpris)) {
   try {
     player = Player({
-      name: "tidal-hifi",
+      name: "TIDAL Hi-Fi",
-      identity: "tidal-hifi",
+      identity: "TIDAL Hi-Fi",
       supportedUriSchemes: ["file"],
       supportedMimeTypes: [
         "audio/mpeg",
@@ -544,7 +544,6 @@ if (process.platform === "linux" && settingsStore.get(settings.mpris)) {
       supportedInterfaces: ["player"],
       desktopEntry: "tidal-hifi",
     });
-
     // Events
     const events = {
       next: "next",

src/scripts/discord.ts

@@ -1,8 +1,11 @@
 import { Client } from "discord-rpc";
 import { app, ipcMain } from "electron";
 import { globalEvents } from "../constants/globalEvents";
+import { settings } from "../constants/settings";
+import { Logger } from "../features/logger";
 import { MediaStatus } from "../models/mediaStatus";
 import { mediaInfo } from "./mediaInfo";
+import { settingsStore } from "./settings";
 
 const clientId = "833617820704440341";
 
@@ -15,7 +18,7 @@ function timeToSeconds(timeArray: string[]) {
 export let rpc: Client;
 
 const observer = () => {
-  if (mediaInfo.status == MediaStatus.paused && rpc) {
+  if (mediaInfo.status === MediaStatus.paused && rpc) {
     rpc.setActivity(idleStatus);
   } else if (rpc) {
     const currentSeconds = timeToSeconds(mediaInfo.current.split(":"));
@@ -23,17 +26,21 @@ const observer = () => {
     const date = new Date();
     const now = (date.getTime() / 1000) | 0;
     const remaining = date.setSeconds(date.getSeconds() + (durationSeconds - currentSeconds));
+    const detailsPrefix =
+      settingsStore.get<string, string>(settings.discord.detailsPrefix) ?? "Listening to ";
+    const buttonText =
+      settingsStore.get<string, string>(settings.discord.buttonText) ?? "Play on TIDAL";
     if (mediaInfo.url) {
       rpc.setActivity({
         ...idleStatus,
         ...{
-          details: `Listening to ${mediaInfo.title}`,
+          details: `${detailsPrefix}${mediaInfo.title}`,
           state: mediaInfo.artists ? mediaInfo.artists : "unknown artist(s)",
           startTimestamp: now,
           endTimestamp: remaining,
           largeImageKey: mediaInfo.image,
           largeImageText: mediaInfo.album ? mediaInfo.album : `${idleStatus.largeImageText}`,
-          buttons: [{ label: "Play on Tidal", url: mediaInfo.url }],
+          buttons: [{ label: buttonText, url: mediaInfo.url }],
         },
       });
     } else {
@@ -53,7 +60,7 @@ const observer = () => {
 const idleStatus = {
   details: `Browsing Tidal`,
   largeImageKey: "tidal-hifi-icon",
-  largeImageText: `Tidal HiFi ${app.getVersion()}`,
+  largeImageText: `TIDAL Hi-Fi ${app.getVersion()}`,
   instance: false,
 };
 
@@ -70,7 +77,7 @@ export const initRPC = () => {
       ipcMain.on(globalEvents.updateInfo, observer);
     },
     () => {
-      console.error("Can't connect to Discord, is it running?");
+      Logger.log("Can't connect to Discord, is it running?");
     }
   );
 };

src/scripts/express.ts

@@ -8,7 +8,7 @@ import { mediaInfo } from "./mediaInfo";
 import { settingsStore } from "./settings";
 
 /**
- * Function to enable tidal-hifi's express api
+ * Function to enable TIDAL Hi-Fi's express api
  */
 
 // expressModule.run = function (mainWindow)

src/scripts/menu.ts

@@ -33,7 +33,6 @@ export const getMenu = function (mainWindow: BrowserWindow) {
           {
             label: name,
             submenu: [
-              { role: "about" },
               settingsMenuEntry,
               { type: "separator" },
               { role: "services" },
@@ -101,12 +100,6 @@ export const getMenu = function (mainWindow: BrowserWindow) {
       ],
     },
     settingsMenuEntry,
-    {
-      label: "About",
-      click() {
-        showSettingsWindow("about");
-      },
-    },
     toggleWindow,
     quitMenuEntry,
   ];

src/scripts/settings.ts

@@ -1,8 +1,8 @@
 import Store from "electron-store";
 
-import { settings } from "../constants/settings";
-import path from "path";
 import { BrowserWindow } from "electron";
+import path from "path";
+import { settings } from "../constants/settings";
 
 let settingsWindow: BrowserWindow;
 
@@ -18,6 +18,10 @@ export const settingsStore = new Store({
     disableHardwareMediaKeys: false,
     enableCustomHotkeys: false,
     enableDiscord: false,
+    discord: {
+      detailsPrefix: "Listening to ",
+      buttonText: "Play on Tidal",
+    },
     ListenBrainz: {
       enabled: false,
       api: "https://api.listenbrainz.org",
@@ -59,8 +63,8 @@ const settingsModule = {
 
 export const createSettingsWindow = function () {
   settingsWindow = new BrowserWindow({
-    width: 700,
+    width: 650,
-    height: 600,
+    height: 700,
     resizable: true,
     show: false,
     transparent: true,