Revert "Removed redundant RPC settings"

src/constants/settings.ts

@@ -27,7 +27,10 @@ export const settings = {
   enableDiscord: "enableDiscord",
   discord: {
     detailsPrefix: "discord.detailsPrefix",
+    buttonText: "discord.buttonText",
     includeTimestamps: "discord.includeTimestamps",
+    showSong: "discord.showSong",
+    showIdle: "discord.showIdle",
     idleText: "discord.idleText",
     usingText: "discord.usingText",
   },

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,13 @@ let adBlock: HTMLInputElement,
   ListenBrainzToken: HTMLInputElement,
   listenbrainz_delay: HTMLInputElement,
   enableWaylandSupport: HTMLInputElement,
-  discord_details_prefix: HTMLInputElement
+  discord_details_prefix: HTMLInputElement,
+  discord_include_timestamps: HTMLInputElement,
+  discord_button_text: HTMLInputElement,
+  discord_show_song: HTMLInputElement,
+  discord_show_idle: HTMLInputElement,
+  discord_idle_text: HTMLInputElement,
+  discord_using_text: HTMLInputElement;
 
 addCustomCss(app);
 
@@ -138,6 +149,12 @@ function refreshSettings() {
     ListenBrainzToken.value = settingsStore.get(settings.ListenBrainz.token);
     listenbrainz_delay.value = settingsStore.get(settings.ListenBrainz.delay);
     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_show_idle.checked = settingsStore.get(settings.discord.showIdle);
+    discord_idle_text.value = settingsStore.get(settings.discord.idleText);
+    discord_using_text.value = settingsStore.get(settings.discord.usingText);
 
     // set state of all switches with additional settings
     Object.values(switchesWithSettings).forEach((settingSwitch) => {
@@ -250,7 +267,13 @@ window.addEventListener("DOMContentLoaded", () => {
   ListenBrainzAPI = get("ListenBrainzAPI");
   ListenBrainzToken = get("ListenBrainzToken");
   discord_details_prefix = get("discord_details_prefix");
+  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_show_idle = get("discord_show_idle");
+  discord_using_text = get("discord_using_text");
+  discord_idle_text = get("discord_idle_text");
 
   refreshSettings();
   addInputListener(adBlock, settings.adBlock);
@@ -285,4 +308,14 @@ window.addEventListener("DOMContentLoaded", () => {
   addInputListener(ListenBrainzToken, settings.ListenBrainz.token);
   addInputListener(listenbrainz_delay, settings.ListenBrainz.delay);
   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_show_idle, settings.discord.showIdle);
+  addInputListener(discord_idle_text, settings.discord.idleText);
+  addInputListener(discord_using_text, settings.discord.usingText);
 });

src/pages/settings/settings.html

@@ -226,6 +226,58 @@
               </label>
             </div>
             <div id="discord_options">
+
+              <div class="group__option" class="hidden">
+                <div class="group__description">
+                  <h4>Show Idle Text</h4>
+                  <p>Should the idle text be shown when idle?</p>
+                </div>
+                <label class="switch">
+                  <input id="discord_show_idle" type="checkbox" />
+                  <span class="switch__slider"></span>
+                </label>
+              </div>
+
+              <div class="group__option" class="hidden">
+                <div class="group__description">
+                  <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>Using Tidal Text</h4>
+                  <p>The text displayed on Discord's rich presence while "showSong" is turned off</p>
+                  <input id="discord_using_text" type="text" class="text-input" name="discord_using_text" />
+                </div>
+              </div>
+
+              <div class="group__option" class="hidden">
+                <div class="group__description">
+                  <h4>Show media</h4>
+                  <p>Show the current media in the Discord client</p>
+                </div>
+                <label class="switch">
+                  <input id="discord_show_song" type="checkbox" />
+                  <span class="switch__slider"></span>
+                </label>
+              </div>
+
+              <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>
@@ -233,6 +285,16 @@
                     <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 media information.</p>
+                    <input id="discord_button_text" type="text" class="text-input" name="discord_button_text" />
+                  </div>
+                </div>
+              </div>
+
             </div>
           </div>
           <div class="group">

src/scripts/discord.ts

@@ -23,14 +23,15 @@ const observer = () => {
 };
 
 const defaultPresence = {
-  smallImageKey: "tidal-hifi-icon",
+  largeImageKey: "tidal-hifi-icon",
-  smallImageText: `TIDAL Hi-Fi ${app.getVersion()}`,
+  largeImageText: `TIDAL Hi-Fi ${app.getVersion()}`,
   instance: false,
   type: ACTIVITY_LISTENING
 };
 
 const updateActivity = () => {
-  if (mediaInfo.status === MediaStatus.paused) {
+  const showIdle = settingsStore.get<string, boolean>(settings.discord.showIdle) ?? true;
+  if (mediaInfo.status === MediaStatus.paused && !showIdle) {
     rpc.user?.clearActivity();
   } else {
     rpc.user?.setActivity(getActivity());
@@ -40,11 +41,34 @@ const updateActivity = () => {
 const getActivity = (): SetActivity => {
   const presence: SetActivity = { ...defaultPresence };
 
-  includeTimeStamps();
+  if (mediaInfo.status === MediaStatus.paused) {
-  setPresenceFromMediaInfo();
+    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, detailsPrefix, buttonText } = getFromStore();
+      includeTimeStamps(includeTimestamps);
+      setPresenceFromMediaInfo(detailsPrefix, buttonText);
+    } else {
+      presence.details =
+        settingsStore.get<string, string>(settings.discord.usingText) ?? "Playing media on TIDAL";
+    }
+  }
 
   return presence;
 
+  function getFromStore() {
+    const includeTimestamps =
+      settingsStore.get<string, boolean>(settings.discord.includeTimestamps) ?? true;
+    const detailsPrefix =
+      settingsStore.get<string, string>(settings.discord.detailsPrefix) ?? "Listening to ";
+    const buttonText =
+      settingsStore.get<string, string>(settings.discord.buttonText) ?? "Play on TIDAL";
+
+    return { includeTimestamps, detailsPrefix, buttonText };
+  }
+
   /**
    * Pad a string using spaces to at least 2 characters
    * @param input string to pad with 2 characters
@@ -54,22 +78,29 @@ const getActivity = (): SetActivity => {
     return input.padEnd(2, " ");
   }
 
-  function setPresenceFromMediaInfo() {
+  function setPresenceFromMediaInfo(detailsPrefix: string, buttonText: string) {
     // discord requires a minimum of 2 characters
     const title = pad(mediaInfo.title);
     const album = pad(mediaInfo.album);
     const artists = pad(mediaInfo.artists);
 
-    const detailsPrefix = settingsStore.get<string, string>(settings.discord.detailsPrefix) ?? "Listening to ";
+    if (mediaInfo.url) {
       presence.details = `${detailsPrefix}${title}`;
       presence.state = artists ? artists : "unknown artist(s)";
-    if (mediaInfo.url) {
       presence.largeImageKey = mediaInfo.image;
-      if (album) presence.largeImageText = album;
+      if (album) {
+        presence.largeImageText = album;
+      }
+
+      presence.buttons = [{ label: buttonText, url: mediaInfo.url }];
+    } else {
+      presence.details = `Watching ${title}`;
+      presence.state = artists;
     }
   }
 
-  function includeTimeStamps() {
+  function includeTimeStamps(includeTimestamps: boolean) {
+    if (includeTimestamps) {
       const currentSeconds = convertDurationToSeconds(mediaInfo.current);
       const durationSeconds = convertDurationToSeconds(mediaInfo.duration);
       const date = new Date();
@@ -77,6 +108,7 @@ const getActivity = (): SetActivity => {
       presence.startTimestamp = now - currentSeconds;
       presence.endTimestamp = presence.startTimestamp + durationSeconds;
     }
+  }
 };
 
 /**

src/scripts/settings.ts

@@ -42,10 +42,13 @@ export const settingsStore = new Store({
     enableCustomHotkeys: false,
     enableDiscord: false,
     discord: {
+      showSong: true,
+      showIdle: true,
       idleText: "Browsing Tidal",
       usingText: "Playing media on TIDAL",
       includeTimestamps: true,
       detailsPrefix: "Listening to ",
+      buttonText: "Play on Tidal",
     },
     ListenBrainz: {
       enabled: false,
@@ -86,8 +89,16 @@ export const settingsStore = new Store({
         migrationStore.get(settings.ListenBrainz.delay) ?? 5000
       );
     },
+    "5.8.0": (migrationStore) => {
+      console.log("running migrations for 5.8.0");
+      migrationStore.set(
+        settings.discord.includeTimestamps,
+        migrationStore.get(settings.discord.includeTimestamps) ?? true
+      );
+    },
     "5.9.0": (migrationStore) => {
       buildMigration("5.9.0", migrationStore, [
+        { key: settings.discord.showSong, value: "true" },
         { key: settings.discord.idleText, value: "Browsing Tidal" },
         {
           key: settings.discord.usingText,
@@ -104,7 +115,10 @@ export const settingsStore = new Store({
       buildMigration("5.15.0", migrationStore, [
         { key: settings.advanced.tidalUrl, value: "https://listen.tidal.com" },
       ]);
-    }
+    },
+    "5.16.0": (migrationStore) => {
+      buildMigration("5.16.0", migrationStore, [{ key: settings.discord.showIdle, value: "true" }]);
+    },
   },
 });