Merge e37b2f99cc into 1afd4d22a6

[Snyk] Upgrade hotkeys-js from 3.13.3 to 3.13.5

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tidal-hifi",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tidal-hifi",
-      "version": "5.7.1",
+      "version": "5.8.0",
       "license": "MIT",
       "dependencies": {
         "@electron/remote": "^2.1.1",
@@ -14,7 +14,7 @@
         "discord-rpc": "^4.0.1",
         "electron-store": "^8.1.0",
         "express": "^4.18.2",
-        "hotkeys-js": "^3.13.3",
+        "hotkeys-js": "^3.13.5",
         "mpris-service": "^2.1.2",
         "request": "^2.88.2",
         "sass": "^1.69.7"
@@ -4415,9 +4415,9 @@
       }
     },
     "node_modules/hotkeys-js": {
-      "version": "3.13.3",
-      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.13.3.tgz",
-      "integrity": "sha512-IEiMBNRJZMhWyNDsvww8LYC8vZYyj2/w2GgXPg0ljq/K3SYvOJH6NRMqzF7z2Fwaq2AzKSvmvECREzFleKSeow==",
+      "version": "3.13.5",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.13.5.tgz",
+      "integrity": "sha512-xqPBCCC9QtLUpNZhlncfPhY/KMMiiA5+YsLDCTbwDfVBvCM+IQJPZwqB8iURZI9GQYcsmqpSlARZ238puVEs3Q==",
       "funding": {
         "url": "https://jaywcjlove.github.io/#/sponsor"
       }

package.json

@@ -44,7 +44,7 @@
     "discord-rpc": "^4.0.1",
     "electron-store": "^8.1.0",
     "express": "^4.18.2",
-    "hotkeys-js": "^3.13.3",
+    "hotkeys-js": "^3.13.5",
     "mpris-service": "^2.1.2",
     "request": "^2.88.2",
     "sass": "^1.69.7"

src/constants/settings.ts

@@ -24,6 +24,9 @@ export const settings = {
     detailsPrefix: "discord.detailsPrefix",
     buttonText: "discord.buttonText",
     includeTimestamps: "discord.includeTimestamps",
+    showSong: "discord.showSong",
+    idleText: "discord.idleText",
+    listeningText: "discord.listeningText",
   },
   ListenBrainz: {
     root: "ListenBrainz",

src/pages/settings/preload.ts

@@ -20,6 +20,11 @@ const switchesWithSettings = {
     classToHide: "discord_options",
     settingsKey: settings.enableDiscord,
   },
+  discord_show_song: {
+    switch: "discord_show_song",
+    classToHide: "discord_show_song_options",
+    settingsKey: settings.discord.showSong,
+  }
 };
 
 let adBlock: HTMLInputElement,
@@ -49,7 +54,10 @@ let adBlock: HTMLInputElement,
   enableWaylandSupport: HTMLInputElement,
   discord_details_prefix: HTMLInputElement,
   discord_include_timestamps: HTMLInputElement,
-  discord_button_text: HTMLInputElement;
+  discord_button_text: HTMLInputElement,
+  discord_show_song: HTMLInputElement,
+  discord_idle_text: HTMLInputElement,
+  discord_listening_text: HTMLInputElement;
 
 addCustomCss(app);
 
@@ -138,6 +146,9 @@ function refreshSettings() {
     discord_details_prefix.value = settingsStore.get(settings.discord.detailsPrefix);
     discord_include_timestamps.checked = settingsStore.get(settings.discord.includeTimestamps);
     discord_button_text.value = settingsStore.get(settings.discord.buttonText);
+    discord_show_song.checked = settingsStore.get(settings.discord.showSong);
+    discord_idle_text.value = settingsStore.get(settings.discord.idleText);
+    discord_listening_text.value = settingsStore.get(settings.discord.listeningText);
 
     // set state of all switches with additional settings
     Object.values(switchesWithSettings).forEach((settingSwitch) => {
@@ -251,6 +262,9 @@ window.addEventListener("DOMContentLoaded", () => {
   discord_include_timestamps = get("discord_include_timestamps");
   listenbrainz_delay = get("listenbrainz_delay");
   discord_button_text = get("discord_button_text");
+  discord_show_song = get("discord_show_song");
+  discord_listening_text = get("discord_listening_text");
+  discord_idle_text = get("discord_idle_text")
 
   refreshSettings();
   addInputListener(adBlock, settings.adBlock);
@@ -285,4 +299,7 @@ window.addEventListener("DOMContentLoaded", () => {
   addInputListener(discord_details_prefix, settings.discord.detailsPrefix);
   addInputListener(discord_include_timestamps, settings.discord.includeTimestamps);
   addInputListener(discord_button_text, settings.discord.buttonText);
+  addInputListener(discord_show_song, settings.discord.showSong, switchesWithSettings.discord_show_song);
+  addInputListener(discord_idle_text, settings.discord.idleText);
+  addInputListener(discord_listening_text, settings.discord.listeningText);
 });

src/pages/settings/settings.html

@@ -216,32 +216,64 @@
               </label>
             </div>
             <div id="discord_options">
+
               <div class="group__option" class="hidden">
                 <div class="group__description">
-                  <h4>Include timestamps</h4>
-                  <p>Show current/end playtime in the Discord client</p>
+                  <h4>Idle Text</h4>
+                  <p>The text displayed on Discord's rich presence while idling in the app.</p>
+                  <input id="discord_idle_text" type="text" class="text-input" name="discord_idle_text" />
+                </div>
+              </div>
+
+              <div class="group__option" class="hidden">
+                <div class="group__description">
+                  <h4>Listening Text</h4>
+                  <p>The text displayed on Discord's rich presence while listening to a song.</p>
+                  <input id="discord_listening_text" type="text" class="text-input" name="discord_listening_text" />
+                </div>
+              </div>
+
+              <div class="group__option" class="hidden">
+                <div class="group__description">
+                  <h4>Show song</h4>
+                  <p>Show the current song in the Discord client</p>
                 </div>
                 <label class="switch">
-                  <input id="discord_include_timestamps" type="checkbox" />
+                  <input id="discord_show_song" type="checkbox" />
                   <span class="switch__slider"></span>
                 </label>
               </div>
 
-              <div class="group__option" class="hidden">
-                <div class="group__description">
-                  <h4>Details prefix</h4>
-                  <p>Prefix for the "details" field of Discord's rich presence.</p>
-                  <input id="discord_details_prefix" type="text" class="text-input" name="discord_details_prefix" />
+              <div id="discord_show_song_options" class="hidden">
+
+                <div class="group__option" class="hidden">
+                  <div class="group__description">
+                    <h4>Include timestamps</h4>
+                    <p>Show current/end playtime in the Discord client</p>
+                  </div>
+                  <label class="switch">
+                    <input id="discord_include_timestamps" type="checkbox" />
+                    <span class="switch__slider"></span>
+                  </label>
+                </div>
+
+                <div class="group__option" class="hidden">
+                  <div class="group__description">
+                    <h4>Details prefix</h4>
+                    <p>Prefix for the "details" field of Discord's rich presence.</p>
+                    <input id="discord_details_prefix" type="text" class="text-input" name="discord_details_prefix" />
+                  </div>
+                </div>
+
+                <div class="group__option">
+                  <div class="group__description">
+                    <h4>Button text</h4>
+                    <p>Text to display on the button below the song information.</p>
+                    <input id="discord_button_text" type="text" class="text-input" name="discord_button_text" />
+                  </div>
                 </div>
               </div>
 
-              <div 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">
@@ -422,4 +454,4 @@
   </div>
 </body>
 
-</html>
+</html>

src/scripts/discord.ts

@@ -1,4 +1,4 @@
-import { Client } from "discord-rpc";
+import { Client, Presence } from "discord-rpc";
 import { app, ipcMain } from "electron";
 import { globalEvents } from "../constants/globalEvents";
 import { settings } from "../constants/settings";
@@ -18,58 +18,54 @@ function timeToSeconds(timeArray: string[]) {
 export let rpc: Client;
 
 const observer = () => {
-  if (mediaInfo.status === MediaStatus.paused && rpc) {
-    rpc.setActivity(idleStatus);
-  } else if (rpc) {
-    const currentSeconds = timeToSeconds(mediaInfo.current.split(":"));
-    const durationSeconds = timeToSeconds(mediaInfo.duration.split(":"));
-    const date = new Date();
-    const now = (date.getTime() / 1000) | 0;
-    const remaining = date.setSeconds(date.getSeconds() + (durationSeconds - currentSeconds));
-    const detailsPrefix =
-      settingsStore.get<string, string>(settings.discord.detailsPrefix) ?? "Listening to ";
-    const buttonText =
-      settingsStore.get<string, string>(settings.discord.buttonText) ?? "Play on TIDAL";
-    const includeTimestamps =
-      settingsStore.get<string, boolean>(settings.discord.includeTimestamps) ?? true;
-
-    let activity = {
-      ...idleStatus,
-      ...{
-        startTimestamp: includeTimestamps ? now : undefined,
-        endTimestamp: includeTimestamps ? remaining : undefined,
-      },
-    };
-    if (mediaInfo.url) {
-      activity = {
-        ...activity,
-        ...{
-          details: `${detailsPrefix}${mediaInfo.title}`,
-          state: mediaInfo.artists ? mediaInfo.artists : "unknown artist(s)",
-          largeImageKey: mediaInfo.image,
-          largeImageText: mediaInfo.album ? mediaInfo.album : `${idleStatus.largeImageText}`,
-          buttons: [{ label: buttonText, url: mediaInfo.url }],
-        },
-      };
-    } else {
-      activity = {
-        ...activity,
-        ...{
-          details: `Watching ${mediaInfo.title}`,
-          state: mediaInfo.artists,
-        },
-      };
-    }
-
-    rpc.setActivity(activity);
+  if (rpc) {
+    rpc.setActivity(getActivity());
   }
 };
+const getActivity = (): Presence | undefined => {
+  const presence: Presence | undefined = {
+    largeImageKey: "tidal-hifi-icon",
+    largeImageText: `TIDAL Hi-Fi ${app.getVersion()}`,
+    instance: false,
+  };
+  if (mediaInfo.status === MediaStatus.paused) {
+    presence.details = settingsStore.get<string, string>(settings.discord.idleText) ?? "Browsing Tidal";
+  } else {
+    const showSong = settingsStore.get<string, boolean>(settings.discord.showSong) ?? false;
+    if (showSong) {
+      const includeTimestamps =
+        settingsStore.get<string, boolean>(settings.discord.includeTimestamps) ?? true;
 
-const idleStatus = {
-  details: `Browsing Tidal`,
-  largeImageKey: "tidal-hifi-icon",
-  largeImageText: `TIDAL Hi-Fi ${app.getVersion()}`,
-  instance: false,
+      if (includeTimestamps) {
+        const currentSeconds = timeToSeconds(mediaInfo.current.split(":"));
+        const durationSeconds = timeToSeconds(mediaInfo.duration.split(":"));
+        const date = new Date();
+        const now = (date.getTime() / 1000) | 0;
+        const remaining = date.setSeconds(date.getSeconds() + (durationSeconds - currentSeconds));
+        presence.startTimestamp = now;
+        presence.endTimestamp = remaining;
+      }
+
+      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) {
+        presence.details = `${detailsPrefix}${mediaInfo.title}`;
+        presence.state = mediaInfo.artists ? mediaInfo.artists : "unknown artist(s)";
+        presence.largeImageKey = mediaInfo.image;
+        if (mediaInfo.album) {
+          presence.largeImageText = mediaInfo.album;
+        }
+        presence.buttons = [{ label: buttonText, url: mediaInfo.url }];
+      } else {
+        presence.details = `Watching ${mediaInfo.title}`;
+        presence.state = mediaInfo.artists;
+      }
+    } else {
+      presence.details = settingsStore.get<string, string>(settings.discord.listeningText) ?? "Listening Tidal";
+    }
+  }
+  return presence;
 };
 
 /**
@@ -80,7 +76,7 @@ export const initRPC = () => {
   rpc.login({ clientId }).then(
     () => {
       rpc.on("ready", () => {
-        rpc.setActivity(idleStatus);
+        rpc.setActivity(getActivity());
       });
       ipcMain.on(globalEvents.updateInfo, observer);
     },

src/scripts/settings.ts

@@ -19,6 +19,9 @@ export const settingsStore = new Store({
     enableCustomHotkeys: false,
     enableDiscord: false,
     discord: {
+      showSong: false,
+      idleText: "Browsing Tidal",
+      listeningText: "Listening Tidal",
       detailsPrefix: "Listening to ",
       buttonText: "Play on Tidal",
       includeTimestamps: true,