From 210d746ef632c8d76e9ea960e80bb8f768fe6492 Mon Sep 17 00:00:00 2001
From: ForeverEndeavor <77213414+ForeverEndeavor@users.noreply.github.com>
Date: Mon, 7 Nov 2022 10:16:03 -0600
Subject: [PATCH 1/3] Feature: add navidrome support

---
 public/locales/en/common.json       |  6 ++++
 src/widgets/components.js           |  1 +
 src/widgets/navidrome/component.jsx | 45 +++++++++++++++++++++++++++++
 src/widgets/navidrome/widget.js     | 14 +++++++++
 src/widgets/widgets.js              |  2 ++
 5 files changed, 68 insertions(+)
 create mode 100644 src/widgets/navidrome/component.jsx
 create mode 100644 src/widgets/navidrome/widget.js

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 8784443a4..94ac652be 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -168,6 +168,12 @@
         "services": "Services",
         "middleware": "Middleware"
     },
+    "navidrome": {
+        "user": "User",
+        "artist": "Artist",
+        "song": "Song",
+        "album": "Album"
+    },
     "npm": {
         "enabled": "Enabled",
         "disabled": "Disabled",
diff --git a/src/widgets/components.js b/src/widgets/components.js
index 33d09eac3..28b5a92f0 100644
--- a/src/widgets/components.js
+++ b/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")),
diff --git a/src/widgets/navidrome/component.jsx b/src/widgets/navidrome/component.jsx
new file mode 100644
index 000000000..343eb0fe7
--- /dev/null
+++ b/src/widgets/navidrome/component.jsx
@@ -0,0 +1,45 @@
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+
+  const { data: navidromeData, error: navidromeError } = useWidgetAPI(widget, "getNowPlaying");
+
+  if (navidromeError) {
+    return <Container error={t("widget.api_error")} />;
+  }
+
+  if (!navidromeData || Object.keys(navidromeData["subsonic-response"].nowPlaying).length === 0) {
+    return (
+      <Container service={service}>
+        <Block label="navidrome.user" />
+        <Block label="navidrome.artist" />
+        <Block label="navidrome.song" />
+        <Block label="navidrome.album" />
+      </Container>
+    );
+  }
+
+  const nowPlaying = Object.values(navidromeData["subsonic-response"].nowPlaying.entry);
+  const songList = [];
+
+  nowPlaying.forEach(userPlay => {
+      const playing = (
+        <Container service={service}>
+          <Block label="navidrome.user" value={userPlay.username} />
+          <Block label="navidrome.artist" value={userPlay.artist} />
+          <Block label="navidrome.song" value={userPlay.title} />
+          <Block label="navidrome.album" value={userPlay.album} />
+        </Container>
+      );
+      songList.unshift(playing);
+    });
+
+  return songList;
+}
diff --git a/src/widgets/navidrome/widget.js b/src/widgets/navidrome/widget.js
new file mode 100644
index 000000000..9b8614350
--- /dev/null
+++ b/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={version}&c={client}&f=json",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    "getNowPlaying": {
+      endpoint: "getNowPlaying",
+    },
+  },
+};
+
+export default widget;
diff --git a/src/widgets/widgets.js b/src/widgets/widgets.js
index 7bad4013b..aaf0a0255 100644
--- a/src/widgets/widgets.js
+++ b/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,

From 31b644c93933a2960dcdaaa5f2e410f26a47bc56 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 7 Nov 2022 10:36:47 -0800
Subject: [PATCH 2/3] fix navidrome nothing playing, simplify widget params

---
 src/widgets/navidrome/component.jsx | 16 ++++++++++++----
 src/widgets/navidrome/widget.js     |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/widgets/navidrome/component.jsx b/src/widgets/navidrome/component.jsx
index 343eb0fe7..360dac97e 100644
--- a/src/widgets/navidrome/component.jsx
+++ b/src/widgets/navidrome/component.jsx
@@ -11,11 +11,11 @@ export default function Component({ service }) {
 
   const { data: navidromeData, error: navidromeError } = useWidgetAPI(widget, "getNowPlaying");
 
-  if (navidromeError) {
+  if (navidromeError || navidromeData?.error || navidromeData?.["subsonic-response"]?.error) {
     return <Container error={t("widget.api_error")} />;
   }
 
-  if (!navidromeData || Object.keys(navidromeData["subsonic-response"].nowPlaying).length === 0) {
+  if (!navidromeData) {
     return (
       <Container service={service}>
         <Block label="navidrome.user" />
@@ -26,10 +26,18 @@ export default function Component({ service }) {
     );
   }
 
-  const nowPlaying = Object.values(navidromeData["subsonic-response"].nowPlaying.entry);
+  const nowPlaying = navidromeData["subsonic-response"].nowPlaying;
+  if (!nowPlaying.entry) {
+    // nothing playing
+    return (
+      <Container service={service} />
+    );
+  }
+
+  const nowPlayingEntries = Object.values(nowPlaying.entry);
   const songList = [];
 
-  nowPlaying.forEach(userPlay => {
+  nowPlayingEntries.forEach(userPlay => {
       const playing = (
         <Container service={service}>
           <Block label="navidrome.user" value={userPlay.username} />
diff --git a/src/widgets/navidrome/widget.js b/src/widgets/navidrome/widget.js
index 9b8614350..9d7c03d45 100644
--- a/src/widgets/navidrome/widget.js
+++ b/src/widgets/navidrome/widget.js
@@ -1,7 +1,7 @@
 import genericProxyHandler from "utils/proxy/handlers/generic";
 
 const widget = {
-  api: "{url}/rest/{endpoint}?u={user}&t={token}&s={salt}&v={version}&c={client}&f=json",
+  api: "{url}/rest/{endpoint}?u={user}&t={token}&s={salt}&v=1.16.1&c=homepage&f=json",
   proxyHandler: genericProxyHandler,
 
   mappings: {

From 3e73fb65ead76accca59f0ad327dc027062838b8 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 7 Nov 2022 11:06:53 -0800
Subject: [PATCH 3/3] Use compact now playing format

---
 public/locales/en/common.json       |  6 ++--
 src/widgets/navidrome/component.jsx | 51 +++++++++++++++--------------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 94ac652be..afba679a1 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -169,10 +169,8 @@
         "middleware": "Middleware"
     },
     "navidrome": {
-        "user": "User",
-        "artist": "Artist",
-        "song": "Song",
-        "album": "Album"
+        "nothing_streaming": "No Active Streams",
+        "please_wait": "Please Wait"
     },
     "npm": {
         "enabled": "Enabled",
diff --git a/src/widgets/navidrome/component.jsx b/src/widgets/navidrome/component.jsx
index 360dac97e..f4f3e6721 100644
--- a/src/widgets/navidrome/component.jsx
+++ b/src/widgets/navidrome/component.jsx
@@ -1,9 +1,24 @@
 import { useTranslation } from "next-i18next";
 
 import Container from "components/services/widget/container";
-import Block from "components/services/widget/block";
 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();
 
@@ -17,37 +32,25 @@ export default function Component({ service }) {
 
   if (!navidromeData) {
     return (
-      <Container service={service}>
-        <Block label="navidrome.user" />
-        <Block label="navidrome.artist" />
-        <Block label="navidrome.song" />
-        <Block label="navidrome.album" />
-      </Container>
+      <SinglePlayingEntry entry={{ title: t("navidrome.please_wait") }} />
     );
   }
 
-  const nowPlaying = navidromeData["subsonic-response"].nowPlaying;
+  const { nowPlaying } = navidromeData["subsonic-response"];
   if (!nowPlaying.entry) {
     // nothing playing
     return (
-      <Container service={service} />
+      <SinglePlayingEntry entry={{ title: t("navidrome.nothing_streaming") }} />
     );
   }
 
   const nowPlayingEntries = Object.values(nowPlaying.entry);
-  const songList = [];
-
-  nowPlayingEntries.forEach(userPlay => {
-      const playing = (
-        <Container service={service}>
-          <Block label="navidrome.user" value={userPlay.username} />
-          <Block label="navidrome.artist" value={userPlay.artist} />
-          <Block label="navidrome.song" value={userPlay.title} />
-          <Block label="navidrome.album" value={userPlay.album} />
-        </Container>
-      );
-      songList.unshift(playing);
-    });
-
-  return songList;
+
+  return (
+    <div className="flex flex-col pb-1 mx-1">
+      {nowPlayingEntries.map((entry) => (
+        <SinglePlayingEntry key={entry.id} entry={entry} />
+      ))}
+    </div>
+  );
 }