Fix blocks for emby/jellyfin, support enable/disable

public/locales/en/common.json

@@ -72,7 +72,11 @@
         "playing": "Playing",
         "transcoding": "Transcoding",
         "bitrate": "Bitrate",
-        "no_active": "No Active Streams"
+        "no_active": "No Active Streams",
+        "movies": "Movies",
+        "series": "Series",
+        "episodes": "Episodes",
+        "songs": "Songs"
     },
     "flood": {
         "download": "Download",

src/utils/config/service-helpers.js

@@ -247,7 +247,9 @@ export function cleanServiceGroups(groups) {
           namespace, // kubernetes widget
           app,
           podSelector,
-          wan // opnsense widget
+          wan, // opnsense widget,
+          enableBlocks, // emby/jellyfin
+          enableNowPlaying
         } = cleanedService.widget;
 
         const fieldsList = typeof fields === 'string' ? JSON.parse(fields) : fields;
@@ -278,6 +280,10 @@ export function cleanServiceGroups(groups) {
         if (type === "opnsense") {
           if (wan) cleanedService.widget.wan = wan;
         }
+        if (type === "emby" || type === "jellyfin") {
+          if (enableBlocks) cleanedService.widget.enableBlocks = enableBlocks === 'true';
+          if (enableNowPlaying) cleanedService.widget.enableNowPlaying = enableNowPlaying === 'true';
+        }
       }
 
       return cleanedService;

src/widgets/emby/component.jsx

@@ -149,6 +149,33 @@ function SessionEntry({ playCommand, session }) {
   );
 }
 
+function CountBlocks({ service, countData }) {
+  const { t } = useTranslation();
+  // allows filtering
+  // eslint-disable-next-line no-param-reassign
+  if (service.widget?.type === 'jellyfin') service.widget.type = 'emby'
+
+  if (!countData) {
+    return (
+      <Container service={service}>
+        <Block label="emby.movies" />
+        <Block label="emby.series" />
+        <Block label="emby.episodes" /> 
+        <Block label="emby.songs" />
+      </Container>
+    )
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="emby.movies" value={t("common.number", { value: countData.MovieCount })} />
+      <Block label="emby.series" value={t("common.number", { value: countData.SeriesCount })} />
+      <Block label="emby.episodes" value={t("common.number", { value: countData.EpisodeCount })} /> 
+      <Block label="emby.songs" value={t("common.number", { value: countData.SongCount })} />
+    </Container>
+  )
+}
+
 export default function Component({ service }) {
   const { t } = useTranslation();
 
@@ -179,114 +206,92 @@ export default function Component({ service }) {
   }
 
   if (sessionsError || countError) {
-    return <Container error={sessionsError || countError} />;
+    return <Container error={sessionsError ?? countError} />;
   }
 
-  if (!sessionsData && countData) {
+  const enableBlocks = service.widget?.enableBlocks
+  const enableNowPlaying = service.widget?.enableNowPlaying ?? true
+
+  if (!sessionsData || !countData) {
     return (
       <>
-      <Container>
+      {enableBlocks && <CountBlocks service={service} countData={null} />}
-            <Block label="Movies" value={t("common.number", { value: countData.MovieCount })} />
+      {enableNowPlaying && <div className="flex flex-col pb-1">
-            <Block label="Series" value={t("common.number", { value: countData.SeriesCount })} />
-            <Block label="Episodes" value={t("common.number", { value: countData.EpisodeCount })} /> 
-            <Block label="Songs" value={t("common.number", { value: countData.SongCount })} />
-      </Container>
-      <div className="flex flex-col pb-1">
         <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
           <span className="absolute left-2 text-xs mt-[2px]">-</span>
         </div>
         <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
           <span className="absolute left-2 text-xs mt-[2px]">-</span>
         </div>
-      </div>
+      </div>}
       </>
     );
   }
 
-  if (!sessionsData) {
+  if (enableNowPlaying) {
-    return (
+    const playing = sessionsData
-      <div className="flex flex-col pb-1">
+      .filter((session) => session?.NowPlayingItem)
-        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+      .sort((a, b) => {
-          <span className="absolute left-2 text-xs mt-[2px]">-</span>
+        if (a.PlayState.PositionTicks > b.PlayState.PositionTicks) {
-        </div>
+          return 1;
-        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+        }
-          <span className="absolute left-2 text-xs mt-[2px]">-</span>
+        if (a.PlayState.PositionTicks < b.PlayState.PositionTicks) {
-        </div>
+          return -1;
-      </div>
+        }
-    );
+        return 0;
-  }
+      });
   
-  const playing = sessionsData
+    if (playing.length === 0) {
-    .filter((session) => session?.NowPlayingItem)
+      return (
-    .sort((a, b) => {
+        <>
-      if (a.PlayState.PositionTicks > b.PlayState.PositionTicks) {
+        {enableBlocks && <CountBlocks service={service} countData={countData} />}
-        return 1;
+        <div className="flex flex-col pb-1 mx-1">
-      }
+          <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
-      if (a.PlayState.PositionTicks < b.PlayState.PositionTicks) {
+            <span className="absolute left-2 text-xs mt-[2px]">{t("emby.no_active")}</span>
-        return -1;
+          </div>
-      }
+          <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
-      return 0;
+            <span className="absolute left-2 text-xs mt-[2px]">-</span>
-    });
+          </div>
+        </div>
+        </>
+      );
+    }
   
-  if (playing.length === 0 && countData) {
+    if (playing.length === 1) {
+      const session = playing[0];
+      return (
+        <>
+        {enableBlocks && <CountBlocks service={service} countData={countData} />}
+        <div className="flex flex-col pb-1 mx-1">
+          <SingleSessionEntry
+            playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
+            session={session}
+          />
+        </div>
+        </>
+      );
+    }
+  
+    if (playing.length === -1)
     return (
       <>
-      <Container>
+      {enableBlocks && <CountBlocks service={service} countData={countData} />}
-            <Block label="Movies" value={t("common.number", { value: countData.MovieCount })} />
-            <Block label="Series" value={t("common.number", { value: countData.SeriesCount })} />
-            <Block label="Episodes" value={t("common.number", { value: countData.EpisodeCount })} /> 
-            <Block label="Songs" value={t("common.number", { value: countData.SongCount })} />
-          </Container>
       <div className="flex flex-col pb-1 mx-1">
-        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+        {playing.map((session) => (
-          <span className="absolute left-2 text-xs mt-[2px]">{t("emby.no_active")}</span>
+          <SessionEntry
-        </div>
+            key={session.Id}
-        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+            playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
-          <span className="absolute left-2 text-xs mt-[2px]">-</span>
+            session={session}
-        </div>
+          />
+        ))}
       </div>
       </>
     );
   }
 
-  if (playing.length === 1 && countData) {
+  if (enableBlocks) {
-    const session = playing[0];
     return (
-      <>
+      <CountBlocks service={service} countData={countData} />
-      <Container>
+    )
-            <Block label="Movies" value={t("common.number", { value: countData.MovieCount })} />
-            <Block label="Series" value={t("common.number", { value: countData.SeriesCount })} />
-            <Block label="Episodes" value={t("common.number", { value: countData.EpisodeCount })} /> 
-            <Block label="Songs" value={t("common.number", { value: countData.SongCount })} />
-      </Container>
-      <div className="flex flex-col pb-1 mx-1">
-        <SingleSessionEntry
-          playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
-          session={session}
-        />
-      </div>
-      </>
-    );
   }
-
-  if (countData && playing.length === -1)
-  return (
-    <>
-    <Container>
-      <Block label="Movies" value={t("common.number", { value: countData.MovieCount })} />
-      <Block label="Series" value={t("common.number", { value: countData.SeriesCount })} />
-      <Block label="Episodes" value={t("common.number", { value: countData.EpisodeCount })} /> 
-      <Block label="Songs" value={t("common.number", { value: countData.SongCount })} />
-   </Container>
-    <div className="flex flex-col pb-1 mx-1">
-      {playing.map((session) => (
-        <SessionEntry
-          key={session.Id}
-          playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
-          session={session}
-        />
-      ))}
-    </div>
-    </>
-  );
 }