diff --git a/docs/widgets/services/frigate.md b/docs/widgets/services/frigate.md index 46b180434..de3d49798 100644 --- a/docs/widgets/services/frigate.md +++ b/docs/widgets/services/frigate.md @@ -1,17 +1,17 @@ --- - title: Frigate - description: Frigate Widget Configuration - --- +title: Frigate +description: Frigate Widget Configuration +--- - Learn more about [Frigate](https://frigate.video/). +Learn more about [Frigate](https://frigate.video/). - Allowed fields: `["cameras", "uptime", "version"]`. +Allowed fields: `["cameras", "uptime", "version"]`. - A recent event listing is disabled by default, but can be enabled with the `enableRecentEvents` option. +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 +```yaml +widget: + type: frigate + url: http://frigate.host.or.ip:port + enableRecentEvents: true +``` diff --git a/src/widgets/frigate/component.jsx b/src/widgets/frigate/component.jsx index 27bcbeaf7..685a8c489 100644 --- a/src/widgets/frigate/component.jsx +++ b/src/widgets/frigate/component.jsx @@ -6,7 +6,7 @@ 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" }); @@ -20,19 +20,20 @@ function Event({ camera, label, startTime, score, type, thumbnail }) {
{dateFormatter.format(new Date(startTime))}
- {thumbnail && + {thumbnail && ( } + /> + )} ); -}; +} 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"); @@ -52,7 +53,7 @@ export default function Component({ service }) { ); - }; + } return ( <> @@ -69,25 +70,20 @@ export default function Component({ service }) { value: data.uptime, })} /> - + {widget.enableRecentEvents && - (eventsData?.map(event => ( - - )) - ) - } + eventsData?.map((event) => ( + + ))} ); } diff --git a/src/widgets/frigate/widget.js b/src/widgets/frigate/widget.js index d3c51a173..10eed2089 100644 --- a/src/widgets/frigate/widget.js +++ b/src/widgets/frigate/widget.js @@ -7,7 +7,7 @@ const widget = { proxyHandler: genericProxyHandler, mappings: { - "stats": { + stats: { endpoint: "stats", map: (data) => { const jsonData = asJson(data); @@ -15,24 +15,24 @@ const widget = { num_cameras: jsonData?.cameras !== undefined ? Object.keys(jsonData?.cameras).length : 0, uptime: jsonData?.service?.uptime, version: jsonData?.service.version, - } + }; }, }, - "events": { + events: { endpoint: "events", - map: (data) => asJson(data) + 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 - }) - ) - } + .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, + })), + }, }, };