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] Use compact now playing format

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

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 94ac652b..afba679a 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 360dac97..f4f3e672 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>
+  );
 }