Add ChangeDetection.io widget

public/locales/en/common.json

@@ -55,6 +55,10 @@
     "bitrate": "Bitrate",
     "no_active": "No Active Streams"
   },
+  "changedetectionio": {
+    "totalObserved": "Total Observed",
+    "diffsDetected": "Diffs Detected"
+  },
   "tautulli": {
     "playing": "Playing",
     "transcoding": "Transcoding",

src/widgets/changedetectionio/component.jsx

@@ -0,0 +1,33 @@
+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";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+
+  const { data } = useWidgetAPI(widget, "info");
+
+  if (!data) {
+    return <Container error="widget.api_error" />;
+  }
+
+  const totalObserved = Object.keys(data).length;
+  let diffsDetected = 0;
+
+  Object.keys(data).forEach((key) => {
+    if (data[key].last_checked === data[key].last_changed) {
+      diffsDetected += 1;
+    }
+  });
+
+  return (
+    <Container service={service}>
+      <Block label="changedetectionio.diffsDetected" value={t("common.number", { value: diffsDetected })} />
+      <Block label="changedetectionio.totalObserved" value={t("common.number", { value: totalObserved })} />
+    </Container>
+  );
+}

src/widgets/changedetectionio/widget.js

@@ -0,0 +1,15 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const widget = {
+  api: "{url}/api/v1/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    info: {
+      method: "GET",
+      endpoint: "watch",
+    },
+  },
+};
+
+export default widget;

src/widgets/components.js

@@ -4,6 +4,7 @@ const components = {
   adguard: dynamic(() => import("./adguard/component")),
   authentik: dynamic(() => import("./authentik/component")),
   bazarr: dynamic(() => import("./bazarr/component")),
+  changedetectionio: dynamic(() => import("./changedetectionio/component")),
   coinmarketcap: dynamic(() => import("./coinmarketcap/component")),
   docker: dynamic(() => import("./docker/component")),
   emby: dynamic(() => import("./emby/component")),

src/widgets/widgets.js

@@ -1,6 +1,7 @@
 import adguard from "./adguard/widget";
 import authentik from "./authentik/widget";
 import bazarr from "./bazarr/widget";
+import changedetectionio from "./changedetectionio/widget";
 import coinmarketcap from "./coinmarketcap/widget";
 import emby from "./emby/widget";
 import gotify from "./gotify/widget";
@@ -34,6 +35,7 @@ const widgets = {
   adguard,
   authentik,
   bazarr,
+  changedetectionio,
   coinmarketcap,
   emby,
   gotify,
@@ -63,7 +65,7 @@ const widgets = {
   traefik,
   transmission,
   unifi,
-  unifi_console: unifi
+  unifi_console: unifi,
 };
 
 export default widgets;