Files
frigate/web/src/components/indicators/RuntimeOverrideIndicator.tsx
T
Josh Hawkins e24bb8be72 show runtime overrides in the settings form
The settings form read a camera section's saved config value, but its dependent warnings (audio transcription requiring audio detection, snapshots requiring detect, etc.) read the live config instead. A runtime toggle from the live view, MQTT, or an active profile can turn a section off without touching yaml, and that override persists across restarts, so the Enable switch showed on while the warning said the feature wasn't enabled. This adds an "Overridden (Live)" badge to any field whose live value differs from what's saved, and swaps the affected warnings to runtime-specific wording when a runtime override is the actual cause instead of the config.
2026-09-18 06:55:55 -05:00

56 lines
1.7 KiB
TypeScript

import { useTranslation } from "react-i18next";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { Tooltip, TooltipContent } from "../ui/tooltip";
import { TooltipTrigger } from "@radix-ui/react-tooltip";
type RuntimeOverrideIndicatorProps = {
/** The value the camera is running with, which differs from the saved config. */
runtimeValue: unknown;
className?: string;
};
/**
* Field-level companion to the section override badges. Marks a field the
* running camera has drifted from, so the saved value on screen never reads as
* the live one.
*/
export default function RuntimeOverrideIndicator({
runtimeValue,
className,
}: RuntimeOverrideIndicatorProps) {
const { t } = useTranslation(["views/settings", "common"]);
const displayValue =
typeof runtimeValue === "boolean"
? t(runtimeValue ? "button.on" : "button.off", { ns: "common" })
: Array.isArray(runtimeValue)
? runtimeValue.join(", ")
: String(runtimeValue);
return (
<Tooltip>
<TooltipTrigger asChild>
<Badge
variant="secondary"
className={cn(
"cursor-default border-2 border-selected text-center align-middle text-xs font-normal text-primary-variant",
className,
)}
>
{t("button.overriddenLive", { ns: "views/settings" })}
</Badge>
</TooltipTrigger>
<TooltipContent className="max-w-72">
<p>{t("button.overriddenLiveTooltip", { ns: "views/settings" })}</p>
<p className="mt-1">
{t("button.overriddenLiveValue", {
ns: "views/settings",
value: displayValue,
})}
</p>
</TooltipContent>
</Tooltip>
);
}