administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-30 11:54:52 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

section fields

Browse Source
This commit is contained in:
Josh Hawkins 2026-01-23 10:04:50 -06:00
parent 737de2f53a
commit 0280c2ec43
13 changed files with 478 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/components/config-form/ConfigForm.tsx
View File

@ -43,6 +43,8 @@ export interface ConfigFormProps {
liveValidate?: boolean; liveValidate?: boolean;
/** Form context passed to all widgets */ /** Form context passed to all widgets */
formContext?: Record<string, unknown>; formContext?: Record<string, unknown>;
/** i18n namespace for field labels */
i18nNamespace?: string;
} }
export function ConfigForm({ export function ConfigForm({
@ -61,8 +63,9 @@ export function ConfigForm({
className, className,
liveValidate = false, liveValidate = false,
formContext, formContext,
i18nNamespace,
}: ConfigFormProps) { }: ConfigFormProps) {
const { t } = useTranslation(["views/settings"]); const { t } = useTranslation([i18nNamespace || "common", "views/settings"]);
const [showAdvanced, setShowAdvanced] = useState(false); const [showAdvanced, setShowAdvanced] = useState(false);
// Determine which fields to hide based on advanced toggle // Determine which fields to hide based on advanced toggle
@ -81,8 +84,16 @@ export function ConfigForm({
fieldOrder, fieldOrder,
hiddenFields: effectiveHiddenFields, hiddenFields: effectiveHiddenFields,
advancedFields: showAdvanced ? advancedFields : [], advancedFields: showAdvanced ? advancedFields : [],
i18nNamespace,
}), }),
[schema, fieldOrder, effectiveHiddenFields, advancedFields, showAdvanced], [
schema,
fieldOrder,
effectiveHiddenFields,
advancedFields,
showAdvanced,
i18nNamespace,
],
); );
// Merge generated uiSchema with custom overrides // Merge generated uiSchema with custom overrides
@ -116,6 +127,16 @@ export function ConfigForm({
const hasAdvancedFields = advancedFields && advancedFields.length > 0; const hasAdvancedFields = advancedFields && advancedFields.length > 0;
// Extended form context with i18n info
const extendedFormContext = useMemo(
() => ({
...formContext,
i18nNamespace,
t,
}),
[formContext, i18nNamespace, t],
);
return ( return (
<div className={cn("config-form", className)}> <div className={cn("config-form", className)}>
{hasAdvancedFields && ( {hasAdvancedFields && (
@ -130,6 +151,7 @@ export function ConfigForm({
className="cursor-pointer text-sm text-muted-foreground" className="cursor-pointer text-sm text-muted-foreground"
> >
{t("configForm.showAdvanced", { {t("configForm.showAdvanced", {
ns: "views/settings",
defaultValue: "Show Advanced Settings", defaultValue: "Show Advanced Settings",
})} })}
</Label> </Label>
@ -146,7 +168,7 @@ export function ConfigForm({
disabled={disabled} disabled={disabled}
readonly={readonly} readonly={readonly}
liveValidate={liveValidate} liveValidate={liveValidate}
formContext={formContext} formContext={extendedFormContext}
transformErrors={errorTransformer} transformErrors={errorTransformer}
{...frigateTheme} {...frigateTheme}
/> />

15
web/src/components/config-form/sections/AudioSection.tsx
View File

@ -1,10 +1,12 @@
// Audio Section Component // Audio Section Component
// Reusable for both global and camera-level audio settings // Reusable for both global and camera-level audio settings
import { createConfigSection, type SectionConfig } from "./BaseSection"; import { createConfigSection } from "./BaseSection";
// Configuration for the audio section export const AudioSection = createConfigSection({
export const audioSectionConfig: SectionConfig = { sectionPath: "audio",
i18nNamespace: "config/audio",
defaultConfig: {
fieldOrder: [ fieldOrder: [
"enabled", "enabled",
"listen", "listen",
@ -19,12 +21,7 @@ export const audioSectionConfig: SectionConfig = {
}, },
hiddenFields: ["enabled_in_config"], hiddenFields: ["enabled_in_config"],
advancedFields: ["min_volume", "max_not_heard", "num_threads"], advancedFields: ["min_volume", "max_not_heard", "num_threads"],
}; },
export const AudioSection = createConfigSection({
sectionPath: "audio",
translationKey: "configForm.audio",
defaultConfig: audioSectionConfig,
}); });
export default AudioSection; export default AudioSection;

296
web/src/components/config-form/sections/BaseSection.tsx
View File

@ -1,7 +1,7 @@
// Base Section Component for config form sections // Base Section Component for config form sections
// Used as a foundation for reusable section components // Used as a foundation for reusable section components
import { useMemo, useCallback } from "react"; import { useMemo, useCallback, useState } from "react";
import useSWR from "swr"; import useSWR from "swr";
import axios from "axios"; import axios from "axios";
import { toast } from "sonner"; import { toast } from "sonner";
@ -10,11 +10,22 @@ import { ConfigForm } from "../ConfigForm";
import { useConfigOverride } from "@/hooks/use-config-override"; import { useConfigOverride } from "@/hooks/use-config-override";
import { useSectionSchema } from "@/hooks/use-config-schema"; import { useSectionSchema } from "@/hooks/use-config-schema";
import type { FrigateConfig } from "@/types/frigateConfig"; import type { FrigateConfig } from "@/types/frigateConfig";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { LuRotateCcw } from "react-icons/lu"; import {
LuRotateCcw,
LuSave,
LuChevronDown,
LuChevronRight,
} from "react-icons/lu";
import Heading from "@/components/ui/heading";
import get from "lodash/get"; import get from "lodash/get";
import isEqual from "lodash/isEqual";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
export interface SectionConfig { export interface SectionConfig {
/** Field ordering within the section */ /** Field ordering within the section */
@ -44,13 +55,19 @@ export interface BaseSectionProps {
onSave?: () => void; onSave?: () => void;
/** Whether a restart is required after changes */ /** Whether a restart is required after changes */
requiresRestart?: boolean; requiresRestart?: boolean;
/** Whether section is collapsible */
collapsible?: boolean;
/** Default collapsed state */
defaultCollapsed?: boolean;
/** Whether to show the section title (default: false for global, true for camera) */
showTitle?: boolean;
} }
export interface CreateSectionOptions { export interface CreateSectionOptions {
/** The config path for this section (e.g., "detect", "record") */ /** The config path for this section (e.g., "detect", "record") */
sectionPath: string; sectionPath: string;
/** Translation key prefix for this section */ /** i18n namespace for this section (e.g., "config/detect") */
translationKey: string; i18nNamespace: string;
/** Default section configuration */ /** Default section configuration */
defaultConfig: SectionConfig; defaultConfig: SectionConfig;
} }
@ -60,10 +77,10 @@ export interface CreateSectionOptions {
*/ */
export function createConfigSection({ export function createConfigSection({
sectionPath, sectionPath,
translationKey, i18nNamespace,
defaultConfig, defaultConfig,
}: CreateSectionOptions) { }: CreateSectionOptions) {
return function ConfigSection({ const ConfigSection = function ConfigSection({
level, level,
cameraName, cameraName,
showOverrideIndicator = true, showOverrideIndicator = true,
@ -72,8 +89,20 @@ export function createConfigSection({
readonly = false, readonly = false,
onSave, onSave,
requiresRestart = true, requiresRestart = true,
collapsible = false,
defaultCollapsed = false,
showTitle,
}: BaseSectionProps) { }: BaseSectionProps) {
const { t } = useTranslation(["views/settings"]); const { t } = useTranslation([i18nNamespace, "views/settings", "common"]);
const [isOpen, setIsOpen] = useState(!defaultCollapsed);
const [pendingData, setPendingData] = useState<Record<
string,
unknown
> | null>(null);
const [isSaving, setIsSaving] = useState(false);
// Default: show title for camera level (since it might be collapsible), hide for global
const shouldShowTitle = showTitle ?? level === "camera";
// Fetch config // Fetch config
const { data: config, mutate: refreshConfig } = const { data: config, mutate: refreshConfig } =
@ -83,8 +112,7 @@ export function createConfigSection({
const sectionSchema = useSectionSchema(sectionPath, level); const sectionSchema = useSectionSchema(sectionPath, level);
// Get override status // Get override status
const { isOverridden, globalValue, cameraValue, resetToGlobal } = const { isOverridden, globalValue, cameraValue } = useConfigOverride({
useConfigOverride({
config, config,
cameraName: level === "camera" ? cameraName : undefined, cameraName: level === "camera" ? cameraName : undefined,
sectionPath, sectionPath,
@ -101,9 +129,22 @@ export function createConfigSection({
return get(config, sectionPath) || {}; return get(config, sectionPath) || {};
}, [config, level, cameraName]); }, [config, level, cameraName]);
// Handle form submission // Track if there are unsaved changes
const handleSubmit = useCallback( const hasChanges = useMemo(() => {
async (data: Record<string, unknown>) => { if (!pendingData) return false;
return !isEqual(formData, pendingData);
}, [formData, pendingData]);
// Handle form data change
const handleChange = useCallback((data: Record<string, unknown>) => {
setPendingData(data);
}, []);
// Handle save button click
const handleSave = useCallback(async () => {
if (!pendingData) return;
setIsSaving(true);
try { try {
const basePath = const basePath =
level === "camera" && cameraName level === "camera" && cameraName
@ -113,23 +154,24 @@ export function createConfigSection({
await axios.put("config/set", { await axios.put("config/set", {
requires_restart: requiresRestart ? 1 : 0, requires_restart: requiresRestart ? 1 : 0,
config_data: { config_data: {
[basePath]: data, [basePath]: pendingData,
}, },
}); });
toast.success( toast.success(
t(`${translationKey}.toast.success`, { t("toast.success", {
ns: "views/settings",
defaultValue: "Settings saved successfully", defaultValue: "Settings saved successfully",
}), }),
); );
setPendingData(null);
refreshConfig(); refreshConfig();
onSave?.(); onSave?.();
} catch (error) { } catch (error) {
// Parse Pydantic validation errors from API response // Parse Pydantic validation errors from API response
if (axios.isAxiosError(error) && error.response?.data) { if (axios.isAxiosError(error) && error.response?.data) {
const responseData = error.response.data; const responseData = error.response.data;
// Pydantic errors come as { detail: [...] } or { message: "..." }
if (responseData.detail && Array.isArray(responseData.detail)) { if (responseData.detail && Array.isArray(responseData.detail)) {
const validationMessages = responseData.detail const validationMessages = responseData.detail
.map((err: { loc?: string[]; msg?: string }) => { .map((err: { loc?: string[]; msg?: string }) => {
@ -138,7 +180,8 @@ export function createConfigSection({
}) })
.join(", "); .join(", ");
toast.error( toast.error(
t(`${translationKey}.toast.validationError`, { t("toast.validationError", {
ns: "views/settings",
defaultValue: `Validation failed: ${validationMessages}`, defaultValue: `Validation failed: ${validationMessages}`,
}), }),
); );
@ -146,70 +189,203 @@ export function createConfigSection({
toast.error(responseData.message); toast.error(responseData.message);
} else { } else {
toast.error( toast.error(
t(`${translationKey}.toast.error`, { t("toast.error", {
ns: "views/settings",
defaultValue: "Failed to save settings", defaultValue: "Failed to save settings",
}), }),
); );
} }
} else { } else {
toast.error( toast.error(
t(`${translationKey}.toast.error`, { t("toast.error", {
ns: "views/settings",
defaultValue: "Failed to save settings", defaultValue: "Failed to save settings",
}), }),
); );
} }
} finally {
setIsSaving(false);
} }
}, }, [
[level, cameraName, requiresRestart, t, refreshConfig, onSave], pendingData,
); level,
cameraName,
requiresRestart,
t,
refreshConfig,
onSave,
]);
// Handle reset to global // Handle reset to global - removes camera-level override by deleting the section
const handleResetToGlobal = useCallback(async () => { const handleResetToGlobal = useCallback(async () => {
if (level !== "camera" || !cameraName) return; if (level !== "camera" || !cameraName) return;
try { try {
const basePath = `cameras.${cameraName}.${sectionPath}`; const basePath = `cameras.${cameraName}.${sectionPath}`;
// Reset by setting to null/undefined or removing the override // Send empty string to delete the key from config (see update_yaml in backend)
await axios.put("config/set", { await axios.put("config/set", {
requires_restart: requiresRestart ? 1 : 0, requires_restart: requiresRestart ? 1 : 0,
config_data: { config_data: {
[basePath]: resetToGlobal(), [basePath]: "",
}, },
}); });
toast.success( toast.success(
t(`${translationKey}.toast.resetSuccess`, { t("toast.resetSuccess", {
ns: "views/settings",
defaultValue: "Reset to global defaults", defaultValue: "Reset to global defaults",
}), }),
); );
setPendingData(null);
refreshConfig(); refreshConfig();
} catch { } catch {
toast.error( toast.error(
t(`${translationKey}.toast.resetError`, { t("toast.resetError", {
ns: "views/settings",
defaultValue: "Failed to reset settings", defaultValue: "Failed to reset settings",
}), }),
); );
} }
}, [level, cameraName, requiresRestart, t, refreshConfig, resetToGlobal]); }, [level, cameraName, requiresRestart, t, refreshConfig]);
if (!sectionSchema) { if (!sectionSchema) {
return null; return null;
} }
const title = t(`${translationKey}.title`, { // Get section title from config namespace
defaultValue: sectionPath.charAt(0).toUpperCase() + sectionPath.slice(1), const title = t("label", {
ns: i18nNamespace,
defaultValue:
sectionPath.charAt(0).toUpperCase() +
sectionPath.slice(1).replace(/_/g, " "),
}); });
return ( const sectionContent = (
<Card> <div className="space-y-6">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <ConfigForm
schema={sectionSchema}
formData={pendingData || formData}
onChange={handleChange}
fieldOrder={sectionConfig.fieldOrder}
hiddenFields={sectionConfig.hiddenFields}
advancedFields={sectionConfig.advancedFields}
disabled={disabled || isSaving}
readonly={readonly}
showSubmit={false}
i18nNamespace={i18nNamespace}
formContext={{
level,
cameraName,
globalValue,
cameraValue,
}}
/>
{/* Save button */}
<div className="flex items-center justify-between pt-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CardTitle className="text-lg">{title}</CardTitle> {hasChanges && (
<span className="text-sm text-muted-foreground">
{t("unsavedChanges", {
ns: "views/settings",
defaultValue: "You have unsaved changes",
})}
</span>
)}
</div>
<Button
onClick={handleSave}
disabled={!hasChanges || isSaving || disabled}
className="gap-2"
>
<LuSave className="h-4 w-4" />
{isSaving
? t("saving", { ns: "common", defaultValue: "Saving..." })
: t("save", { ns: "common", defaultValue: "Save" })}
</Button>
</div>
</div>
);
if (collapsible) {
return (
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<div className="space-y-3">
<CollapsibleTrigger asChild>
<div className="flex cursor-pointer items-center justify-between">
<div className="flex items-center gap-3">
{isOpen ? (
<LuChevronDown className="h-4 w-4 text-muted-foreground" />
) : (
<LuChevronRight className="h-4 w-4 text-muted-foreground" />
)}
<Heading as="h4">{title}</Heading>
{showOverrideIndicator &&
level === "camera" &&
isOverridden && (
<Badge variant="secondary" className="text-xs">
{t("overridden", {
ns: "common",
defaultValue: "Overridden",
})}
</Badge>
)}
{hasChanges && (
<Badge variant="outline" className="text-xs">
{t("modified", {
ns: "common",
defaultValue: "Modified",
})}
</Badge>
)}
</div>
{level === "camera" && isOverridden && (
<Button
variant="ghost"
size="sm"
onClick={(e) => {
e.stopPropagation();
handleResetToGlobal();
}}
className="gap-2"
>
<LuRotateCcw className="h-4 w-4" />
{t("button.resetToGlobal", {
ns: "common",
defaultValue: "Reset to Global",
})}
</Button>
)}
</div>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="pl-7">{sectionContent}</div>
</CollapsibleContent>
</div>
</Collapsible>
);
}
return (
<div className="space-y-3">
{shouldShowTitle && (
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Heading as="h4">{title}</Heading>
{showOverrideIndicator && level === "camera" && isOverridden && ( {showOverrideIndicator && level === "camera" && isOverridden && (
<Badge variant="secondary" className="text-xs"> <Badge variant="secondary" className="text-xs">
{t("common.overridden", { defaultValue: "Overridden" })} {t("overridden", {
ns: "common",
defaultValue: "Overridden",
})}
</Badge>
)}
{hasChanges && (
<Badge variant="outline" className="text-xs">
{t("modified", { ns: "common", defaultValue: "Modified" })}
</Badge> </Badge>
)} )}
</div> </div>
@ -221,29 +397,37 @@ export function createConfigSection({
className="gap-2" className="gap-2"
> >
<LuRotateCcw className="h-4 w-4" /> <LuRotateCcw className="h-4 w-4" />
{t("common.resetToGlobal", { defaultValue: "Reset to Global" })} {t("button.resetToGlobal", {
ns: "common",
defaultValue: "Reset to Global",
})}
</Button> </Button>
)} )}
</CardHeader> </div>
<CardContent> )}
<ConfigForm
schema={sectionSchema} {/* Reset button when title is hidden but we're at camera level with override */}
formData={formData} {!shouldShowTitle && level === "camera" && isOverridden && (
onSubmit={handleSubmit} <div className="flex justify-end">
fieldOrder={sectionConfig.fieldOrder} <Button
hiddenFields={sectionConfig.hiddenFields} variant="ghost"
advancedFields={sectionConfig.advancedFields} size="sm"
disabled={disabled} onClick={handleResetToGlobal}
readonly={readonly} className="gap-2"
formContext={{ >
level, <LuRotateCcw className="h-4 w-4" />
cameraName, {t("button.resetToGlobal", {
globalValue, ns: "common",
cameraValue, defaultValue: "Reset to Global",
}} })}
/> </Button>
</CardContent> </div>
</Card> )}
{sectionContent}
</div>
); );
}; };
return ConfigSection;
} }

15
web/src/components/config-form/sections/DetectSection.tsx
View File

@ -1,10 +1,12 @@
// Detect Section Component // Detect Section Component
// Reusable for both global and camera-level detect settings // Reusable for both global and camera-level detect settings
import { createConfigSection, type SectionConfig } from "./BaseSection"; import { createConfigSection } from "./BaseSection";
// Configuration for the detect section export const DetectSection = createConfigSection({
export const detectSectionConfig: SectionConfig = { sectionPath: "detect",
i18nNamespace: "config/detect",
defaultConfig: {
fieldOrder: [ fieldOrder: [
"enabled", "enabled",
"fps", "fps",
@ -26,12 +28,7 @@ export const detectSectionConfig: SectionConfig = {
"annotation_offset", "annotation_offset",
"stationary", "stationary",
], ],
}; },
export const DetectSection = createConfigSection({
sectionPath: "detect",
translationKey: "configForm.detect",
defaultConfig: detectSectionConfig,
}); });
export default DetectSection; export default DetectSection;

15
web/src/components/config-form/sections/LiveSection.tsx
View File

@ -1,20 +1,17 @@
// Live Section Component // Live Section Component
// Reusable for both global and camera-level live settings // Reusable for both global and camera-level live settings
import { createConfigSection, type SectionConfig } from "./BaseSection"; import { createConfigSection } from "./BaseSection";
// Configuration for the live section export const LiveSection = createConfigSection({
export const liveSectionConfig: SectionConfig = { sectionPath: "live",
i18nNamespace: "config/live",
defaultConfig: {
fieldOrder: ["stream_name", "height", "quality"], fieldOrder: ["stream_name", "height", "quality"],
fieldGroups: {}, fieldGroups: {},
hiddenFields: ["enabled_in_config"], hiddenFields: ["enabled_in_config"],
advancedFields: ["quality"], advancedFields: ["quality"],
}; },
export const LiveSection = createConfigSection({
sectionPath: "live",
translationKey: "configForm.live",
defaultConfig: liveSectionConfig,
}); });
export default LiveSection; export default LiveSection;

15
web/src/components/config-form/sections/MotionSection.tsx
View File

@ -1,10 +1,12 @@
// Motion Section Component // Motion Section Component
// Reusable for both global and camera-level motion settings // Reusable for both global and camera-level motion settings
import { createConfigSection, type SectionConfig } from "./BaseSection"; import { createConfigSection } from "./BaseSection";
// Configuration for the motion section export const MotionSection = createConfigSection({
export const motionSectionConfig: SectionConfig = { sectionPath: "motion",
i18nNamespace: "config/motion",
defaultConfig: {
fieldOrder: [ fieldOrder: [
"enabled", "enabled",
"threshold", "threshold",
@ -31,12 +33,7 @@ export const motionSectionConfig: SectionConfig = {
"frame_height", "frame_height",
"mqtt_off_delay", "mqtt_off_delay",
], ],
}; },
export const MotionSection = createConfigSection({
sectionPath: "motion",
translationKey: "configForm.motion",
defaultConfig: motionSectionConfig,
}); });
export default MotionSection; export default MotionSection;

15
web/src/components/config-form/sections/NotificationsSection.tsx
View File

@ -1,20 +1,17 @@
// Notifications Section Component // Notifications Section Component
// Reusable for both global and camera-level notification settings // Reusable for both global and camera-level notification settings
import { createConfigSection, type SectionConfig } from "./BaseSection"; import { createConfigSection } from "./BaseSection";
// Configuration for the notifications section export const NotificationsSection = createConfigSection({
export const notificationsSectionConfig: SectionConfig = { sectionPath: "notifications",
i18nNamespace: "config/notifications",
defaultConfig: {
fieldOrder: ["enabled", "email"], fieldOrder: ["enabled", "email"],
fieldGroups: {}, fieldGroups: {},
hiddenFields: ["enabled_in_config"], hiddenFields: ["enabled_in_config"],
advancedFields: [], advancedFields: [],
}; },
export const NotificationsSection = createConfigSection({
sectionPath: "notifications",
translationKey: "configForm.notifications",
defaultConfig: notificationsSectionConfig,
}); });
export default NotificationsSection; export default NotificationsSection;

15
web/src/components/config-form/sections/ObjectsSection.tsx
View File

@ -1,10 +1,12 @@
// Objects Section Component // Objects Section Component
// Reusable for both global and camera-level objects settings // Reusable for both global and camera-level objects settings
import { createConfigSection, type SectionConfig } from "./BaseSection"; import { createConfigSection } from "./BaseSection";
// Configuration for the objects section export const ObjectsSection = createConfigSection({
export const objectsSectionConfig: SectionConfig = { sectionPath: "objects",
i18nNamespace: "config/objects",
defaultConfig: {
fieldOrder: ["track", "alert", "detect", "filters", "mask"], fieldOrder: ["track", "alert", "detect", "filters", "mask"],
fieldGroups: { fieldGroups: {
tracking: ["track", "alert", "detect"], tracking: ["track", "alert", "detect"],
@ -12,12 +14,7 @@ export const objectsSectionConfig: SectionConfig = {
}, },
hiddenFields: ["enabled_in_config"], hiddenFields: ["enabled_in_config"],
advancedFields: ["filters", "mask"], advancedFields: ["filters", "mask"],
}; },
export const ObjectsSection = createConfigSection({
sectionPath: "objects",
translationKey: "configForm.objects",
defaultConfig: objectsSectionConfig,
}); });
export default ObjectsSection; export default ObjectsSection;

15
web/src/components/config-form/sections/RecordSection.tsx
View File

@ -1,10 +1,12 @@
// Record Section Component // Record Section Component
// Reusable for both global and camera-level record settings // Reusable for both global and camera-level record settings
import { createConfigSection, type SectionConfig } from "./BaseSection"; import { createConfigSection } from "./BaseSection";
// Configuration for the record section export const RecordSection = createConfigSection({
export const recordSectionConfig: SectionConfig = { sectionPath: "record",
i18nNamespace: "config/record",
defaultConfig: {
fieldOrder: [ fieldOrder: [
"enabled", "enabled",
"expire_interval", "expire_interval",
@ -21,12 +23,7 @@ export const recordSectionConfig: SectionConfig = {
}, },
hiddenFields: ["enabled_in_config"], hiddenFields: ["enabled_in_config"],
advancedFields: ["expire_interval", "preview", "export"], advancedFields: ["expire_interval", "preview", "export"],
}; },
export const RecordSection = createConfigSection({
sectionPath: "record",
translationKey: "configForm.record",
defaultConfig: recordSectionConfig,
}); });
export default RecordSection; export default RecordSection;

15
web/src/components/config-form/sections/ReviewSection.tsx
View File

@ -1,20 +1,17 @@
// Review Section Component // Review Section Component
// Reusable for both global and camera-level review settings // Reusable for both global and camera-level review settings
import { createConfigSection, type SectionConfig } from "./BaseSection"; import { createConfigSection } from "./BaseSection";
// Configuration for the review section export const ReviewSection = createConfigSection({
export const reviewSectionConfig: SectionConfig = { sectionPath: "review",
i18nNamespace: "config/review",
defaultConfig: {
fieldOrder: ["alerts", "detections"], fieldOrder: ["alerts", "detections"],
fieldGroups: {}, fieldGroups: {},
hiddenFields: ["enabled_in_config"], hiddenFields: ["enabled_in_config"],
advancedFields: [], advancedFields: [],
}; },
export const ReviewSection = createConfigSection({
sectionPath: "review",
translationKey: "configForm.review",
defaultConfig: reviewSectionConfig,
}); });
export default ReviewSection; export default ReviewSection;

15
web/src/components/config-form/sections/SnapshotsSection.tsx
View File

@ -1,10 +1,12 @@
// Snapshots Section Component // Snapshots Section Component
// Reusable for both global and camera-level snapshots settings // Reusable for both global and camera-level snapshots settings
import { createConfigSection, type SectionConfig } from "./BaseSection"; import { createConfigSection } from "./BaseSection";
// Configuration for the snapshots section export const SnapshotsSection = createConfigSection({
export const snapshotsSectionConfig: SectionConfig = { sectionPath: "snapshots",
i18nNamespace: "config/snapshots",
defaultConfig: {
fieldOrder: [ fieldOrder: [
"enabled", "enabled",
"bounding_box", "bounding_box",
@ -18,12 +20,7 @@ export const snapshotsSectionConfig: SectionConfig = {
}, },
hiddenFields: ["enabled_in_config"], hiddenFields: ["enabled_in_config"],
advancedFields: ["quality", "retain"], advancedFields: ["quality", "retain"],
}; },
export const SnapshotsSection = createConfigSection({
sectionPath: "snapshots",
translationKey: "configForm.snapshots",
defaultConfig: snapshotsSectionConfig,
}); });
export default SnapshotsSection; export default SnapshotsSection;

15
web/src/components/config-form/sections/TimestampSection.tsx
View File

@ -1,22 +1,19 @@
// Timestamp Section Component // Timestamp Section Component
// Reusable for both global and camera-level timestamp_style settings // Reusable for both global and camera-level timestamp_style settings
import { createConfigSection, type SectionConfig } from "./BaseSection"; import { createConfigSection } from "./BaseSection";
// Configuration for the timestamp_style section export const TimestampSection = createConfigSection({
export const timestampSectionConfig: SectionConfig = { sectionPath: "timestamp_style",
i18nNamespace: "config/timestamp_style",
defaultConfig: {
fieldOrder: ["position", "format", "color", "thickness", "effect"], fieldOrder: ["position", "format", "color", "thickness", "effect"],
fieldGroups: { fieldGroups: {
appearance: ["color", "thickness", "effect"], appearance: ["color", "thickness", "effect"],
}, },
hiddenFields: ["enabled_in_config"], hiddenFields: ["enabled_in_config"],
advancedFields: ["thickness", "effect"], advancedFields: ["thickness", "effect"],
}; },
export const TimestampSection = createConfigSection({
sectionPath: "timestamp_style",
translationKey: "configForm.timestampStyle",
defaultConfig: timestampSectionConfig,
}); });
export default TimestampSection; export default TimestampSection;

23
web/src/components/config-form/sections/index.ts
View File

@ -8,16 +8,13 @@ export {
type CreateSectionOptions, type CreateSectionOptions,
} from "./BaseSection"; } from "./BaseSection";
export { DetectSection, detectSectionConfig } from "./DetectSection"; export { DetectSection } from "./DetectSection";
export { RecordSection, recordSectionConfig } from "./RecordSection"; export { RecordSection } from "./RecordSection";
export { SnapshotsSection, snapshotsSectionConfig } from "./SnapshotsSection"; export { SnapshotsSection } from "./SnapshotsSection";
export { MotionSection, motionSectionConfig } from "./MotionSection"; export { MotionSection } from "./MotionSection";
export { ObjectsSection, objectsSectionConfig } from "./ObjectsSection"; export { ObjectsSection } from "./ObjectsSection";
export { ReviewSection, reviewSectionConfig } from "./ReviewSection"; export { ReviewSection } from "./ReviewSection";
export { AudioSection, audioSectionConfig } from "./AudioSection"; export { AudioSection } from "./AudioSection";
export { export { NotificationsSection } from "./NotificationsSection";
NotificationsSection, export { LiveSection } from "./LiveSection";
notificationsSectionConfig, export { TimestampSection } from "./TimestampSection";
} from "./NotificationsSection";
export { LiveSection, liveSectionConfig } from "./LiveSection";
export { TimestampSection, timestampSectionConfig } from "./TimestampSection";