Merge 8f6e083420 into 47a06c8b30

* add ptz presets and default role widgets

* language tweaks

* fix width in triggers view

* tweak iOS PWA message in notifications settings

* deprecate ui.date_style and ui.time_style

these have been unused since date/time formatting has been pushed to i18n

* add config migrator to remove date_style and time_style

* remove date_style and time_style from reference config

* fix camera list scrolling in state classification wizard on mobile

.devcontainer/devcontainer.json

@@ -6,19 +6,8 @@
   "initializeCommand": ".devcontainer/initialize.sh",
   "postCreateCommand": ".devcontainer/post_create.sh",
   "overrideCommand": false,
-  "remoteUser": "vscode",
-  "features": {
-    "ghcr.io/devcontainers/features/common-utils:2": {}
-    // Uncomment the following lines to use ONNX Runtime with CUDA support
-    // "ghcr.io/devcontainers/features/nvidia-cuda:1": {
-    //   "installCudnn": true,
-    //   "installNvtx": true,
-    //   "installToolkit": true,
-    //   "cudaVersion": "12.5",
-    //   "cudnnVersion": "9.4.0.58"
-    // },
-    // "./features/onnxruntime-gpu": {}
-  },
+  "remoteUser": "root",
+  "features": {},
   "forwardPorts": [
     8971,
     5000,

.devcontainer/post_create.sh

@@ -13,8 +13,12 @@ fi
 # Frigate normal container runs as root, so it have permission to create
 # the folders. But the devcontainer runs as the host user, so we need to
 # create the folders and give the host user permission to write to them.
-sudo mkdir -p /media/frigate
-sudo chown -R "$(id -u):$(id -g)" /media/frigate
+SUDO=""
+if [[ $EUID -ne 0 ]]; then
+  SUDO="sudo"
+fi
+$SUDO mkdir -p /media/frigate
+$SUDO chown -R "$(id -u):$(id -g)" /media/frigate
 
 # When started as a service, LIBAVFORMAT_VERSION_MAJOR is defined in the
 # s6 service file. For dev, where frigate is started from an interactive

docs/docs/configuration/reference.md

@@ -1083,22 +1083,6 @@ ui:
   # Optional: Set the time format used.
   # Options are browser, 12hour, or 24hour (default: shown below)
   time_format: browser
-  # Optional: Set the date style for a specified length.
-  # Options are: full, long, medium, short
-  # Examples:
-  #    short: 2/11/23
-  #    medium: Feb 11, 2023
-  #    full: Saturday, February 11, 2023
-  # (default: shown below).
-  date_style: short
-  # Optional: Set the time style for a specified length.
-  # Options are: full, long, medium, short
-  # Examples:
-  #    short: 8:14 PM
-  #    medium: 8:15:22 PM
-  #    full: 8:15:22 PM Mountain Standard Time
-  # (default: shown below).
-  time_style: medium
   # Optional: Set the unit system to either "imperial" or "metric" (default: metric)
   # Used in the UI and in MQTT topics
   unit_system: metric

frigate/config/camera/camera.py

@@ -146,7 +146,7 @@ class CameraConfig(FrigateBaseModel):
     timestamp_style: TimestampStyleConfig = Field(
         default_factory=TimestampStyleConfig,
         title="Timestamp style",
-        description="Styling options for in-feed timestamps applied to recordings and snapshots.",
+        description="Styling options for timestamps applied to snapshots and Debug view.",
     )
 
     # Options without global fallback

frigate/config/proxy.py

@@ -45,7 +45,7 @@ class ProxyConfig(FrigateBaseModel):
     default_role: Optional[str] = Field(
         default="viewer",
         title="Default role",
-        description="Default role assigned to proxy-authenticated users when no role mapping applies (admin or viewer).",
+        description="Default role assigned to proxy-authenticated users when no role mapping applies.",
     )
     separator: Optional[str] = Field(
         default=",",

frigate/config/ui.py

@@ -5,7 +5,7 @@ from pydantic import Field
 
 from .base import FrigateBaseModel
 
-__all__ = ["TimeFormatEnum", "DateTimeStyleEnum", "UnitSystemEnum", "UIConfig"]
+__all__ = ["TimeFormatEnum", "UnitSystemEnum", "UIConfig"]
 
 
 class TimeFormatEnum(str, Enum):
@@ -14,13 +14,6 @@ class TimeFormatEnum(str, Enum):
     hours24 = "24hour"
 
 
-class DateTimeStyleEnum(str, Enum):
-    full = "full"
-    long = "long"
-    medium = "medium"
-    short = "short"
-
-
 class UnitSystemEnum(str, Enum):
     imperial = "imperial"
     metric = "metric"
@@ -37,16 +30,6 @@ class UIConfig(FrigateBaseModel):
         title="Time format",
         description="Time format to use in the UI (browser, 12hour, or 24hour).",
     )
-    date_style: DateTimeStyleEnum = Field(
-        default=DateTimeStyleEnum.short,
-        title="Date style",
-        description="Date style to use in the UI (full, long, medium, short).",
-    )
-    time_style: DateTimeStyleEnum = Field(
-        default=DateTimeStyleEnum.medium,
-        title="Time style",
-        description="Time style to use in the UI (full, long, medium, short).",
-    )
     unit_system: UnitSystemEnum = Field(
         default=UnitSystemEnum.metric,
         title="Unit system",

frigate/util/config.py

@@ -618,6 +618,16 @@ def migrate_018_0(config: dict[str, dict[str, Any]]) -> dict[str, dict[str, Any]
 
         new_config["cameras"][name] = camera_config
 
+    # Remove deprecated date_style and time_style from global ui config
+    global_ui = new_config.get("ui", {})
+    if global_ui.get("date_style") is not None:
+        del new_config["ui"]["date_style"]
+    if global_ui.get("time_style") is not None:
+        del new_config["ui"]["time_style"]
+    # Remove ui section if empty
+    if "ui" in new_config and not new_config["ui"]:
+        del new_config["ui"]
+
     new_config["version"] = "0.18-0"
     return new_config
 

web/public/locales/en/common.json

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

web/public/locales/en/config/cameras.json

@@ -682,7 +682,7 @@
   },
   "timestamp_style": {
     "label": "Timestamp style",
-    "description": "Styling options for in-feed timestamps applied to recordings and snapshots.",
+    "description": "Styling options for timestamps applied to snapshots and Debug view.",
     "position": {
       "label": "Timestamp position",
       "description": "Position of the timestamp on the image (tl/tr/bl/br)."

web/public/locales/en/config/global.json

@@ -212,7 +212,7 @@
     },
     "default_role": {
       "label": "Default role",
-      "description": "Default role assigned to proxy-authenticated users when no role mapping applies (admin or viewer)."
+      "description": "Default role assigned to proxy-authenticated users when no role mapping applies."
     },
     "separator": {
       "label": "Separator character",
@@ -270,14 +270,6 @@
       "label": "Time format",
       "description": "Time format to use in the UI (browser, 12hour, or 24hour)."
     },
-    "date_style": {
-      "label": "Date style",
-      "description": "Date style to use in the UI (full, long, medium, short)."
-    },
-    "time_style": {
-      "label": "Time style",
-      "description": "Time style to use in the UI (full, long, medium, short)."
-    },
     "unit_system": {
       "label": "Unit system",
       "description": "Unit system for display (metric or imperial) used in the UI and MQTT."

web/public/locales/en/views/settings.json

@@ -1154,7 +1154,8 @@
     },
     "notificationUnavailable": {
       "title": "Notifications Unavailable",
-      "desc": "Web push notifications require a secure context (<code>https://…</code>). This is a browser limitation. Access Frigate securely to use notifications."
+      "desc": "Web push notifications require a secure context (<code>https://…</code>). This is a browser limitation. Access Frigate securely to use notifications.",
+      "descPwa": "On iOS, web push notifications are only available when Frigate is installed to your Home Screen. Open the <strong>Share</strong> menu, choose <strong>Add to Home Screen</strong>, then open Frigate from the new icon to register this device for notifications."
     },
     "globalSettings": {
       "title": "Global Settings",
@@ -1186,8 +1187,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": {
@@ -1674,6 +1682,17 @@
       "refresh": "Refresh models",
       "probeFailed": "Failed to probe models",
       "fetchedModels": "Successfully fetched model list"
+    },
+    "ptzPresets": {
+      "placeholder": "Select or enter a preset...",
+      "search": "Search or enter a preset...",
+      "noPresets": "No presets available",
+      "available": "Camera presets",
+      "useCustom": "Use \"{{value}}\""
+    },
+    "defaultRole": {
+      "admin": "Admin",
+      "viewer": "Viewer"
     }
   },
   "globalConfig": {
@@ -1763,7 +1782,7 @@
     "addStream": "Add stream",
     "addStreamDesc": "Enter a name for the new stream. This name will be used to reference the stream in your camera configuration.",
     "addUrl": "Add URL",
-    "streamNumber": "Stream {{index}}",
+    "sourceNumber": "Source {{index}}",
     "streamName": "Stream name",
     "streamNamePlaceholder": "e.g., front_door",
     "streamUrlPlaceholder": "e.g., rtsp://user:pass@192.168.1.100/stream",
@@ -1840,12 +1859,6 @@
       "12hour": "12 hour",
       "24hour": "24 hour"
     },
-    "TimeOrDateStyle": {
-      "full": "Full",
-      "long": "Long",
-      "medium": "Medium",
-      "short": "Short"
-    },
     "unitSystem": {
       "metric": "Metric",
       "imperial": "Imperial"
@@ -1928,6 +1941,9 @@
     },
     "semanticSearch": {
       "jinav2SmallModelSize": "The 'small' size with the Jina V2 model has high RAM and inference cost. The 'large' model with a discrete GPU is recommended."
+    },
+    "onvif": {
+      "autotrackingNoZones": "Autotracking requires at least one zone. Define a zone for this camera in Masks / Zones, then set it as a required zone below."
     }
   }
 }

web/src/components/classification/wizard/Step2StateArea.tsx

@@ -51,6 +51,7 @@ export default function Step2StateArea({
   const [imageLoaded, setImageLoaded] = useState(false);
 
   const containerRef = useRef<HTMLDivElement>(null);
+  const popoverContainerRef = useRef<HTMLDivElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
   const stageRef = useRef<Konva.Stage>(null);
   const rectRef = useRef<Konva.Rect>(null);
@@ -224,7 +225,7 @@ export default function Step2StateArea({
   const canContinue = cameraAreas.length > 0;
 
   return (
-    <div className="flex flex-col gap-4">
+    <div ref={popoverContainerRef} className="flex flex-col gap-4">
       <div
         className={cn(
           "flex gap-4 overflow-hidden",
@@ -255,6 +256,7 @@ export default function Step2StateArea({
                   className="scrollbar-container w-64 border bg-background p-3 shadow-lg"
                   align="start"
                   sideOffset={5}
+                  container={popoverContainerRef.current}
                   onOpenAutoFocus={(e) => e.preventDefault()}
                 >
                   <div className="flex flex-col gap-2">

web/src/components/config-form/section-configs/onvif.ts

@@ -25,6 +25,24 @@ const onvif: SectionConfigOverrides = {
     advancedFields: ["tls_insecure", "ignore_time_mismatch"],
     overrideFields: [],
     restartRequired: ["autotracking.calibrate_on_startup"],
+    fieldMessages: [
+      {
+        key: "autotracking-no-zones",
+        field: "autotracking.required_zones",
+        messageKey: "configMessages.onvif.autotrackingNoZones",
+        severity: "error",
+        position: "before",
+        condition: (ctx) => {
+          if (ctx.level !== "camera") return false;
+          const zones = ctx.fullCameraConfig?.zones;
+          return (
+            !zones ||
+            typeof zones !== "object" ||
+            Object.keys(zones).length === 0
+          );
+        },
+      },
+    ],
     uiSchema: {
       host: {
         "ui:options": { size: "sm" },
@@ -39,11 +57,16 @@ const onvif: SectionConfigOverrides = {
         required_zones: {
           "ui:widget": "zoneNames",
         },
+        return_preset: {
+          "ui:options": { size: "sm" },
+          "ui:widget": "ptzPresets",
+        },
         track: {
           "ui:widget": "objectLabels",
         },
         zooming: {
           "ui:options": {
+            size: "xs",
             enumI18nPrefix: "onvif.autotracking.zooming",
           },
         },

web/src/components/config-form/section-configs/proxy.ts

@@ -21,6 +21,10 @@ const proxy: SectionConfigOverrides = {
         "ui:widget": "password",
         "ui:options": { size: "md" },
       },
+      default_role: {
+        "ui:widget": "defaultRole",
+        "ui:options": { size: "sm" },
+      },
       header_map: {
         "ui:after": { render: "ProxyRoleMap" },
       },

web/src/components/config-form/section-configs/ui.ts

@@ -10,13 +10,7 @@ const ui: SectionConfigOverrides = {
     overrideFields: [],
   },
   global: {
-    fieldOrder: [
-      "timezone",
-      "time_format",
-      "date_style",
-      "time_style",
-      "unit_system",
-    ],
+    fieldOrder: ["timezone", "time_format", "unit_system"],
     advancedFields: [],
     restartRequired: ["unit_system"],
     uiSchema: {
@@ -26,12 +20,6 @@ const ui: SectionConfigOverrides = {
       time_format: {
         "ui:options": { enumI18nPrefix: "ui.timeFormat" },
       },
-      date_style: {
-        "ui:options": { enumI18nPrefix: "ui.TimeOrDateStyle" },
-      },
-      time_style: {
-        "ui:options": { enumI18nPrefix: "ui.TimeOrDateStyle" },
-      },
       unit_system: {
         "ui:options": { enumI18nPrefix: "ui.unitSystem" },
       },

web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx

@@ -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";
@@ -48,7 +48,10 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Trans, useTranslation } from "react-i18next";
 import { useDateLocale } from "@/hooks/use-date-locale";
 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";
@@ -437,6 +440,12 @@ export default function NotificationsSettingsExtras({
   }
 
   if (!("Notification" in window) || !window.isSecureContext) {
+    // iOS only exposes web push to apps installed to the Home Screen, so a
+    // secure-context iOS browser tab that isn't an installed PWA has no
+    // Notification API. Android supports web push in a normal tab, so it never
+    // reaches this case and keeps the generic secure-context message.
+    const requiresPwaInstall = isIOS && window.isSecureContext && !isPWA;
+
     return (
       <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
         <div className="w-full max-w-5xl">
@@ -465,12 +474,21 @@ export default function NotificationsSettingsExtras({
                   {t("notification.notificationUnavailable.title")}
                 </AlertTitle>
                 <AlertDescription>
-                  <Trans ns="views/settings">
-                    notification.notificationUnavailable.desc
-                  </Trans>
+                  <Trans
+                    ns="views/settings"
+                    i18nKey={
+                      requiresPwaInstall
+                        ? "notification.notificationUnavailable.descPwa"
+                        : "notification.notificationUnavailable.desc"
+                    }
+                  />
                   <div className="mt-3 flex items-center">
                     <Link
-                      to={getLocaleDocUrl("configuration/authentication")}
+                      to={getLocaleDocUrl(
+                        requiresPwaInstall
+                          ? "configuration/notifications"
+                          : "configuration/authentication",
+                      )}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="inline"
@@ -739,6 +757,8 @@ export function CameraNotificationSwitch({
     }
   }, [notificationSuspendUntil, notificationState]);
 
+  const [customDialogOpen, setCustomDialogOpen] = useState(false);
+
   const handleSuspend = (duration: string) => {
     setIsSuspended(true);
     if (duration == "off") {
@@ -748,6 +768,11 @@ export function CameraNotificationSwitch({
     }
   };
 
+  const handleCustomSuspend = (totalMinutes: number) => {
+    setIsSuspended(true);
+    sendNotificationSuspend(totalMinutes);
+  };
+
   const handleCancelSuspension = () => {
     sendNotification("ON");
     sendNotificationSuspend(0);
@@ -807,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"
@@ -844,6 +876,12 @@ export function CameraNotificationSwitch({
           {t("notification.cancelSuspension")}
         </Button>
       )}
+
+      <CustomSuspensionDialog
+        open={customDialogOpen}
+        onOpenChange={setCustomDialogOpen}
+        onConfirm={handleCustomSuspend}
+      />
     </div>
   );
 }

web/src/components/config-form/theme/frigateTheme.ts

@@ -33,6 +33,8 @@ import { OptionalFieldWidget } from "./widgets/OptionalFieldWidget";
 import { SemanticSearchModelWidget } from "./widgets/SemanticSearchModelWidget";
 import { SemanticSearchModelSizeWidget } from "./widgets/SemanticSearchModelSizeWidget";
 import { OnvifProfileWidget } from "./widgets/OnvifProfileWidget";
+import { PTZPresetsWidget } from "./widgets/PTZPresetsWidget";
+import { DefaultRoleWidget } from "./widgets/DefaultRoleWidget";
 
 import { FieldTemplate } from "./templates/FieldTemplate";
 import { ObjectFieldTemplate } from "./templates/ObjectFieldTemplate";
@@ -90,6 +92,8 @@ export const frigateTheme: FrigateTheme = {
     semanticSearchModel: SemanticSearchModelWidget,
     semanticSearchModelSize: SemanticSearchModelSizeWidget,
     onvifProfile: OnvifProfileWidget,
+    ptzPresets: PTZPresetsWidget,
+    defaultRole: DefaultRoleWidget,
   },
   templates: {
     FieldTemplate: FieldTemplate as React.ComponentType<FieldTemplateProps>,

web/src/components/config-form/theme/widgets/DefaultRoleWidget.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+import type { WidgetProps } from "@rjsf/utils";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { ConfigFormContext } from "@/types/configForm";
+import { getSizedFieldClassName } from "../utils";
+
+const BUILT_IN_ROLES = ["admin", "viewer"];
+
+export function DefaultRoleWidget(props: WidgetProps) {
+  const { id, value, disabled, readonly, onChange, schema, options, registry } =
+    props;
+  const { t } = useTranslation(["views/settings"]);
+
+  const fieldClassName = getSizedFieldClassName(options, "sm");
+
+  const formContext = registry?.formContext as ConfigFormContext | undefined;
+  const roles = useMemo<string[]>(() => {
+    const configured = Object.keys(formContext?.fullConfig?.auth?.roles ?? {});
+    // Keep admin/viewer first, then any custom roles in config order.
+    const custom = configured.filter((r) => !BUILT_IN_ROLES.includes(r));
+    return [...BUILT_IN_ROLES, ...custom];
+  }, [formContext]);
+
+  const selectedValue = typeof value === "string" && value ? value : "viewer";
+
+  const getLabel = (role: string) =>
+    BUILT_IN_ROLES.includes(role) ? t(`configForm.defaultRole.${role}`) : role;
+
+  return (
+    <Select
+      value={selectedValue}
+      onValueChange={onChange}
+      disabled={disabled || readonly}
+    >
+      <SelectTrigger id={id} className={fieldClassName}>
+        <SelectValue placeholder={schema.title} />
+      </SelectTrigger>
+      <SelectContent>
+        {roles.map((role) => (
+          <SelectItem key={role} value={role}>
+            {getLabel(role)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export default DefaultRoleWidget;

web/src/components/config-form/theme/widgets/PTZPresetsWidget.tsx

@@ -0,0 +1,151 @@
+// Combobox widget for ONVIF PTZ preset fields (e.g. autotracking.return_preset).
+// Fetches the camera's PTZ presets and shows them in a dropdown, while still
+// allowing a typed custom value so existing presets that the camera does not
+// report (such as "home") are preserved.
+import { useState, useMemo } from "react";
+import type { WidgetProps } from "@rjsf/utils";
+import { useTranslation } from "react-i18next";
+import useSWR from "swr";
+import { Check, ChevronsUpDown, Plus } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import type { ConfigFormContext } from "@/types/configForm";
+import type { CameraPtzInfo } from "@/types/ptz";
+import { getSizedFieldClassName } from "../utils";
+
+export function PTZPresetsWidget(props: WidgetProps) {
+  const { id, value, disabled, readonly, onChange, options, registry } = props;
+  const { t } = useTranslation(["views/settings"]);
+  const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+
+  const fieldClassName = getSizedFieldClassName(options, "md");
+
+  const formContext = registry?.formContext as ConfigFormContext | undefined;
+  const cameraName = formContext?.cameraName;
+  const isCameraLevel = formContext?.level === "camera";
+  const hasOnvifHost = !!formContext?.fullCameraConfig?.onvif?.host;
+
+  const { data: ptzInfo } = useSWR<CameraPtzInfo>(
+    isCameraLevel && cameraName && hasOnvifHost
+      ? `${cameraName}/ptz/info`
+      : null,
+    {
+      // ONVIF may not be initialized yet when the settings page loads,
+      // so retry until presets become available
+      refreshInterval: (data) =>
+        data?.presets && data.presets.length > 0 ? 0 : 5000,
+    },
+  );
+
+  const presets = useMemo<string[]>(() => ptzInfo?.presets ?? [], [ptzInfo]);
+
+  const trimmedSearch = searchValue.trim();
+  const matchesPreset = useMemo(
+    () => presets.some((p) => p.toLowerCase() === trimmedSearch.toLowerCase()),
+    [presets, trimmedSearch],
+  );
+  const showCustomOption = trimmedSearch.length > 0 && !matchesPreset;
+
+  const commit = (next: string) => {
+    onChange(next);
+    setSearchValue("");
+    setOpen(false);
+  };
+
+  const currentLabel = typeof value === "string" && value ? value : undefined;
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) setSearchValue("");
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled || readonly}
+          className={cn(
+            "justify-between font-normal",
+            !currentLabel && "text-muted-foreground",
+            fieldClassName,
+          )}
+        >
+          {currentLabel ?? t("configForm.ptzPresets.placeholder")}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+        <Command>
+          <CommandInput
+            placeholder={t("configForm.ptzPresets.search")}
+            value={searchValue}
+            onValueChange={setSearchValue}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && showCustomOption) {
+                e.preventDefault();
+                commit(trimmedSearch);
+              }
+            }}
+          />
+          <CommandList>
+            {showCustomOption && (
+              <CommandGroup>
+                <CommandItem
+                  value={trimmedSearch}
+                  onSelect={() => commit(trimmedSearch)}
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  {t("configForm.ptzPresets.useCustom", {
+                    value: trimmedSearch,
+                  })}
+                </CommandItem>
+              </CommandGroup>
+            )}
+            {presets.length > 0 ? (
+              <CommandGroup heading={t("configForm.ptzPresets.available")}>
+                {presets.map((preset) => (
+                  <CommandItem
+                    key={preset}
+                    value={preset}
+                    onSelect={() => commit(preset)}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        value === preset ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    {preset}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ) : !showCustomOption ? (
+              <div className="p-4 text-center text-sm text-muted-foreground">
+                {t("configForm.ptzPresets.noPresets")}
+              </div>
+            ) : null}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

web/src/components/menu/LiveContextMenu.tsx

@@ -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>
   );
 }

web/src/components/overlay/ReviewActivityCalendar.tsx

@@ -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) {

web/src/components/overlay/dialog/CustomSuspensionDialog.tsx

@@ -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>
+  );
+}

web/src/types/frigateConfig.ts

@@ -4,8 +4,6 @@ import { TriggerAction, TriggerType } from "./trigger";
 export interface UiConfig {
   timezone?: string;
   time_format?: "browser" | "12hour" | "24hour";
-  date_style?: "full" | "long" | "medium" | "short";
-  time_style?: "full" | "long" | "medium" | "short";
   dashboard: boolean;
   order: number;
   unit_system?: "metric" | "imperial";

web/src/views/settings/Go2RtcStreamsSettingsView.tsx

@@ -902,7 +902,7 @@ function StreamUrlEntry({
   return (
     <div className="pb-4">
       <div className="flex h-7 flex-row items-center justify-start gap-2 text-sm text-primary-variant">
-        {t("go2rtcStreams.streamNumber", { index: urlIndex + 1 })}
+        {t("go2rtcStreams.sourceNumber", { index: urlIndex + 1 })}
         {canRemove && (
           <Button
             variant="ghost"

web/src/views/settings/TriggerView.tsx

@@ -484,7 +484,7 @@ export default function TriggerView({
         ) : (
           <>
             <div className="mb-5 flex flex-row items-center justify-between gap-2">
-              <div className="flex flex-col items-start">
+              <div className="flex max-w-5xl flex-col items-start">
                 <Heading as="h4" className="mb-1">
                   {t("triggers.management.title")}
                 </Heading>