mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-09-30 20:06:51 +03:00
Compare commits
12
Commits
ceeeddd3ca
...
c72ba5c8c6
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c72ba5c8c6 | ||
|
|
6f80bcd19f | ||
|
|
66984fae52 | ||
|
|
77c0d84735 | ||
|
|
f00dd5c7af | ||
|
|
51dd890eb6 | ||
|
|
8f6e083420 | ||
|
|
bf25560067 | ||
|
|
df40d9e2b5 | ||
|
|
263554a5f6 | ||
|
|
597a9f9fb4 | ||
|
|
0d05f0feaa |
@@ -232,6 +232,21 @@ No. Only one profile can be active at a time. Activating a new profile automatic
|
||||
|
||||
When you delete a base zone or mask in the Frigate UI, any profile overrides for that entry are deleted automatically as part of the same operation. If you remove a base entry by editing your config file directly and leave a profile override behind, the config will fail validation at startup until the orphaned override is removed as well.
|
||||
|
||||
### How do I make a YAML profile track no objects at all?
|
||||
|
||||
Set the tracked object list explicitly to an empty list in the profile:
|
||||
|
||||
```yaml
|
||||
cameras:
|
||||
front_door:
|
||||
profiles:
|
||||
home:
|
||||
objects:
|
||||
track: []
|
||||
```
|
||||
|
||||
Leaving the `objects` section empty (or omitting `track`) does not clear the list. Empty sections set no fields, so the profile inherits the full tracked object list from the base config, including anything set at the global level. The same applies to other lists, such as `audio.listen`.
|
||||
|
||||
### Why are some settings missing when I configure a profile override?
|
||||
|
||||
Fields that require a Frigate restart to take effect cannot be overridden by profiles, since profiles are applied at runtime without restarting. Those fields are hidden when editing a profile override and can only be changed on the base configuration.
|
||||
|
||||
@@ -428,3 +428,19 @@ You'll want to:
|
||||
- [Tune your motion detection settings](/configuration/motion_detection) either by editing your config file or by using the UI's Motion Tuner.
|
||||
|
||||
</FaqItem>
|
||||
|
||||
<FaqItem id="my-timeline-previews-are-black-after-restarting-frigate-or-recreating-the-container" question="My timeline previews are black after restarting Frigate or recreating the container. Why?">
|
||||
|
||||
The scrubbing previews (the timelapse clips shown when dragging the History timeline, the secondary-camera previews, and the preview that plays when hovering a review card) are not recorded continuously. Frigate caches low-resolution preview frames in `/tmp/cache` throughout each hour and only assembles them into a finished preview clip **at the top of the hour**.
|
||||
|
||||
In the recommended configuration, `/tmp/cache` is a small in-memory (`tmpfs`) area. When Frigate starts, it tries to restore the current hour's cached frames, so a **soft restart from the UI** preserves them. But if you recreate the Docker container or stop Frigate forcibly by any other means partway through an hour, the in-memory cache is discarded, so no preview clip is produced for that partial hour.
|
||||
|
||||
This is expected behavior, not a bug:
|
||||
|
||||
- Previews for hours that already completed and were written to disk are unaffected.
|
||||
- The next full hour after a restart will generate previews normally.
|
||||
- This is unrelated to `shm_size`; increasing shared memory does not change it.
|
||||
|
||||
To avoid the gap, use the **Restart Frigate** button in the UI's Settings menu rather than recreating the container when possible.
|
||||
|
||||
</FaqItem>
|
||||
|
||||
@@ -34,7 +34,7 @@ All of your exports live on the **Exports** page, reachable from the main naviga
|
||||
- **Rename** it, and
|
||||
- **Delete** it: deleting is the only way an export is removed.
|
||||
|
||||
You can also select multiple exports at once to **delete** them in bulk, or to **add them to** (or **remove them from**) a [case](#cases).
|
||||
You can also select multiple exports at once to **delete** them in bulk, or to **add them to** (or **remove them from**) a [case](#cases). To download multiple exports as a zip archive, add them to a **case** and use the Download button there.
|
||||
|
||||
## Cases
|
||||
|
||||
|
||||
Vendored
+5
@@ -8244,6 +8244,11 @@ components:
|
||||
properties:
|
||||
provider:
|
||||
$ref: '#/components/schemas/GenAIProviderEnum'
|
||||
name:
|
||||
anyOf:
|
||||
- type: string
|
||||
- type: 'null'
|
||||
title: Name
|
||||
api_key:
|
||||
anyOf:
|
||||
- type: string
|
||||
|
||||
+9
-2
@@ -196,7 +196,7 @@ def genai_models(request: Request):
|
||||
"before saving the configuration."
|
||||
),
|
||||
)
|
||||
async def genai_probe(body: GenAIProbeBody):
|
||||
async def genai_probe(request: Request, body: GenAIProbeBody):
|
||||
load_providers()
|
||||
|
||||
provider_cls = PROVIDERS.get(body.provider)
|
||||
@@ -206,6 +206,13 @@ async def genai_probe(body: GenAIProbeBody):
|
||||
content={"success": False, "message": "Unknown provider"},
|
||||
)
|
||||
|
||||
api_key = body.api_key
|
||||
if api_key == REDACTED_CREDENTIAL_SENTINEL:
|
||||
saved_cfg = (
|
||||
request.app.frigate_config.genai.get(body.name) if body.name else None
|
||||
)
|
||||
api_key = saved_cfg.api_key if saved_cfg else None
|
||||
|
||||
# The OpenAI-compatible SDKs accept "timeout" as a constructor kwarg via
|
||||
# provider_options; other plugins use GenAIClient.timeout passed below.
|
||||
# Don't inject timeout for Gemini — its HttpOptions interprets the value
|
||||
@@ -217,7 +224,7 @@ async def genai_probe(body: GenAIProbeBody):
|
||||
try:
|
||||
transient_cfg = GenAIConfig(
|
||||
provider=body.provider,
|
||||
api_key=body.api_key,
|
||||
api_key=api_key,
|
||||
base_url=body.base_url,
|
||||
provider_options=probe_provider_options,
|
||||
# model is required by the schema but irrelevant for listing.
|
||||
|
||||
@@ -14,6 +14,7 @@ class AppConfigSetBody(BaseModel):
|
||||
|
||||
class GenAIProbeBody(BaseModel):
|
||||
provider: GenAIProviderEnum
|
||||
name: str | None = None
|
||||
api_key: str | None = None
|
||||
base_url: str | None = None
|
||||
provider_options: dict[str, Any] = Field(default_factory=dict)
|
||||
|
||||
@@ -132,6 +132,77 @@ class TestHttpApp(BaseTestHttp):
|
||||
"models": ["fake-model-a", "fake-model-b"],
|
||||
}
|
||||
|
||||
def test_genai_probe_resolves_sentinel_to_saved_api_key(self):
|
||||
# After a save the UI's api_key field holds the redaction sentinel;
|
||||
# the probe must substitute the saved key for the named entry instead
|
||||
# of sending the literal sentinel to the provider (GH discussion 23754).
|
||||
probed_keys: list[str | None] = []
|
||||
|
||||
class CapturingClient(GenAIClient):
|
||||
def list_models(self):
|
||||
probed_keys.append(self.genai_config.api_key)
|
||||
return ["fake-model"]
|
||||
|
||||
self.minimal_config["genai"] = {
|
||||
"llm": {
|
||||
"provider": "openai",
|
||||
"api_key": "sk-saved",
|
||||
"base_url": "https://example.invalid",
|
||||
"model": "fake-model",
|
||||
}
|
||||
}
|
||||
app = super().create_app()
|
||||
|
||||
with (
|
||||
AuthTestClient(app) as client,
|
||||
patch.dict(
|
||||
frigate.genai.PROVIDERS,
|
||||
{GenAIProviderEnum.openai: CapturingClient},
|
||||
),
|
||||
):
|
||||
response = client.post(
|
||||
"/genai/probe",
|
||||
json={
|
||||
"provider": "openai",
|
||||
"name": "llm",
|
||||
"api_key": REDACTED_CREDENTIAL_SENTINEL,
|
||||
"base_url": "https://example.invalid",
|
||||
},
|
||||
)
|
||||
assert response.status_code == 200
|
||||
assert response.json()["success"] is True
|
||||
assert probed_keys == ["sk-saved"]
|
||||
|
||||
def test_genai_probe_sentinel_without_saved_entry_sends_no_key(self):
|
||||
# If the sentinel arrives for an entry that has no saved config, the
|
||||
# probe must drop the key entirely rather than leak the sentinel.
|
||||
probed_keys: list[str | None] = []
|
||||
|
||||
class CapturingClient(GenAIClient):
|
||||
def list_models(self):
|
||||
probed_keys.append(self.genai_config.api_key)
|
||||
return ["fake-model"]
|
||||
|
||||
app = super().create_app()
|
||||
|
||||
with (
|
||||
AuthTestClient(app) as client,
|
||||
patch.dict(
|
||||
frigate.genai.PROVIDERS,
|
||||
{GenAIProviderEnum.openai: CapturingClient},
|
||||
),
|
||||
):
|
||||
response = client.post(
|
||||
"/genai/probe",
|
||||
json={
|
||||
"provider": "openai",
|
||||
"name": "llm",
|
||||
"api_key": REDACTED_CREDENTIAL_SENTINEL,
|
||||
},
|
||||
)
|
||||
assert response.status_code == 200
|
||||
assert probed_keys == [None]
|
||||
|
||||
def test_genai_probe_empty_list_is_treated_as_failure(self):
|
||||
# The plugin's list_models() returns [] on connection failure rather
|
||||
# than raising. The endpoint should surface that as success=false so
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
"1hour": "1 hour",
|
||||
"12hours": "12 hours",
|
||||
"24hours": "24 hours",
|
||||
"custom": "Custom...",
|
||||
"pm": "pm",
|
||||
"am": "am",
|
||||
"yr": "{{time}}yr",
|
||||
|
||||
@@ -1191,8 +1191,15 @@
|
||||
"1hour": "Suspend for 1 hour",
|
||||
"12hours": "Suspend for 12 hours",
|
||||
"24hours": "Suspend for 24 hours",
|
||||
"custom": "Suspend until...",
|
||||
"untilRestart": "Suspend until restart"
|
||||
},
|
||||
"customSuspension": {
|
||||
"title": "Custom suspension time",
|
||||
"description": "Suspend notifications for this camera until the selected time.",
|
||||
"untilLabel": "Suspend until",
|
||||
"invalidTime": "Pick a time in the future."
|
||||
},
|
||||
"cancelSuspension": "Cancel Suspension",
|
||||
"toast": {
|
||||
"success": {
|
||||
|
||||
@@ -23,7 +23,7 @@ import {
|
||||
useState,
|
||||
} from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { LuCheck, LuExternalLink, LuX } from "react-icons/lu";
|
||||
import { LuCheck, LuChevronDown, LuExternalLink, LuX } from "react-icons/lu";
|
||||
import { CiCircleAlert } from "react-icons/ci";
|
||||
import { Link } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
@@ -35,12 +35,12 @@ import {
|
||||
useNotificationTest,
|
||||
} from "@/api/ws";
|
||||
import {
|
||||
Select,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
} from "@/components/ui/select";
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
||||
import { use24HourTime } from "@/hooks/use-date-utils";
|
||||
import FilterSwitch from "@/components/filter/FilterSwitch";
|
||||
@@ -51,6 +51,7 @@ import { useDocDomain } from "@/hooks/use-doc-domain";
|
||||
import { isPWA } from "@/utils/isPWA";
|
||||
import { isIOS } from "react-device-detect";
|
||||
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
|
||||
import CustomSuspensionDialog from "@/components/overlay/dialog/CustomSuspensionDialog";
|
||||
import { useIsAdmin } from "@/hooks/use-is-admin";
|
||||
import { cn } from "@/lib/utils";
|
||||
import cloneDeep from "lodash/cloneDeep";
|
||||
@@ -756,6 +757,8 @@ export function CameraNotificationSwitch({
|
||||
}
|
||||
}, [notificationSuspendUntil, notificationState]);
|
||||
|
||||
const [customDialogOpen, setCustomDialogOpen] = useState(false);
|
||||
|
||||
const handleSuspend = (duration: string) => {
|
||||
setIsSuspended(true);
|
||||
if (duration == "off") {
|
||||
@@ -765,6 +768,11 @@ export function CameraNotificationSwitch({
|
||||
}
|
||||
};
|
||||
|
||||
const handleCustomSuspend = (totalMinutes: number) => {
|
||||
setIsSuspended(true);
|
||||
sendNotificationSuspend(totalMinutes);
|
||||
};
|
||||
|
||||
const handleCancelSuspension = () => {
|
||||
sendNotification("ON");
|
||||
sendNotificationSuspend(0);
|
||||
@@ -824,34 +832,41 @@ export function CameraNotificationSwitch({
|
||||
</div>
|
||||
|
||||
{!isSuspended ? (
|
||||
<Select onValueChange={handleSuspend}>
|
||||
<SelectTrigger className="w-auto">
|
||||
<SelectValue placeholder={t("notification.suspendTime.suspend")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="5">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button size="sm" variant="outline" className="flex gap-2">
|
||||
{t("notification.suspendTime.suspend")}
|
||||
<LuChevronDown className="h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem onClick={() => handleSuspend("5")}>
|
||||
{t("notification.suspendTime.5minutes")}
|
||||
</SelectItem>
|
||||
<SelectItem value="10">
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleSuspend("10")}>
|
||||
{t("notification.suspendTime.10minutes")}
|
||||
</SelectItem>
|
||||
<SelectItem value="30">
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleSuspend("30")}>
|
||||
{t("notification.suspendTime.30minutes")}
|
||||
</SelectItem>
|
||||
<SelectItem value="60">
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleSuspend("60")}>
|
||||
{t("notification.suspendTime.1hour")}
|
||||
</SelectItem>
|
||||
<SelectItem value="840">
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleSuspend("840")}>
|
||||
{t("notification.suspendTime.12hours")}
|
||||
</SelectItem>
|
||||
<SelectItem value="1440">
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleSuspend("1440")}>
|
||||
{t("notification.suspendTime.24hours")}
|
||||
</SelectItem>
|
||||
<SelectItem value="off">
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleSuspend("off")}>
|
||||
{t("notification.suspendTime.untilRestart")}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => setCustomDialogOpen(true)}>
|
||||
{t("notification.suspendTime.custom")}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
) : (
|
||||
<Button
|
||||
variant="destructive"
|
||||
@@ -861,6 +876,12 @@ export function CameraNotificationSwitch({
|
||||
{t("notification.cancelSuspension")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<CustomSuspensionDialog
|
||||
open={customDialogOpen}
|
||||
onOpenChange={setCustomDialogOpen}
|
||||
onConfirm={handleCustomSuspend}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -160,6 +160,7 @@ export function GenAIModelWidget(props: WidgetProps) {
|
||||
try {
|
||||
const res = await axios.post<ProbeResponse>("genai/probe", {
|
||||
provider: formProvider,
|
||||
name: providerKey,
|
||||
api_key:
|
||||
typeof formEntry.api_key === "string" ? formEntry.api_key : null,
|
||||
base_url:
|
||||
|
||||
@@ -50,6 +50,7 @@ import { use24HourTime } from "@/hooks/use-date-utils";
|
||||
import { useIsAdmin } from "@/hooks/use-is-admin";
|
||||
import { CameraNameLabel } from "../camera/FriendlyNameLabel";
|
||||
import { LiveStreamMetadata } from "@/types/live";
|
||||
import CustomSuspensionDialog from "@/components/overlay/dialog/CustomSuspensionDialog";
|
||||
|
||||
type LiveContextMenuProps = {
|
||||
className?: string;
|
||||
@@ -238,6 +239,8 @@ export default function LiveContextMenu({
|
||||
}
|
||||
}, [notificationSuspendUntil, notificationState]);
|
||||
|
||||
const [customDialogOpen, setCustomDialogOpen] = useState(false);
|
||||
|
||||
const handleSuspend = (duration: string) => {
|
||||
if (duration === "off") {
|
||||
sendNotification("OFF");
|
||||
@@ -534,6 +537,16 @@ export default function LiveContextMenu({
|
||||
>
|
||||
{t("time.24hours", { ns: "common" })}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
disabled={!isEnabled}
|
||||
onClick={
|
||||
isEnabled
|
||||
? () => setCustomDialogOpen(true)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{t("time.custom", { ns: "common" })}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
disabled={!isEnabled}
|
||||
onClick={
|
||||
@@ -566,6 +579,12 @@ export default function LiveContextMenu({
|
||||
streamMetadata={streamMetadata}
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
<CustomSuspensionDialog
|
||||
open={customDialogOpen}
|
||||
onOpenChange={setCustomDialogOpen}
|
||||
onConfirm={(minutes) => sendNotificationSuspend(minutes)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -444,10 +444,10 @@ export function ExportContent({
|
||||
}
|
||||
|
||||
setRange({
|
||||
before: latestTime,
|
||||
after: latestTime - 3600,
|
||||
before: currentTime + 1800,
|
||||
after: currentTime - 1800,
|
||||
});
|
||||
}, [activeTab, latestTime, range, setRange]);
|
||||
}, [activeTab, currentTime, range, setRange]);
|
||||
|
||||
const { data: events, isLoading: isEventsLoading } = useSWR<Event[]>(
|
||||
activeTab === "multi" && debouncedRange
|
||||
@@ -817,7 +817,19 @@ export function ExportContent({
|
||||
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(value) => setActiveTab(value as ExportTab)}
|
||||
onValueChange={(value) => {
|
||||
const tab = value as ExportTab;
|
||||
if (tab === "multi") {
|
||||
setRange({
|
||||
before: currentTime + 1800,
|
||||
after: currentTime - 1800,
|
||||
});
|
||||
} else {
|
||||
onSelectTime(selectedOption);
|
||||
}
|
||||
|
||||
setActiveTab(tab);
|
||||
}}
|
||||
className={cn("w-full", !isDesktop && "flex min-h-0 flex-1 flex-col")}
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
|
||||
@@ -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,12 +162,14 @@ type TimezoneAwareCalendarProps = {
|
||||
timezone?: string;
|
||||
selectedDay?: Date;
|
||||
onSelect: (day?: Date) => void;
|
||||
disabled?: ComponentProps<typeof Calendar>["disabled"];
|
||||
recordingsSummary?: RecordingsSummary;
|
||||
};
|
||||
export function TimezoneAwareCalendar({
|
||||
timezone,
|
||||
selectedDay,
|
||||
onSelect,
|
||||
disabled,
|
||||
recordingsSummary,
|
||||
}: TimezoneAwareCalendarProps) {
|
||||
const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);
|
||||
@@ -187,7 +195,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) {
|
||||
@@ -205,6 +213,7 @@ export function TimezoneAwareCalendar({
|
||||
future.setFullYear(tomorrow.getFullYear() + 10);
|
||||
return { from: tomorrow, to: future };
|
||||
}, [timezoneOffset]);
|
||||
const disabledDates = disabled ?? defaultDisabledDates;
|
||||
|
||||
const today = useMemo(() => {
|
||||
if (!timezoneOffset) {
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
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,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { TimezoneAwareCalendar } from "@/components/overlay/ReviewActivityCalendar";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||
|
||||
type CustomSuspensionDialogProps = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onConfirm: (minutes: number) => void;
|
||||
};
|
||||
|
||||
const ONE_HOUR_MS = 60 * 60 * 1000;
|
||||
|
||||
function pad(n: number): string {
|
||||
return n.toString().padStart(2, "0");
|
||||
}
|
||||
|
||||
function isValidDate(d: Date): boolean {
|
||||
return !Number.isNaN(d.getTime());
|
||||
}
|
||||
|
||||
export default function CustomSuspensionDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onConfirm,
|
||||
}: CustomSuspensionDialogProps) {
|
||||
const { t } = useTranslation(["views/settings"]);
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
const [until, setUntil] = useState<Date>(
|
||||
() => new Date(Date.now() + ONE_HOUR_MS),
|
||||
);
|
||||
const [calendarOpen, setCalendarOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) setUntil(new Date(Date.now() + ONE_HOUR_MS));
|
||||
}, [open]);
|
||||
|
||||
const formattedDate = useFormattedTimestamp(
|
||||
isValidDate(until) ? Math.floor(until.getTime() / 1000) : 0,
|
||||
t("time.formattedTimestampMonthDayYear.24hour", { ns: "common" }),
|
||||
config?.ui.timezone,
|
||||
);
|
||||
|
||||
const isFuture = isValidDate(until) && until.getTime() > Date.now();
|
||||
|
||||
const handleApply = () => {
|
||||
if (!isFuture) return;
|
||||
onConfirm(Math.ceil((until.getTime() - Date.now()) / 60_000));
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("notification.customSuspension.title")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t("notification.customSuspension.description")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<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);
|
||||
}}
|
||||
/>
|
||||
</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("button.cancel", { ns: "common" })}
|
||||
</Button>
|
||||
<Button
|
||||
variant="select"
|
||||
type="button"
|
||||
disabled={!isFuture}
|
||||
onClick={handleApply}
|
||||
>
|
||||
{t("button.apply", { ns: "common" })}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user