Add Docker, Emby, Gotify, Jackett, and JellySeerr widgets

src/components/services/widgets/service/docker.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from "next-i18next";
 import Widget from "../widget";
 import Block from "../block";
 
-import calculateCPUPercent from "utils/stats-helpers";
+import calculateCPUPercent from "widgets/docker/stats-helpers";
 
 export default function Docker({ service }) {
   const { t } = useTranslation();

src/pages/api/services/proxy.js

@@ -1,3 +1,4 @@
+import { formatApiCall } from "utils/api-helpers";
 import createLogger from "utils/logger";
 import genericProxyHandler from "utils/proxies/generic";
 import widgets from "widgets/widgets";
@@ -31,12 +32,15 @@ export default async function handler(req, res) {
         return res.status(403).json({ error: "Unsupported service endpoint" });
       }
 
-      if (req.query.params) {
-        const queryParams = JSON.parse(req.query.params);
-        const query = new URLSearchParams(mappingParams.map((p) => [p, queryParams[p]]));
-        req.query.endpoint = `${endpoint}?${query}`;
-      } else {
       req.query.endpoint = endpoint;
+      if (req.query.segments) {
+        const segments = JSON.parse(req.query.segments);
+        req.query.endpoint = formatApiCall(endpoint, segments);
+      }
+      if (req.query.query) {
+        const queryParams = JSON.parse(req.query.query);
+        const query = new URLSearchParams(mappingParams.map((p) => [p, queryParams[p]]));
+        req.query.endpoint = `${req.query.endpoint}?${query}`;
       }
 
       if (endpointProxy instanceof Function) {

src/utils/api-helpers.js

@@ -32,15 +32,28 @@ export function formatApiCall(url, args) {
   return url.replace(find, replace);
 }
 
-export function formatProxyUrl(widget, endpoint, endpointParams) {
+function getURLSearchParams(widget, endpoint) {
   const params = new URLSearchParams({
     type: widget.type,
     group: widget.service_group,
     service: widget.service_name,
     endpoint,
   });
-  if (endpointParams) {
+  return params;
-    params.append("params", JSON.stringify(endpointParams));
+}
+
+export function formatProxyUrlWithSegments(widget, endpoint, segments) {
+  const params = getURLSearchParams(widget, endpoint);
+  if (segments) {
+    params.append("segments", JSON.stringify(segments))
+  }
+  return `/api/services/proxy?${params.toString()}`;
+}
+
+export function formatProxyUrl(widget, endpoint, queryParams) {
+  const params = getURLSearchParams(widget, endpoint);
+  if (queryParams) {
+    params.append("query", JSON.stringify(queryParams));
   }
   return `/api/services/proxy?${params.toString()}`;
 }

src/widgets/components.js

@@ -4,6 +4,12 @@ const components = {
   adguard: dynamic(() => import("./adguard/component")),
   bazarr: dynamic(() => import("./bazarr/component")),
   coinmarketcap: dynamic(() => import("./coinmarketcap/component")),
+  docker: dynamic(() => import("./docker/component")),
+  emby: dynamic(() => import("./emby/component")),
+  gotify: dynamic(() => import("./gotify/component")),
+  jackett: dynamic(() => import("./jackett/component")),
+  jellyfin: dynamic(() => import("./emby/component")),
+  jellyseerr: dynamic(() => import("./jellyseerr/component")),
   overseerr: dynamic(() => import("./overseerr/component")),
   portainer: dynamic(() => import("./portainer/component")),
   prowlarr: dynamic(() => import("./prowlarr/component")),

src/widgets/docker/component.jsx

@@ -0,0 +1,63 @@
+import useSWR from "swr";
+import { useTranslation } from "next-i18next";
+
+import calculateCPUPercent from "./stats-helpers";
+
+import Widget from "components/services/widgets/widget";
+import Block from "components/services/widgets/block";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const config = service.widget;
+
+  const { data: statusData, error: statusError } = useSWR(
+    `/api/docker/status/${config.container}/${config.server || ""}`,
+    {
+      refreshInterval: 5000,
+    }
+  );
+
+  const { data: statsData, error: statsError } = useSWR(
+    `/api/docker/stats/${config.container}/${config.server || ""}`,
+    {
+      refreshInterval: 5000,
+    }
+  );
+
+  if (statsError || statusError) {
+    return <Widget error={t("widget.api_error")} />;
+  }
+
+  if (statusData && statusData.status !== "running") {
+    return (
+      <Widget>
+        <Block label={t("widget.status")} value={t("docker.offline")} />
+      </Widget>
+    );
+  }
+
+  if (!statsData || !statusData) {
+    return (
+      <Widget>
+        <Block label={t("docker.cpu")} />
+        <Block label={t("docker.mem")} />
+        <Block label={t("docker.rx")} />
+        <Block label={t("docker.tx")} />
+      </Widget>
+    );
+  }
+
+  return (
+    <Widget>
+      <Block label={t("docker.cpu")} value={t("common.percent", { value: calculateCPUPercent(statsData.stats) })} />
+      <Block label={t("docker.mem")} value={t("common.bytes", { value: statsData.stats.memory_stats.usage })} />
+      {statsData.stats.networks && (
+        <>
+          <Block label={t("docker.rx")} value={t("common.bytes", { value: statsData.stats.networks.eth0.rx_bytes })} />
+          <Block label={t("docker.tx")} value={t("common.bytes", { value: statsData.stats.networks.eth0.tx_bytes })} />
+        </>
+      )}
+    </Widget>
+  );
+}

src/widgets/emby/component.jsx

@@ -0,0 +1,239 @@
+import useSWR from "swr";
+import { useTranslation } from "next-i18next";
+import { BsVolumeMuteFill, BsFillPlayFill, BsPauseFill, BsCpu, BsFillCpuFill } from "react-icons/bs";
+import { MdOutlineSmartDisplay } from "react-icons/md";
+
+import Widget from "components/services/widgets/widget";
+import { formatProxyUrl, formatProxyUrlWithSegments } from "utils/api-helpers";
+
+function ticksToTime(ticks) {
+  const milliseconds = ticks / 10000;
+  const seconds = Math.floor((milliseconds / 1000) % 60);
+  const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
+  const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
+  return { hours, minutes, seconds };
+}
+
+function ticksToString(ticks) {
+  const { hours, minutes, seconds } = ticksToTime(ticks);
+  const parts = [];
+  if (hours > 0) {
+    parts.push(hours);
+  }
+  parts.push(minutes);
+  parts.push(seconds);
+
+  return parts.map((part) => part.toString().padStart(2, "0")).join(":");
+}
+
+function SingleSessionEntry({ playCommand, session }) {
+  const {
+    NowPlayingItem: { Name, SeriesName, RunTimeTicks },
+    PlayState: { PositionTicks, IsPaused, IsMuted },
+  } = session;
+
+  const { IsVideoDirect, VideoDecoderIsHardware, VideoEncoderIsHardware } = session?.TranscodingInfo || {
+    IsVideoDirect: true,
+    VideoDecoderIsHardware: true,
+    VideoEncoderIsHardware: true,
+  };
+
+  const percent = (PositionTicks / RunTimeTicks) * 100;
+
+  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="grow text-xs z-10 self-center ml-2 relative w-full h-4 mr-2">
+          <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
+            {Name}
+            {SeriesName && ` - ${SeriesName}`}
+          </div>
+        </div>
+        <div className="self-center text-xs flex justify-end mr-1.5 pl-1">
+          {IsVideoDirect && <MdOutlineSmartDisplay className="opacity-50" />}
+          {!IsVideoDirect && (!VideoDecoderIsHardware || !VideoEncoderIsHardware) && <BsCpu className="opacity-50" />}
+          {!IsVideoDirect && VideoDecoderIsHardware && VideoEncoderIsHardware && (
+            <BsFillCpuFill className="opacity-50" />
+          )}
+        </div>
+      </div>
+
+      <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="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+          style={{
+            width: `${percent}%`,
+          }}
+        />
+        <div className="text-xs z-10 self-center ml-1">
+          {IsPaused && (
+            <BsFillPlayFill
+              onClick={() => {
+                playCommand(session, "Unpause");
+              }}
+              className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+            />
+          )}
+          {!IsPaused && (
+            <BsPauseFill
+              onClick={() => {
+                playCommand(session, "Pause");
+              }}
+              className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+            />
+          )}
+        </div>
+        <div className="grow " />
+        <div className="self-center text-xs flex justify-end mr-1 z-10">{IsMuted && <BsVolumeMuteFill />}</div>
+        <div className="self-center text-xs flex justify-end mr-2 z-10">
+          {ticksToString(PositionTicks)}
+          <span className="mx-0.5 text-[8px]">/</span>
+          {ticksToString(RunTimeTicks)}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function SessionEntry({ playCommand, session }) {
+  const {
+    NowPlayingItem: { Name, SeriesName, RunTimeTicks },
+    PlayState: { PositionTicks, IsPaused, IsMuted },
+  } = session;
+
+  const { IsVideoDirect, VideoDecoderIsHardware, VideoEncoderIsHardware } = session?.TranscodingInfo || {};
+
+  const percent = (PositionTicks / RunTimeTicks) * 100;
+
+  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="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+        style={{
+          width: `${percent}%`,
+        }}
+      />
+      <div className="text-xs z-10 self-center ml-1">
+        {IsPaused && (
+          <BsFillPlayFill
+            onClick={() => {
+              playCommand(session, "Unpause");
+            }}
+            className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+          />
+        )}
+        {!IsPaused && (
+          <BsPauseFill
+            onClick={() => {
+              playCommand(session, "Pause");
+            }}
+            className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
+          />
+        )}
+      </div>
+      <div className="grow text-xs z-10 self-center relative w-full h-4">
+        <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
+          {Name}
+          {SeriesName && ` - ${SeriesName}`}
+        </div>
+      </div>
+      <div className="self-center text-xs flex justify-end mr-1 z-10">{IsMuted && <BsVolumeMuteFill />}</div>
+      <div className="self-center text-xs flex justify-end mr-1 z-10">{ticksToString(PositionTicks)}</div>
+      <div className="self-center items-center text-xs flex justify-end mr-1.5 pl-1 z-10">
+        {IsVideoDirect && <MdOutlineSmartDisplay className="opacity-50" />}
+        {!IsVideoDirect && (!VideoDecoderIsHardware || !VideoEncoderIsHardware) && <BsCpu className="opacity-50" />}
+        {!IsVideoDirect && VideoDecoderIsHardware && VideoEncoderIsHardware && <BsFillCpuFill className="opacity-50" />}
+      </div>
+    </div>
+  );
+}
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const config = service.widget;
+
+  const {
+    data: sessionsData,
+    error: sessionsError,
+    mutate: sessionMutate,
+  } = useSWR(formatProxyUrl(config, "Sessions"), {
+    refreshInterval: 5000,
+  });
+
+  async function handlePlayCommand(session, command) {
+    const url = formatProxyUrlWithSegments(config, "PlayControl", {
+      sessionId: session.Id,
+      command
+    });
+    await fetch(url).then(() => {
+      sessionMutate();
+    });
+  }
+
+  if (sessionsError) {
+    return <Widget error={t("widget.api_error")} />;
+  }
+
+  if (!sessionsData) {
+    return (
+      <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>
+    );
+  }
+
+  const playing = sessionsData
+    .filter((session) => session?.NowPlayingItem)
+    .sort((a, b) => {
+      if (a.PlayState.PositionTicks > b.PlayState.PositionTicks) {
+        return 1;
+      }
+      if (a.PlayState.PositionTicks < b.PlayState.PositionTicks) {
+        return -1;
+      }
+      return 0;
+    });
+
+  if (playing.length === 0) {
+    return (
+      <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>
+    );
+  }
+
+  if (playing.length === 1) {
+    const session = playing[0];
+    return (
+      <div className="flex flex-col pb-1 mx-1">
+        <SingleSessionEntry
+          playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
+          session={session}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <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>
+  );
+}

src/widgets/emby/widget.js

@@ -0,0 +1,19 @@
+import genericProxyHandler from "utils/proxies/generic";
+
+const widget = {
+  api: "{url}/emby/{endpoint}?api_key={key}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    "Sessions": {
+      endpoint: "Sessions",
+    },
+    "PlayControl": {
+      method: "POST",
+      enpoint: "Sessions/{sessionId}/Playing/{command}",
+      segments: ["sessionId", "command"]
+    }
+  },
+};
+
+export default widget;

src/widgets/gotify/component.jsx

@@ -0,0 +1,28 @@
+import useSWR from "swr";
+import { useTranslation } from "next-i18next";
+
+import Widget from "components/services/widgets/widget";
+import Block from "components/services/widgets/block";
+import { formatProxyUrl } from "utils/api-helpers";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const config = service.widget;
+
+  const { data: appsData, error: appsError } = useSWR(formatProxyUrl(config, `application`));
+  const { data: messagesData, error: messagesError } = useSWR(formatProxyUrl(config, `message`));
+  const { data: clientsData, error: clientsError } = useSWR(formatProxyUrl(config, `client`));
+
+  if (appsError || messagesError || clientsError) {
+    return <Widget error={t("widget.api_error")} />;
+  }
+
+  return (
+    <Widget>
+      <Block label={t("gotify.apps")} value={appsData?.length} />
+      <Block label={t("gotify.clients")} value={clientsData?.length} />
+      <Block label={t("gotify.messages")} value={messagesData?.messages?.length} />
+    </Widget>
+  );
+}

src/widgets/gotify/widget.js

@@ -0,0 +1,20 @@
+import credentialedProxyHandler from "utils/proxies/credentialed";
+
+const widget = {
+  api: "{url}/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    "application": {
+      endpoint: "application"
+    },
+    "client": {
+      endpoint: "client"
+    },
+    "message": {
+      endpoint: "message"
+    },
+  },
+};
+
+export default widget;

src/widgets/jackett/component.jsx

@@ -0,0 +1,36 @@
+import useSWR from "swr";
+import { useTranslation } from "next-i18next";
+
+import Widget from "components/services/widgets/widget";
+import Block from "components/services/widgets/block";
+import { formatProxyUrl } from "utils/api-helpers";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const config = service.widget;
+
+  const { data: indexersData, error: indexersError } = useSWR(formatProxyUrl(config, "indexers"));
+
+  if (indexersError) {
+    return <Widget error={t("widget.api_error")} />;
+  }
+
+  if (!indexersData) {
+    return (
+      <Widget>
+        <Block label={t("jackett.configured")} />
+        <Block label={t("jackett.errored")} />
+      </Widget>
+    );
+  }
+
+  const errored = indexersData.filter((indexer) => indexer.last_error);
+
+  return (
+    <Widget>
+      <Block label={t("jackett.configured")} value={t("common.number", { value: indexersData.length })} />
+      <Block label={t("jackett.errored")} value={t("common.number", { value: errored.length })} />
+    </Widget>
+  );
+}

src/widgets/jackett/widget.js

@@ -0,0 +1,14 @@
+import genericProxyHandler from "utils/proxies/generic";
+
+const widget = {
+  api: "{url}/api/v2.0/{endpoint}?apikey={key}&configured=true",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    "indexers": {
+      endpoint: "indexers"
+    },
+  },
+};
+
+export default widget;

src/widgets/jellyseerr/component.jsx

@@ -0,0 +1,36 @@
+import useSWR from "swr";
+import { useTranslation } from "next-i18next";
+
+import Widget from "components/services/widgets/widget";
+import Block from "components/services/widgets/block";
+import { formatProxyUrl } from "utils/api-helpers";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const config = service.widget;
+
+  const { data: statsData, error: statsError } = useSWR(formatProxyUrl(config, `request/count`));
+
+  if (statsError) {
+    return <Widget error={t("widget.api_error")} />;
+  }
+
+  if (!statsData) {
+    return (
+      <Widget>
+        <Block label={t("jellyseerr.pending")} />
+        <Block label={t("jellyseerr.approved")} />
+        <Block label={t("jellyseerr.available")} />
+      </Widget>
+    );
+  }
+
+  return (
+    <Widget>
+      <Block label={t("jellyseerr.pending")} value={statsData.pending} />
+      <Block label={t("jellyseerr.approved")} value={statsData.approved} />
+      <Block label={t("jellyseerr.available")} value={statsData.available} />
+    </Widget>
+  );
+}

src/widgets/jellyseerr/widget.js

@@ -0,0 +1,14 @@
+import credentialedProxyHandler from "utils/proxies/credentialed";
+
+const widget = {
+  api: "{url}/api/v1/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    "request/count": {
+      endpoint: "request/count"
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -1,6 +1,10 @@
 import adguard from "./adguard/widget";
 import bazarr from "./bazarr/widget";
 import coinmarketcap from "./coinmarketcap/widget";
+import emby from "./emby/widget";
+import gotify from "./gotify/widget";
+import jackett from "./jackett/widget";
+import jellyseerr from "./jellyseerr/widget";
 import overseerr from "./overseerr/widget";
 import portainer from "./portainer/widget";
 import prowlarr from "./prowlarr/widget";
@@ -20,6 +24,11 @@ const widgets = {
   adguard,
   bazarr,
   coinmarketcap,
+  emby,
+  gotify,
+  jackett,
+  jellyfin: emby,
+  jellyseerr,
   overseerr,
   portainer,
   prowlarr,