Use compact now playing format

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",

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>
+  );
 }