feat: API now allows you to set the so you can control who can interact with the API.

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Simplified `MediaInfo` & `Options` types
 - Added `playingFrom` information to the info API
   - also changed the way we update Album info since Playing From now shows the correct Album.
+- API now allows you to set the `hostname` so you can control who can interact with the API.
 
 ## [5.13.1]
 

README.md

@@ -50,6 +50,7 @@ The web version of [listen.tidal.com](https://listen.tidal.com) running in elect
   - [ListenBrainz](https://listenbrainz.org/?redirect=false) integration
   - Songwhip.com integration (hotkey `ctrl + w`)
   - Discord RPC integration (showing "now listening", "Browsing", etc)
+    - Flatpak version only works if both Discord and Tidal-HiFi are flatpaks
   - MPRIS integration
 - UI + Json config (`~/.config/tidal-hifi/`, or `~/.var/app/com.mastermindzh.tidal-hifi/` for Flatpak)
 

src/constants/settings.ts

@@ -14,6 +14,7 @@ export const settings = {
   apiSettings: {
     root: "apiSettings",
     port: "apiSettings.port",
+    hostname: "apiSettings.hostname",
   },
   customCSS: "customCSS",
   disableBackgroundThrottle: "disableBackgroundThrottle",

src/features/api/index.ts

@@ -1,7 +1,6 @@
+import cors from "cors";
 import { BrowserWindow, dialog } from "electron";
 import express from "express";
-import swaggerSpec from "./swagger.json";
-import cors from "cors";
 import swaggerUi from "swagger-ui-express";
 import { settingsStore } from "../../scripts/settings";
 import { settings } from "./../../constants/settings";
@@ -9,12 +8,14 @@ import { addCurrentInfo } from "./features/current";
 import { addPlaybackControl } from "./features/player";
 import { addSettingsAPI } from "./features/settings/settings";
 import { addLegacyApi } from "./legacy";
+import swaggerSpec from "./swagger.json";
 
 /**
  * Function to enable TIDAL Hi-Fi's express api
  */
 export const startApi = (mainWindow: BrowserWindow) => {
   const port = settingsStore.get<string, number>(settings.apiSettings.port);
+  const hostname = settingsStore.get<string, string>(settings.apiSettings.hostname) ?? "127.0.0.1";
 
   const expressApp = express();
   expressApp.use(cors());
@@ -29,7 +30,7 @@ export const startApi = (mainWindow: BrowserWindow) => {
   addCurrentInfo(expressApp);
   addSettingsAPI(expressApp, mainWindow);
 
-  const expressInstance = expressApp.listen(port, "127.0.0.1");
+  const expressInstance = expressApp.listen(port, hostname);
   expressInstance.on("error", function (e: { code: string }) {
     let message = e.code;
     if (e.code === "EADDRINUSE") {

src/pages/settings/preload.ts

@@ -24,7 +24,7 @@ const switchesWithSettings = {
     switch: "discord_show_song",
     classToHide: "discord_show_song_options",
     settingsKey: settings.discord.showSong,
-  }
+  },
 };
 
 let adBlock: HTMLInputElement,
@@ -35,6 +35,7 @@ let adBlock: HTMLInputElement,
   enableCustomHotkeys: HTMLInputElement,
   enableDiscord: HTMLInputElement,
   gpuRasterization: HTMLInputElement,
+  hostname: HTMLInputElement,
   menuBar: HTMLInputElement,
   minimizeOnClose: HTMLInputElement,
   mpris: HTMLInputElement,
@@ -127,6 +128,7 @@ function refreshSettings() {
     enableDiscord.checked = settingsStore.get(settings.enableDiscord);
     enableWaylandSupport.checked = settingsStore.get(settings.flags.enableWaylandSupport);
     gpuRasterization.checked = settingsStore.get(settings.flags.gpuRasterization);
+    hostname.value = settingsStore.get(settings.apiSettings.hostname);
     menuBar.checked = settingsStore.get(settings.menuBar);
     minimizeOnClose.checked = settingsStore.get(settings.minimizeOnClose);
     mpris.checked = settingsStore.get(settings.mpris);
@@ -243,6 +245,7 @@ window.addEventListener("DOMContentLoaded", () => {
   enableDiscord = get("enableDiscord");
   enableWaylandSupport = get("enableWaylandSupport");
   gpuRasterization = get("gpuRasterization");
+  hostname = get("hostname");
   menuBar = get("menuBar");
   minimizeOnClose = get("minimizeOnClose");
   mpris = get("mprisCheckbox");
@@ -264,7 +267,7 @@ window.addEventListener("DOMContentLoaded", () => {
   discord_button_text = get("discord_button_text");
   discord_show_song = get("discord_show_song");
   discord_using_text = get("discord_using_text");
-  discord_idle_text = get("discord_idle_text")
+  discord_idle_text = get("discord_idle_text");
 
   refreshSettings();
   addInputListener(adBlock, settings.adBlock);
@@ -276,6 +279,7 @@ window.addEventListener("DOMContentLoaded", () => {
   addInputListener(enableDiscord, settings.enableDiscord, switchesWithSettings.discord);
   addInputListener(enableWaylandSupport, settings.flags.enableWaylandSupport);
   addInputListener(gpuRasterization, settings.flags.gpuRasterization);
+  addInputListener(hostname, settings.apiSettings.hostname);
   addInputListener(menuBar, settings.menuBar);
   addInputListener(minimizeOnClose, settings.minimizeOnClose);
   addInputListener(mpris, settings.mpris);
@@ -299,7 +303,11 @@ 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_show_song,
+    settings.discord.showSong,
+    switchesWithSettings.discord_show_song
+  );
   addInputListener(discord_idle_text, settings.discord.idleText);
   addInputListener(discord_using_text, settings.discord.usingText);
 });

src/pages/settings/settings.html

@@ -167,6 +167,16 @@
                 <input id="port" type="number" class="text-input" name="port" />
               </div>
             </div>
+            <div class="group__option">
+              <div class="group__description">
+                <h4>API hostname</h4>
+                <p>By default (127.0.0.1) only local apps can interface with the API. <br />
+                  Change to 0.0.0.0 to allow <strong>anyone</strong> to interact with it. <br />
+                  Other options are available
+                </p>
+                <input id="hostname" type="text" class="text-input" name="hostname" />
+              </div>
+            </div>
             <div class="group__option">
               <div class="group__description">
                 <h4>Playback control</h4>

src/scripts/settings.ts

@@ -31,6 +31,7 @@ export const settingsStore = new Store({
     api: true,
     apiSettings: {
       port: 47836,
+      hostname: "127.0.0.1",
     },
     customCSS: [],
     disableBackgroundThrottle: true,
@@ -101,6 +102,11 @@ export const settingsStore = new Store({
         },
       ]);
     },
+    "5.14.0": (migrationStore) => {
+      buildMigration("5.14.0", migrationStore, [
+        { key: settings.apiSettings.hostname, value: "127.0.0.1" },
+      ]);
+    },
   },
 });