Feature: Slskd Service Widget (#5045)

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

docs/widgets/services/index.md

@@ -117,6 +117,7 @@ You can also find a list of all available service widgets in the sidebar navigat
 - [ruTorrent](rutorrent.md)
 - [SABnzbd](sabnzbd.md)
 - [Scrutiny](scrutiny.md)
+- [Slskd](slskd.md)
 - [Sonarr](sonarr.md)
 - [Speedtest Tracker](speedtest-tracker.md)
 - [Stash](stash.md)

docs/widgets/services/slskd.md

@@ -0,0 +1,25 @@
+---
+title: Slskd
+description: Slskd Widget Configuration
+---
+
+Learn more about [Slskd](https://github.com/slskd/slskd).
+
+Generate an API key for slskd with `openssl rand -base64 48`.
+Add it to your `path/to/config/slskd.yml` in `web > authentication > api_keys`:
+
+```yaml
+homepage_widget:
+  key: <generated key>
+  role: readonly
+  cidr: <homepage subnet>
+```
+
+Allowed fields: `["slskStatus", "updateStatus", "downloads", "uploads", "sharedFiles"]` (maximum of 4).
+
+```yaml
+widget:
+  type: slskd
+  url: http[s]://slskd.host.or.ip[:5030]
+  key: generatedapikey
+```

public/locales/en/common.json

@@ -1030,5 +1030,16 @@
         "highlights": "Highlights",
         "lists": "Lists",
         "tags": "Tags"
+    },
+    "slskd": {
+        "slskStatus": "Network",
+        "connected": "Connected",
+        "disconnected": "Disconnected",
+        "updateStatus": "Update",
+        "update_yes": "Available",
+        "update_no": "Up to Date",
+        "downloads": "Downloads",
+        "uploads": "Uploads",
+        "sharedFiles": "Files"
     }
 }

src/widgets/components.js

@@ -113,6 +113,7 @@ const components = {
   rutorrent: dynamic(() => import("./rutorrent/component")),
   sabnzbd: dynamic(() => import("./sabnzbd/component")),
   scrutiny: dynamic(() => import("./scrutiny/component")),
+  slskd: dynamic(() => import("./slskd/component")),
   sonarr: dynamic(() => import("./sonarr/component")),
   speedtest: dynamic(() => import("./speedtest/component")),
   spoolman: dynamic(() => import("./spoolman/component")),

src/widgets/slskd/component.jsx

@@ -0,0 +1,55 @@
+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";
+
+const slskdDefaultFields = ["slskStatus", "downloads", "uploads", "sharedFiles"];
+const MAX_ALLOWED_FIELDS = 4;
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+
+  const { data: appData, error: appError } = useWidgetAPI(widget, "application");
+  const { data: downData, error: downError } = useWidgetAPI(widget, "downloads");
+  const { data: upData, error: upError } = useWidgetAPI(widget, "uploads");
+
+  if (appError || downError || upError) {
+    return <Container service={service} error={appError ?? downError ?? upError} />;
+  }
+
+  if (!widget.fields || widget.fields.length === 0) {
+    widget.fields = slskdDefaultFields;
+  } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
+    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
+  }
+
+  if (!appData || !downData || !upData) {
+    return (
+      <Container service={service}>
+        <Block label="slskd.slskStatus" />
+        <Block label="slskd.updateStatus" />
+        <Block label="slskd.downloads" />
+        <Block label="slskd.uploads" />
+        <Block label="slskd.sharedFiles" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block
+        label="slskd.slskStatus"
+        value={appData.server?.isConnected ? t("slskd.connected") : t("slskd.disconnected")}
+      />
+      <Block
+        label="slskd.updateStatus"
+        value={appData.version?.isUpdateAvailable ? t("slskd.update_yes") : t("slskd.update_no")}
+      />
+      <Block label="slskd.downloads" value={t("common.number", { value: downData.length ?? 0 })} />
+      <Block label="slskd.uploads" value={t("common.number", { value: upData.length ?? 0 })} />
+      <Block label="slskd.sharedFiles" value={t("common.number", { value: appData.shares?.files ?? 0 })} />
+    </Container>
+  );
+}

src/widgets/slskd/widget.js

@@ -0,0 +1,21 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+import { asJson } from "utils/proxy/api-helpers";
+
+const widget = {
+  api: `{url}/api/v0/{endpoint}`,
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    application: {
+      endpoint: "application",
+    },
+    downloads: {
+      endpoint: "transfers/downloads",
+    },
+    uploads: {
+      endpoint: "transfers/uploads",
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -104,6 +104,7 @@ import readarr from "./readarr/widget";
 import rutorrent from "./rutorrent/widget";
 import sabnzbd from "./sabnzbd/widget";
 import scrutiny from "./scrutiny/widget";
+import slskd from "./slskd/widget";
 import sonarr from "./sonarr/widget";
 import speedtest from "./speedtest/widget";
 import spoolman from "./spoolman/widget";
@@ -244,6 +245,7 @@ const widgets = {
   rutorrent,
   sabnzbd,
   scrutiny,
+  slskd,
   sonarr,
   speedtest,
   spoolman,