Feature: Whisparr Widget

docs/widgets/services/whisparr.md

@@ -0,0 +1,20 @@
+---
+title: Whisparr
+description: Whisparr Widget Configuration
+---
+
+Learn more about [Whisparr](https://github.com/Whisparr/Whisparr).
+
+Find your API key under `Settings > General`.
+
+Allowed fields: `["wanted", "queued", "series"]`.
+
+A detailed queue listing is disabled by default, but can be enabled with the `enableQueue` option.
+
+```yaml
+widget:
+  type: whisparr
+  url: http://whisparr.host.or.ip
+  key: apikeyapikeyapikeyapikeyapikey
+  enableQueue: true # optional, defaults to false
+```

mkdocs.yml

@@ -144,6 +144,7 @@ nav:
       - widgets/services/urbackup.md
       - widgets/services/watchtower.md
       - widgets/services/whatsupdocker.md
+      - widgets/services/whisparr.md
       - widgets/services/xteve.md
     - "Information Widgets":
       - widgets/info/index.md

src/utils/config/service-helpers.js

@@ -453,7 +453,7 @@ export function cleanServiceGroups(groups) {
           // speedtest
           bitratePrecision,
 
-          // sonarr, radarr
+          // sonarr, radarr, whisparr
           enableQueue,
 
           // truenas
@@ -533,7 +533,7 @@ export function cleanServiceGroups(groups) {
             cleanedService.widget.showEpisodeNumber = !!JSON.parse(showEpisodeNumber);
           if (enableUser !== undefined) cleanedService.widget.enableUser = !!JSON.parse(enableUser);
         }
-        if (["sonarr", "radarr"].includes(type)) {
+        if (["sonarr", "radarr", "whisparr"].includes(type)) {
           if (enableQueue !== undefined) cleanedService.widget.enableQueue = JSON.parse(enableQueue);
         }
         if (type === "truenas") {

src/widgets/components.js

@@ -118,6 +118,7 @@ const components = {
   urbackup: dynamic(() => import("./urbackup/component")),
   watchtower: dynamic(() => import("./watchtower/component")),
   whatsupdocker: dynamic(() => import("./whatsupdocker/component")),
+  whisparr: dynamic(() => import("./whisparr/component")),
   xteve: dynamic(() => import("./xteve/component")),
 };
 

src/widgets/whisparr/component.jsx

@@ -0,0 +1,80 @@
+import { useTranslation } from "next-i18next";
+import { useCallback } from "react";
+
+import QueueEntry from "../../components/widgets/queue/queueEntry";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+function getProgress(sizeLeft, size) {
+  return sizeLeft === 0 ? 100 : (1 - sizeLeft / size) * 100;
+}
+
+function getTitle(queueEntry, seriesData) {
+  let title = "";
+  const seriesTitle = seriesData.find((entry) => entry.id === queueEntry.seriesId)?.title;
+  if (seriesTitle) title += `${seriesTitle}: `;
+  const { episodeTitle } = queueEntry;
+  if (episodeTitle) title += episodeTitle;
+  if (title === "") return null;
+  return title;
+}
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+
+  const { data: wantedData, error: wantedError } = useWidgetAPI(widget, "wanted/missing");
+  const { data: queuedData, error: queuedError } = useWidgetAPI(widget, "queue");
+  const { data: seriesData, error: seriesError } = useWidgetAPI(widget, "series");
+  const { data: queueDetailsData, error: queueDetailsError } = useWidgetAPI(widget, "queue/details");
+
+  const formatDownloadState = useCallback((downloadState) => {
+    switch (downloadState) {
+      case "importPending":
+        return "import pending";
+      case "failedPending":
+        return "failed pending";
+      default:
+        return downloadState;
+    }
+  }, []);
+
+  if (wantedError || queuedError || seriesError || queueDetailsError) {
+    const finalError = wantedError ?? queuedError ?? seriesError ?? queueDetailsError;
+    return <Container service={service} error={finalError} />;
+  }
+
+  if (!wantedData || !queuedData || !seriesData || !queueDetailsData) {
+    return (
+      <Container service={service}>
+        <Block label="whisparr.wanted" />
+        <Block label="whisparr.queued" />
+        <Block label="whisparr.series" />
+      </Container>
+    );
+  }
+
+  const enableQueue = widget?.enableQueue && Array.isArray(queueDetailsData) && queueDetailsData.length > 0;
+
+  return (
+    <>
+      <Container service={service}>
+        <Block label="whisparr.wanted" value={t("common.number", { value: wantedData.totalRecords })} />
+        <Block label="whisparr.queued" value={t("common.number", { value: queuedData.totalRecords })} />
+        <Block label="whisparr.series" value={t("common.number", { value: seriesData.length })} />
+      </Container>
+      {enableQueue &&
+        queueDetailsData.map((queueEntry) => (
+          <QueueEntry
+            progress={getProgress(queueEntry.sizeLeft, queueEntry.size)}
+            timeLeft={queueEntry.timeLeft}
+            title={getTitle(queueEntry, seriesData) ?? t("whisparr.unknown")}
+            activity={formatDownloadState(queueEntry.trackedDownloadState)}
+            key={`${queueEntry.seriesId}-${queueEntry.episodeId}`}
+          />
+        ))}
+    </>
+  );
+}

src/widgets/whisparr/widget.js

@@ -0,0 +1,68 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+import { asJson } from "utils/proxy/api-helpers";
+
+const widget = {
+  api: "{url}/api/v3/{endpoint}?apikey={key}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    series: {
+      endpoint: "series",
+      map: (data) =>
+        asJson(data).map((entry) => ({
+          title: entry.title,
+          id: entry.id,
+        })),
+    },
+    queue: {
+      endpoint: "queue",
+      validate: ["totalRecords"],
+    },
+    "wanted/missing": {
+      endpoint: "wanted/missing",
+      validate: ["totalRecords"],
+    },
+    "queue/details": {
+      endpoint: "queue/details",
+      map: (data) =>
+        asJson(data)
+          .map((entry) => ({
+            trackedDownloadState: entry.trackedDownloadState,
+            trackedDownloadStatus: entry.trackedDownloadStatus,
+            timeLeft: entry.timeleft,
+            size: entry.size,
+            sizeLeft: entry.sizeleft,
+            seriesId: entry.seriesId,
+            episodeTitle: entry.episode?.title ?? entry.title,
+            episodeId: entry.episodeId ?? entry.id,
+            status: entry.status,
+          }))
+          .sort((a, b) => {
+            const downloadingA = a.trackedDownloadState === "downloading";
+            const downloadingB = b.trackedDownloadState === "downloading";
+            if (downloadingA && !downloadingB) {
+              return -1;
+            }
+            if (downloadingB && !downloadingA) {
+              return 1;
+            }
+
+            const percentA = a.sizeLeft / a.size;
+            const percentB = b.sizeLeft / b.size;
+            if (percentA < percentB) {
+              return -1;
+            }
+            if (percentA > percentB) {
+              return 1;
+            }
+            return 0;
+          }),
+    },
+    calendar: {
+      endpoint: "calendar",
+      params: ["start", "end", "unmonitored", "includeSeries", "includeEpisodeFile", "includeEpisodeImages"],
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -108,6 +108,7 @@ import uptimekuma from "./uptimekuma/widget";
 import uptimerobot from "./uptimerobot/widget";
 import watchtower from "./watchtower/widget";
 import whatsupdocker from "./whatsupdocker/widget";
+import whisparr from "./whisparr/widget";
 import xteve from "./xteve/widget";
 import urbackup from "./urbackup/widget";
 import romm from "./romm/widget";
@@ -228,6 +229,7 @@ const widgets = {
   urbackup,
   watchtower,
   whatsupdocker,
+  whisparr,
   xteve,
 };