Feature: add navidrome support

public/locales/en/common.json

@@ -168,6 +168,10 @@
         "services": "Services",
         "middleware": "Middleware"
     },
+    "navidrome": {
+        "nothing_streaming": "No Active Streams",
+        "please_wait": "Please Wait"
+    },
     "npm": {
         "enabled": "Enabled",
         "disabled": "Disabled",

src/widgets/components.js

@@ -16,6 +16,7 @@ const components = {
   jellyseerr: dynamic(() => import("./jellyseerr/component")),
   lidarr: dynamic(() => import("./lidarr/component")),
   mastodon: dynamic(() => import("./mastodon/component")),
+  navidrome: dynamic(() => import("./navidrome/component")),
   npm: dynamic(() => import("./npm/component")),
   nzbget: dynamic(() => import("./nzbget/component")),
   ombi: dynamic(() => import("./ombi/component")),

src/widgets/navidrome/component.jsx

@@ -0,0 +1,56 @@
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+function SinglePlayingEntry({ entry }) {
+  const { username, artist, title, album } = entry;
+  let fullTitle = title;
+  if (artist) fullTitle = `${artist} - ${title}`;
+  if (album) fullTitle += ` — ${album}`;
+  if (username) fullTitle += ` (${username})`;
+
+  return (
+    <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+      <div className="text-xs z-10 self-center ml-2 relative w-full h-4 grow mr-2">
+        <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">{fullTitle}</div>
+      </div>
+    </div>
+  );
+}
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+
+  const { data: navidromeData, error: navidromeError } = useWidgetAPI(widget, "getNowPlaying");
+
+  if (navidromeError || navidromeData?.error || navidromeData?.["subsonic-response"]?.error) {
+    return <Container error={t("widget.api_error")} />;
+  }
+
+  if (!navidromeData) {
+    return (
+      <SinglePlayingEntry entry={{ title: t("navidrome.please_wait") }} />
+    );
+  }
+
+  const { nowPlaying } = navidromeData["subsonic-response"];
+  if (!nowPlaying.entry) {
+    // nothing playing
+    return (
+      <SinglePlayingEntry entry={{ title: t("navidrome.nothing_streaming") }} />
+    );
+  }
+
+  const nowPlayingEntries = Object.values(nowPlaying.entry);
+
+  return (
+    <div className="flex flex-col pb-1 mx-1">
+      {nowPlayingEntries.map((entry) => (
+        <SinglePlayingEntry key={entry.id} entry={entry} />
+      ))}
+    </div>
+  );
+}

src/widgets/navidrome/widget.js

@@ -0,0 +1,14 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/rest/{endpoint}?u={user}&t={token}&s={salt}&v=1.16.1&c=homepage&f=json",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    "getNowPlaying": {
+      endpoint: "getNowPlaying",
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -11,6 +11,7 @@ import jackett from "./jackett/widget";
 import jellyseerr from "./jellyseerr/widget";
 import lidarr from "./lidarr/widget";
 import mastodon from "./mastodon/widget";
+import navidrome from "./navidrome/widget";
 import npm from "./npm/widget";
 import nzbget from "./nzbget/widget";
 import ombi from "./ombi/widget";
@@ -51,6 +52,7 @@ const widgets = {
   jellyseerr,
   lidarr,
   mastodon,
+  navidrome,
   npm,
   nzbget,
   ombi,