Merge pull request #1101 from jagadam97/main

Feature: support optional media counts in jellyfin / emby widgets

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

@@ -2,6 +2,7 @@ import { useTranslation } from "next-i18next";
 import { BsVolumeMuteFill, BsFillPlayFill, BsPauseFill, BsCpu, BsFillCpuFill } from "react-icons/bs";
 import { MdOutlineSmartDisplay } from "react-icons/md";
 
+import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
 import { formatProxyUrlWithSegments } from "utils/proxy/api-helpers";
 import useWidgetAPI from "utils/proxy/use-widget-api";
@@ -148,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();
 
@@ -161,6 +189,12 @@ export default function Component({ service }) {
     refreshInterval: 5000,
   });
 
+  const {
+    data: countData,
+    error: countError,
+  } = useWidgetAPI(widget, "Count", {
+    refreshInterval: 60000,});
+
   async function handlePlayCommand(session, command) {
     const url = formatProxyUrlWithSegments(widget, "PlayControl", {
       sessionId: session.Id,
@@ -171,69 +205,93 @@ export default function Component({ service }) {
     });
   }
 
-  if (sessionsError) {
+  if (sessionsError || countError) {
-    return <Container error={sessionsError} />;
+    return <Container error={sessionsError ?? countError} />;
   }
 
-  if (!sessionsData) {
+  const enableBlocks = service.widget?.enableBlocks
+  const enableNowPlaying = service.widget?.enableNowPlaying ?? true
+
+  if (!sessionsData || !countData) {
     return (
-      <div className="flex flex-col pb-1">
+      <>
+      {enableBlocks && <CountBlocks service={service} countData={null} />}
+      {enableNowPlaying && <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>}
+      </>
     );
   }
 
-  const playing = sessionsData
+  if (enableNowPlaying) {
-    .filter((session) => session?.NowPlayingItem)
+    const playing = sessionsData
-    .sort((a, b) => {
+      .filter((session) => session?.NowPlayingItem)
-      if (a.PlayState.PositionTicks > b.PlayState.PositionTicks) {
+      .sort((a, b) => {
-        return 1;
+        if (a.PlayState.PositionTicks > b.PlayState.PositionTicks) {
-      }
+          return 1;
-      if (a.PlayState.PositionTicks < b.PlayState.PositionTicks) {
+        }
-        return -1;
+        if (a.PlayState.PositionTicks < b.PlayState.PositionTicks) {
-      }
+          return -1;
-      return 0;
+        }
-    });
+        return 0;
-
+      });
-  if (playing.length === 0) {
+  
-    return (
+    if (playing.length === 0) {
-      <div className="flex flex-col pb-1 mx-1">
+      return (
-        <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]">{t("emby.no_active")}</span>
+        {enableBlocks && <CountBlocks service={service} countData={countData} />}
+        <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">
+            <span className="absolute left-2 text-xs mt-[2px]">{t("emby.no_active")}</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 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 (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>
-      </div>
+        </>
-    );
+      );
-  }
+    }
-
+  
-  if (playing.length === 1) {
+    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
+        {playing.map((session) => (
-          playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
+          <SessionEntry
-          session={session}
+            key={session.Id}
-        />
+            playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
+            session={session}
+          />
+        ))}
       </div>
+      </>
     );
   }
 
-  return (
+  if (enableBlocks) {
-    <div className="flex flex-col pb-1 mx-1">
+    return (
-      {playing.map((session) => (
+      <CountBlocks service={service} countData={countData} />
-        <SessionEntry
+    )
-          key={session.Id}
+  }
-          playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
-          session={session}
-        />
-      ))}
-    </div>
-  );
 }

src/widgets/emby/widget.js

@@ -8,6 +8,15 @@ const widget = {
     Sessions: {
       endpoint: "Sessions",
     },
+    Count: {
+      endpoint: "Items/Counts",
+      segments: [
+          "MovieCount",
+          "SeriesCount",
+          "EpisodeCount",
+          "SongCount"
+      ]
+    },
     PlayControl: {
       method: "POST",
       endpoint: "Sessions/{sessionId}/Playing/{command}",