Feature: Frigate service widget (gethomepage#3743)

docs/widgets/services/frigate.md

@@ -0,0 +1,17 @@
+---
+title: Frigate
+description: Frigate Widget Configuration
+---
+
+Learn more about [Frigate](https://frigate.video/).
+
+Allowed fields: `["cameras", "uptime", "version"]`.
+
+A recent event listing is disabled by default, but can be enabled with the `enableRecentEvents` option.
+
+```yaml
+widget:
+  type: frigate
+  url: http://frigate.host.or.ip:port
+  enableRecentEvents: true # Optional, defaults to false
+```

docs/widgets/services/index.md

@@ -30,6 +30,7 @@ You can also find a list of all available service widgets in the sidebar navigat
 - [Fileflows](fileflows.md)
 - [Flood](flood.md)
 - [FreshRSS](freshrss.md)
+- [Frigate](frigate.md)
 - [Fritz!Box](fritzbox.md)
 - [GameDig](gamedig.md)
 - [Gatus](gatus.md)

mkdocs.yml

@@ -55,6 +55,7 @@ nav:
           - widgets/services/fileflows.md
           - widgets/services/flood.md
           - widgets/services/freshrss.md
+          - widgets/services/frigate.md
           - widgets/services/fritzbox.md
           - widgets/services/gamedig.md
           - widgets/services/gatus.md

public/locales/en/common.json

@@ -900,5 +900,10 @@
         "open": "Open - US Market",
         "closed": "Closed - US Market",
         "invalidConfiguration": "Invalid Configuration"
+    },
+    "frigate": {
+        "cameras": "Cameras",
+        "uptime": "Uptime",
+        "version": "Version"
     }
 }

src/utils/config/service-helpers.js

@@ -399,6 +399,9 @@ export function cleanServiceGroups(groups) {
           expandOneStreamToTwoRows,
           showEpisodeNumber,
 
+          // frigate
+          enableRecentEvents,
+
           // glances, pihole, pfsense
           version,
 
@@ -614,6 +617,9 @@ export function cleanServiceGroups(groups) {
         if (type === "wgeasy") {
           if (threshold !== undefined) cleanedService.widget.threshold = parseInt(threshold, 10);
         }
+        if (type === "frigate") {
+          if (enableRecentEvents !== undefined) cleanedService.widget.enableRecentEvents = enableRecentEvents;
+        }
       }
 
       return cleanedService;

src/widgets/components.js

@@ -29,6 +29,7 @@ const components = {
   fileflows: dynamic(() => import("./fileflows/component")),
   flood: dynamic(() => import("./flood/component")),
   freshrss: dynamic(() => import("./freshrss/component")),
+  frigate: dynamic(() => import("./frigate/component")),
   fritzbox: dynamic(() => import("./fritzbox/component")),
   gamedig: dynamic(() => import("./gamedig/component")),
   gatus: dynamic(() => import("./gatus/component")),

src/widgets/frigate/component.jsx

@@ -0,0 +1,70 @@
+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, error } = useWidgetAPI(widget, "stats");
+  const { data: eventsData, error: eventsError } = useWidgetAPI(widget, "events");
+
+  if (error) {
+    return <Container service={service} error={error} />;
+  }
+
+  if (eventsError) {
+    return <Container service={service} error={eventsError} />;
+  }
+
+  if (!data || !eventsData) {
+    return (
+      <Container service={service}>
+        <Block label="frigate.cameras" />
+        <Block label="frigate.uptime" />
+        <Block label="frigate.version" />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Container service={service}>
+        <Block
+          label="frigate.cameras"
+          value={t("common.number", {
+            value: data.num_cameras,
+          })}
+        />
+        <Block
+          label="frigate.uptime"
+          value={t("common.uptime", {
+            value: data.uptime,
+          })}
+        />
+        <Block label="frigate.version" value={data.version} />
+      </Container>
+      {widget.enableRecentEvents &&
+        eventsData?.map((event) => (
+          <div
+            key={event.id}
+            className="text-theme-700 dark:text-theme-200 _relative h-5 rounded-md bg-theme-200/50 dark:bg-theme-900/20 m-1 px-1 flex"
+          >
+            <div className="text-xs z-10 self-center ml-2 relative h-4 grow mr-2">
+              <div className="absolute w-full h-4 whitespace-nowrap text-ellipsis overflow-hidden text-left">
+                {event.camera} ({event.label} {t("common.percent", { value: event.score * 100 })})
+              </div>
+            </div>
+            <div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
+              {t("common.date", {
+                value: event.start_time,
+                formatParams: { value: { timeStyle: "short", dateStyle: "medium" } },
+              })}
+            </div>
+          </div>
+        ))}
+    </>
+  );
+}

src/widgets/frigate/widget.js

@@ -0,0 +1,38 @@
+import { asJson } from "utils/proxy/api-helpers";
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/api/{endpoint}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    stats: {
+      endpoint: "stats",
+      map: (data) => {
+        const jsonData = asJson(data);
+        return {
+          num_cameras: jsonData?.cameras !== undefined ? Object.keys(jsonData?.cameras).length : 0,
+          uptime: jsonData?.service?.uptime,
+          version: jsonData?.service.version,
+        };
+      },
+    },
+    events: {
+      endpoint: "events",
+      map: (data) =>
+        asJson(data)
+          .slice(0, 5)
+          .map((event) => ({
+            id: event.id,
+            camera: event.camera,
+            label: event.label,
+            start_time: new Date(event.start_time * 1000),
+            thumbnail: event.thumbnail,
+            score: event.data.score,
+            type: event.data.type,
+          })),
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -23,6 +23,7 @@ import evcc from "./evcc/widget";
 import fileflows from "./fileflows/widget";
 import flood from "./flood/widget";
 import freshrss from "./freshrss/widget";
+import frigate from "./frigate/widget";
 import fritzbox from "./fritzbox/widget";
 import gamedig from "./gamedig/widget";
 import gatus from "./gatus/widget";
@@ -141,6 +142,7 @@ const widgets = {
   fileflows,
   flood,
   freshrss,
+  frigate,
   fritzbox,
   gamedig,
   gatus,