feat: Added a channel selector so we can now use Tidal's staging environment directly from the app

CHANGELOG.md

@@ -10,6 +10,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated most dependency versions
   - This includes Electron 31!
 
+- Added a channel selector so we can now use Tidal's staging environment directly from the app
+  - implements [#437](https://github.com/Mastermindzh/tidal-hifi/issues/437)
+
 ## [5.14.1]
 
 - Fixed `getAlbumName` not finding album name whilst on queue page

src/constants/settings.ts

@@ -10,6 +10,10 @@
  */
 export const settings = {
   adBlock: "adBlock",
+  advanced: {
+    root: "advanced",
+    tidalUrl: "advanced.tidalUrl",
+  },
   api: "api",
   apiSettings: {
     root: "apiSettings",

src/features/listenbrainz/listenbrainz.ts

@@ -48,6 +48,9 @@ export class ListenBrainz {
       } else {
         // Fetches the oldData required for scrobbling and proceeds to construct a playing_now data payload for the Playing Now area
         const oldData = ListenBrainzStore.get(ListenBrainzConstants.oldData) as StoreData;
+        const tidalUrl =
+          settingsStore.get<string, string>(settings.advanced.tidalUrl) ||
+          "https://listen.tidal.com";
         const playing_data = {
           listen_type: "playing_now",
           payload: [
@@ -95,7 +98,7 @@ export class ListenBrainz {
                     additional_info: {
                       media_player: "Tidal Hi-Fi",
                       submission_client: "Tidal Hi-Fi",
-                      music_service: "listen.tidal.com",
+                      music_service: tidalUrl,
                       duration: oldData.duration,
                     },
                     artist_name: oldData.artists,

src/main.ts

@@ -24,7 +24,6 @@ import {
   showSettingsWindow,
 } from "./scripts/settings";
 import { addTray, refreshTray } from "./scripts/tray";
-const tidalUrl = "https://listen.tidal.com";
 let mainInhibitorId = -1;
 
 initialize();
@@ -40,6 +39,9 @@ const windowPreferences = {
 setDefaultFlags(app);
 setManagedFlagsFromSettings(app);
 
+const tidalUrl =
+  settingsStore.get<string, string>(settings.advanced.tidalUrl) || "https://listen.tidal.com";
+
 /**
  * Update the menuBarVisibility according to the store value
  *

src/pages/settings/preload.ts

@@ -29,6 +29,7 @@ const switchesWithSettings = {
 
 let adBlock: HTMLInputElement,
   api: HTMLInputElement,
+  channel: HTMLSelectElement,
   customCSS: HTMLInputElement,
   disableBackgroundThrottle: HTMLInputElement,
   disableHardwareMediaKeys: HTMLInputElement,
@@ -121,6 +122,7 @@ function refreshSettings() {
   try {
     adBlock.checked = settingsStore.get(settings.adBlock);
     api.checked = settingsStore.get(settings.api);
+    channel.value = settingsStore.get(settings.advanced.tidalUrl);
     customCSS.value = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
     disableBackgroundThrottle.checked = settingsStore.get(settings.disableBackgroundThrottle);
     disableHardwareMediaKeys.checked = settingsStore.get(settings.flags.disableHardwareMediaKeys);
@@ -238,6 +240,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
   adBlock = get("adBlock");
   api = get("apiCheckbox");
+  channel = get<HTMLSelectElement>("channel");
   customCSS = get("customCSS");
   disableBackgroundThrottle = get("disableBackgroundThrottle");
   disableHardwareMediaKeys = get("disableHardwareMediaKeys");
@@ -272,6 +275,7 @@ window.addEventListener("DOMContentLoaded", () => {
   refreshSettings();
   addInputListener(adBlock, settings.adBlock);
   addInputListener(api, settings.api);
+  addSelectListener(channel, settings.advanced.tidalUrl);
   addTextAreaListener(customCSS, settings.customCSS);
   addInputListener(disableBackgroundThrottle, settings.disableBackgroundThrottle);
   addInputListener(disableHardwareMediaKeys, settings.flags.disableHardwareMediaKeys);

src/pages/settings/settings.html

@@ -338,6 +338,20 @@
                 <input id="updateFrequency" type="number" class="text-input" name="updateFrequency" />
               </div>
             </div>
+
+            <div class="group__option">
+              <div class="group__description">
+                <h4>Tidal channel / URL</h4>
+                <p>
+                  Which URL Tidal Hi-Fi should use.
+                  <strong>note! Beta might break at any time</strong>
+                </p>
+                <select class="select-input" id="channel" name="channel">
+                  <option value="https://listen.tidal.com">Stable (listen.tidal.com)</option>
+                  <option value="https://listen.stage.tidal.com">Staging (listen.stage.tidal.com)</option>
+                </select>
+              </div>
+            </div>
           </div>
           <div class="group">
             <p class="group__title">Flags</p>

src/scripts/settings.ts

@@ -28,6 +28,9 @@ const buildMigration = (
 export const settingsStore = new Store({
   defaults: {
     adBlock: false,
+    advanced: {
+      tidalUrl: "https://listen.tidal.com",
+    },
     api: true,
     apiSettings: {
       port: 47836,
@@ -107,6 +110,11 @@ export const settingsStore = new Store({
         { key: settings.apiSettings.hostname, value: "127.0.0.1" },
       ]);
     },
+    "5.15.0": (migrationStore) => {
+      buildMigration("5.15.0", migrationStore, [
+        { key: settings.advanced.tidalUrl, value: "https://listen.tidal.com" },
+      ]);
+    },
   },
 });