administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-06-21 03:41:55 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Review changes

Browse Source
This commit is contained in:
Dmitry Marchuk 2026-05-23 21:32:02 +03:00
parent 263554a5f6
commit df40d9e2b5
6 changed files with 137 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/public/locales/en/common.json
View File

@ -21,7 +21,7 @@
"1hour": "1 hour",
"12hours": "12 hours",
"24hours": "24 hours",
"custom": "Custom\u2026",
"custom": "Custom...",
"pm": "pm",
"am": "am",
"yr": "{{time}}yr",

12
web/public/locales/en/views/settings.json
View File

@ -1083,20 +1083,14 @@
"1hour": "Suspend for 1 hour",
"12hours": "Suspend for 12 hours",
"24hours": "Suspend for 24 hours",
"custom": "Suspend for custom time\u2026",
"custom": "Suspend until...",
"untilRestart": "Suspend until restart"
},
"customSuspension": {
"title": "Custom suspension time",
"description": "Choose how long notifications should stay suspended for this camera.",
"tabDuration": "Duration",
"tabUntilTime": "Until time",
"hours": "Hours",
"minutes": "Minutes",
"description": "Suspend notifications for this camera until the selected time.",
"untilLabel": "Suspend until",
"invalidTime": "Pick a time in the future.",
"apply": "Apply",
"cancel": "Cancel"
"invalidTime": "Pick a time in the future."
},
"cancelSuspension": "Cancel Suspension",
"toast": {

83
web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
View File

@ -740,16 +740,8 @@ export function CameraNotificationSwitch({
}, [notificationSuspendUntil, notificationState]);
const [customDialogOpen, setCustomDialogOpen] = useState(false);
// Doesn't actually represent the state of the Select
// Workaround for CustomSuspensionDialog (explained below at setSelectValue call site).
const [selectValue, setSelectValue] = useState<string>("");
const handleSuspend = (duration: string) => {
if (duration === "custom") {
setSelectValue("custom");
setCustomDialogOpen(true);
return;
}
setIsSuspended(true);
if (duration == "off") {
sendNotification("OFF");
@ -822,37 +814,41 @@ export function CameraNotificationSwitch({
</div>
{!isSuspended ? (
<Select value={selectValue} onValueChange={handleSuspend}>
<SelectTrigger className="w-auto">
<SelectValue placeholder={t("notification.suspendTime.suspend")} />
</SelectTrigger>
<SelectContent>
<SelectItem value="5">
{t("notification.suspendTime.5minutes")}
</SelectItem>
<SelectItem value="10">
{t("notification.suspendTime.10minutes")}
</SelectItem>
<SelectItem value="30">
{t("notification.suspendTime.30minutes")}
</SelectItem>
<SelectItem value="60">
{t("notification.suspendTime.1hour")}
</SelectItem>
<SelectItem value="840">
{t("notification.suspendTime.12hours")}
</SelectItem>
<SelectItem value="1440">
{t("notification.suspendTime.24hours")}
</SelectItem>
<SelectItem value="custom">
{t("notification.suspendTime.custom")}
</SelectItem>
<SelectItem value="off">
{t("notification.suspendTime.untilRestart")}
</SelectItem>
</SelectContent>
</Select>
<div className="flex items-center gap-2">
<Select onValueChange={handleSuspend}>
<SelectTrigger className="w-auto">
<SelectValue
placeholder={t("notification.suspendTime.suspend")}
/>
</SelectTrigger>
<SelectContent>
<SelectItem value="5">
{t("notification.suspendTime.5minutes")}
</SelectItem>
<SelectItem value="10">
{t("notification.suspendTime.10minutes")}
</SelectItem>
<SelectItem value="30">
{t("notification.suspendTime.30minutes")}
</SelectItem>
<SelectItem value="60">
{t("notification.suspendTime.1hour")}
</SelectItem>
<SelectItem value="840">
{t("notification.suspendTime.12hours")}
</SelectItem>
<SelectItem value="1440">
{t("notification.suspendTime.24hours")}
</SelectItem>
<SelectItem value="off">
{t("notification.suspendTime.untilRestart")}
</SelectItem>
</SelectContent>
</Select>
<Button size="sm" onClick={() => setCustomDialogOpen(true)}>
{t("notification.suspendTime.custom")}
</Button>
</div>
) : (
<Button
variant="destructive"
@ -865,14 +861,7 @@ export function CameraNotificationSwitch({
<CustomSuspensionDialog
open={customDialogOpen}
onOpenChange={(open) => {
setCustomDialogOpen(open);
// Radix treats `undefined` as "uncontrolled", which keeps the last
// internal selection. This results in an option "Suspend for custom time..." still
// being selected if the CustomSuspensionDialog is closed without applying the suspension
// So we explicitly set "" on CustomSuspensionDialog closure
if (!open) setSelectValue("");
}}
onOpenChange={setCustomDialogOpen}
onConfirm={handleCustomSuspend}
/>
</div>

6
web/src/components/menu/LiveContextMenu.tsx
View File

@ -242,10 +242,6 @@ export default function LiveContextMenu({
const [customDialogOpen, setCustomDialogOpen] = useState(false);
const handleSuspend = (duration: string) => {
if (duration === "custom") {
setCustomDialogOpen(true);
return;
}
if (duration === "off") {
sendNotification("OFF");
} else {
@ -545,7 +541,7 @@ export default function LiveContextMenu({
disabled={!isEnabled}
onClick={
isEnabled
? () => handleSuspend("custom")
? () => setCustomDialogOpen(true)
: undefined
}
>

13
web/src/components/overlay/ReviewActivityCalendar.tsx
View File

@ -1,6 +1,12 @@
import { RecordingsSummary, ReviewSummary } from "@/types/review";
import { Calendar } from "../ui/calendar";
import { ButtonHTMLAttributes, useEffect, useMemo, useRef } from "react";
import {
ButtonHTMLAttributes,
ComponentProps,
useEffect,
useMemo,
useRef,
} from "react";
import { FaCircle } from "react-icons/fa";
import { getUTCOffset } from "@/utils/dateUtil";
import { type DayButtonProps } from "react-day-picker";
@ -156,11 +162,13 @@ type TimezoneAwareCalendarProps = {
timezone?: string;
selectedDay?: Date;
onSelect: (day?: Date) => void;
disabled?: ComponentProps<typeof Calendar>["disabled"];
};
export function TimezoneAwareCalendar({
timezone,
selectedDay,
onSelect,
disabled,
}: TimezoneAwareCalendarProps) {
const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);
@ -169,7 +177,7 @@ export function TimezoneAwareCalendar({
timezone ? Math.round(getUTCOffset(new Date(), timezone)) : undefined,
[timezone],
);
const disabledDates = useMemo(() => {
const defaultDisabledDates = useMemo(() => {
const tomorrow = new Date();
if (timezoneOffset) {
@ -187,6 +195,7 @@ export function TimezoneAwareCalendar({
future.setFullYear(tomorrow.getFullYear() + 10);
return { from: tomorrow, to: future };
}, [timezoneOffset]);
const disabledDates = disabled ?? defaultDisabledDates;
const today = useMemo(() => {
if (!timezoneOffset) {

239
web/src/components/overlay/dialog/CustomSuspensionDialog.tsx
View File

@ -1,7 +1,8 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { isDesktop } from "react-device-detect";
import { FaCalendarAlt } from "react-icons/fa";
import useSWR from "swr";
import { Button } from "@/components/ui/button";
import {
Dialog,
@ -11,15 +12,15 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Label } from "@/components/ui/label";
import { Calendar } from "@/components/ui/calendar";
import { TimezoneAwareCalendar } from "@/components/overlay/ReviewActivityCalendar";
import { FrigateConfig } from "@/types/frigateConfig";
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
type CustomSuspensionDialogProps = {
open: boolean;
@ -37,53 +38,36 @@ function isValidDate(d: Date): boolean {
return !Number.isNaN(d.getTime());
}
function parsePositive(value: string): number {
const n = Number.parseInt(value, 10);
if (Number.isNaN(n)) return 0;
return Math.max(0, n);
}
type Tabs = "duration" | "untilTime";
export default function CustomSuspensionDialog({
open,
onOpenChange,
onConfirm,
}: CustomSuspensionDialogProps) {
const { t } = useTranslation(["views/settings"]);
const { data: config } = useSWR<FrigateConfig>("config");
const [tab, setTab] = useState<Tabs>("duration");
const [hours, setHours] = useState<number>(1);
const [minutes, setMinutes] = useState<number>(0);
const [until, setUntil] = useState<Date>(
() => new Date(Date.now() + ONE_HOUR_MS),
);
const [calendarOpen, setCalendarOpen] = useState(false);
// Reset to defaults whenever the dialog re-opens.
useEffect(() => {
if (!open) return;
setTab("duration");
setHours(1);
setMinutes(0);
setUntil(new Date(Date.now() + ONE_HOUR_MS));
if (open) setUntil(new Date(Date.now() + ONE_HOUR_MS));
}, [open]);
const totalMinutes = useMemo(() => {
if (tab === "duration") {
return Math.max(0, Math.floor(hours) * 60 + Math.floor(minutes));
}
if (!isValidDate(until)) return 0;
return Math.ceil((until.getTime() - Date.now()) / 60_000);
}, [hours, minutes, tab, until]);
const formattedDate = useFormattedTimestamp(
isValidDate(until) ? Math.floor(until.getTime() / 1000) : 0,
t("time.formattedTimestampMonthDayYear.24hour", { ns: "common" }),
config?.ui.timezone,
);
const canApply = useMemo(() => totalMinutes > 0, [totalMinutes]);
const isFuture = isValidDate(until) && until.getTime() > Date.now();
const handleApply = useCallback(() => {
if (!canApply) return;
onConfirm(totalMinutes);
const handleApply = () => {
if (!isFuture) return;
onConfirm(Math.ceil((until.getTime() - Date.now()) / 60_000));
onOpenChange(false);
}, [canApply, onConfirm, onOpenChange, totalMinutes]);
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
@ -95,139 +79,86 @@ export default function CustomSuspensionDialog({
</DialogDescription>
</DialogHeader>
<Tabs value={tab} onValueChange={(v) => setTab(v as Tabs)}>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="duration">
{t("notification.customSuspension.tabDuration")}
</TabsTrigger>
<TabsTrigger value="untilTime">
{t("notification.customSuspension.tabUntilTime")}
</TabsTrigger>
</TabsList>
<TabsContent value="duration" className="pt-4">
<div className="flex gap-4">
<div className="flex flex-col gap-1">
<Label htmlFor="suspend-hours">
{t("notification.customSuspension.hours")}
</Label>
<Input
id="suspend-hours"
type="number"
min={0}
max={999}
value={hours}
onChange={(e) => setHours(parsePositive(e.target.value))}
/>
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="suspend-minutes">
{t("notification.customSuspension.minutes")}
</Label>
<Input
id="suspend-minutes"
type="number"
min={0}
max={59}
value={minutes}
onChange={(e) => setMinutes(parsePositive(e.target.value))}
/>
</div>
</div>
</TabsContent>
<TabsContent value="untilTime" className="pt-4">
<div className="flex flex-col gap-2">
<Label>{t("notification.customSuspension.untilLabel")}</Label>
<div className="flex items-center gap-2 rounded-lg bg-secondary p-2 text-secondary-foreground">
<FaCalendarAlt />
<Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
<PopoverTrigger asChild>
<Button
className={`text-primary ${isDesktop ? "" : "text-xs"}`}
variant={calendarOpen ? "select" : "default"}
size="sm"
>
{isValidDate(until)
? until.toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
})
: "—"}
</Button>
</PopoverTrigger>
<PopoverContent
className="flex flex-col items-center"
disablePortal
>
<Calendar
mode="single"
selected={isValidDate(until) ? until : undefined}
disabled={{
before: new Date(new Date().setHours(0, 0, 0, 0)),
}}
onSelect={(day) => {
if (!day) return;
const next = new Date(day);
// If `until` is invalid, don't propagate
// NaN hours/minutes into the new date - fall back to now.
const carry = isValidDate(until) ? until : new Date();
next.setHours(
carry.getHours(),
carry.getMinutes(),
carry.getSeconds(),
0,
);
setUntil(next);
setCalendarOpen(false);
}}
/>
</PopoverContent>
</Popover>
<input
className="text-md border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
aria-label={t("notification.customSuspension.untilLabel")}
type="time"
value={
isValidDate(until)
? `${pad(until.getHours())}:${pad(until.getMinutes())}`
: ""
}
step="60"
onChange={(e) => {
// Ignore anything that doesn't parse to a real HH:MM pair.
const [h, m] = e.target.value.split(":");
const hh = Number.parseInt(h ?? "", 10);
const mm = Number.parseInt(m ?? "", 10);
if (Number.isNaN(hh) || Number.isNaN(mm)) return;
const base = isValidDate(until) ? until : new Date();
const next = new Date(base);
next.setHours(hh, mm, 0, 0);
<div className="flex flex-col gap-2">
<Label>{t("notification.customSuspension.untilLabel")}</Label>
<div className="flex items-center gap-2 rounded-lg bg-secondary p-2 text-secondary-foreground">
<FaCalendarAlt />
<Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
<PopoverTrigger asChild>
<Button
className={`text-primary ${isDesktop ? "" : "text-xs"}`}
variant={calendarOpen ? "select" : "default"}
size="sm"
>
{isValidDate(until) ? formattedDate : "—"}
</Button>
</PopoverTrigger>
<PopoverContent
className="flex flex-col items-center"
disablePortal
>
<TimezoneAwareCalendar
timezone={config?.ui.timezone}
selectedDay={isValidDate(until) ? until : undefined}
disabled={{
before: new Date(new Date().setHours(0, 0, 0, 0)),
}}
onSelect={(day) => {
if (!day) return;
const next = new Date(day);
const carry = isValidDate(until) ? until : new Date();
next.setHours(
carry.getHours(),
carry.getMinutes(),
carry.getSeconds(),
0,
);
setUntil(next);
setCalendarOpen(false);
}}
/>
</div>
{!canApply && (
<p className="text-sm text-danger">
{t("notification.customSuspension.invalidTime")}
</p>
)}
</div>
</TabsContent>
</Tabs>
</PopoverContent>
</Popover>
<input
className="text-md border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
aria-label={t("notification.customSuspension.untilLabel")}
type="time"
value={
isValidDate(until)
? `${pad(until.getHours())}:${pad(until.getMinutes())}`
: ""
}
step="60"
onChange={(e) => {
const [h, m] = e.target.value.split(":");
const hh = Number.parseInt(h ?? "", 10);
const mm = Number.parseInt(m ?? "", 10);
if (Number.isNaN(hh) || Number.isNaN(mm)) return;
const base = isValidDate(until) ? until : new Date();
const next = new Date(base);
next.setHours(hh, mm, 0, 0);
setUntil(next);
}}
/>
</div>
{!isFuture && (
<p className="text-sm text-danger">
{t("notification.customSuspension.invalidTime")}
</p>
)}
</div>
<DialogFooter>
<Button type="button" onClick={() => onOpenChange(false)}>
{t("notification.customSuspension.cancel")}
{t("button.cancel", { ns: "common" })}
</Button>
<Button
variant="select"
type="button"
disabled={!canApply}
disabled={!isFuture}
onClick={handleApply}
>
{t("notification.customSuspension.apply")}
{t("button.apply", { ns: "common" })}
</Button>
</DialogFooter>
</DialogContent>