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

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.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]
 

package-lock.json

@@ -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",
-      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.11.2.tgz",
-      "integrity": "sha512-hLuR+wtvrVrVFHku5cud44cPXQf5ke+96TonRaGzlNSt22rh2LH65avLYFNsc+QpzMuOEQG/IxJT5mEop99rvg=="
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.12.0.tgz",
+      "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"

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/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);
   }
@@ -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") {
-        source.checked
-          ? document.getElementById("listenbrainz__options").removeAttribute("hidden")
-          : document.getElementById("listenbrainz__options").setAttribute("hidden", "true");
+
+      if (toggleOptions) {
+        if (source.value === "on" && source.id === toggleOptions.switch) {
+          setElementHidden(source.checked, toggleOptions);
+        }
       }
       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>
@@ -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">
-            <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>
+          <h4>TIDAL Hi-Fi</h4>
+          <div class="about-section__version">
+            <a href="">5.7.0</a>
+          </div>
+          <div class="about-section__links">
+            <a href="https://github.com/mastermindzh/tidal-hifi/" class="about-section__button">Github <i
+                class="fa fa-external-link"></i></a>
+            <a href="https://github.com/Mastermindzh/tidal-hifi/issues" class="about-section__button">Report an issue <i
+                class="fa fa-external-link"></i></a>
+            <a href="https://github.com/Mastermindzh/tidal-hifi/graphs/contributors"
+              class="about-section__button">Contributors <i class="fa fa-external-link"></i></a>
+          </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;
-    margin: 20px auto 0;
+    max-width: 500px;
+    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;
+    }
   }
 
-  // --- Footer ---
+  &__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/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 {
@@ -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/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,
-    height: 600,
+    width: 650,
+    height: 700,
     resizable: true,
     show: false,
     transparent: true,