From 40e9b469f3ee43df68f5f986bba4c1a6c8322c13 Mon Sep 17 00:00:00 2001
From: Jamie Norton <jamie@norton.net.nz>
Date: Sun, 14 Jul 2024 23:15:20 +1200
Subject: [PATCH] Option to display most recent events.

---
 docs/widgets/services/frigate.md    |  3 +
 src/utils/config/service-helpers.js |  6 ++
 src/widgets/frigate/component.jsx   | 86 ++++++++++++++++++++++-------
 src/widgets/frigate/widget.js       | 15 +++++
 4 files changed, 90 insertions(+), 20 deletions(-)

diff --git a/docs/widgets/services/frigate.md b/docs/widgets/services/frigate.md
index 53421ab43..46b180434 100644
--- a/docs/widgets/services/frigate.md
+++ b/docs/widgets/services/frigate.md
@@ -7,8 +7,11 @@
 
  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
  ```
\ No newline at end of file
diff --git a/src/utils/config/service-helpers.js b/src/utils/config/service-helpers.js
index 75d31add0..03b4507ea 100644
--- a/src/utils/config/service-helpers.js
+++ b/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;
diff --git a/src/widgets/frigate/component.jsx b/src/widgets/frigate/component.jsx
index f74b95a8e..27bcbeaf7 100644
--- a/src/widgets/frigate/component.jsx
+++ b/src/widgets/frigate/component.jsx
@@ -4,17 +4,47 @@ import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
+function Event({ camera, label, startTime, score, type, thumbnail }) {
+  const { i18n } = useTranslation();
+  
+  const dateFormatter = new Intl.DateTimeFormat(i18n.language, { timeStyle: "short", dateStyle: "medium" });
+  const percentFormatter = new Intl.NumberFormat(i18n.language, { style: "percent" });
+
+  return (
+    <div className="group 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">
+          {camera} ({label} {percentFormatter.format(score)})
+        </div>
+      </div>
+      <div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
+        {dateFormatter.format(new Date(startTime))}
+      </div>
+      {thumbnail &&
+        <img
+          src={`data:image/png;base64, ${thumbnail}`}
+          className="absolute top-0 right-0 w-1/2 z-50 invisible group-hover:visible"
+        />}
+    </div>
+  );
+};
+
 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 (!data) {
+  if (eventsError) {
+    return <Container service={service} error={eventsError} />;
+  }
+
+  if (!data || !eventsData) {
     return (
       <Container service={service}>
         <Block label="frigate.cameras" />
@@ -25,23 +55,39 @@ export default function Component({ service }) {
   };
 
   return (
-    <Container service={service}>
-      <Block
-        label={data.num_cameras === 1 ? "frigate.camera" : "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>
+    <>
+      <Container service={service}>
+        <Block
+          label={data.num_cameras === 1 ? "frigate.camera" : "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 => (
+            <Event
+              camera={event.camera}
+              label={event.label}
+              startTime={event.start_time}
+              score={event.score}
+              type={event.type}
+              thumbnail={event.thumbnail}
+              key={event.id}
+            />
+          ))
+        )
+      }
+    </>
   );
 }
diff --git a/src/widgets/frigate/widget.js b/src/widgets/frigate/widget.js
index 4edcc5f77..d3c51a173 100644
--- a/src/widgets/frigate/widget.js
+++ b/src/widgets/frigate/widget.js
@@ -18,6 +18,21 @@ const widget = {
         }
       },
     },
+    "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
+          })
+        )
+    }
   },
 };