Added discord options: showSong, idleText, listeningText

showSong (boolean): If enabled, the client will show the current song on discord.

idleText (string): This text is shown if no song is playing.

listeningText (string): This text is shown if a song is playing, but showSong is set to false.

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

@@ -229,19 +229,50 @@
 
               <div class="group__option" class="hidden">
                 <div class="group__description">
-                  <h4>Details prefix</h4>
+                  <h4>Show song</h4>
-                  <p>Prefix for the "details" field of Discord's rich presence.</p>
+                  <p>Show the current song in the Discord client</p>
-                  <input id="discord_details_prefix" type="text" class="text-input" name="discord_details_prefix" />
+                </div>
+                <label class="switch">
+                  <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>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">
+              <div class="group__option" class="hidden">
                 <div class="group__description">
-                  <h4>Button text</h4>
+                  <h4>Listening Text</h4>
-                  <p>Text to display on the button below the song information.</p>
+                  <p>The text displayed on Discord's rich presence while listening to a song.</p>
-                  <input id="discord_button_text" type="text" class="text-input" name="discord_button_text" />
+                  <input id="discord_listening_text" type="text" class="text-input" name="discord_listening_text" />
                 </div>
               </div>
+
+              <div id="discord_show_song_options" class="hidden">
+
+                <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>
           <div class="group">
@@ -422,4 +453,4 @@
   </div>
 </body>
 
-</html>
+</html>

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,