Fix browser time format handling (#22694)

* implement hook to return resolved "24hour" | "12hour" string

delegate to existing use24HourTime(), which correctly detects the browser's locale preference via Intl.DateTimeFormat

* update frontend to use use24HourTime(config) or useTimeFormat(config) instead of directly comparing config.ui.time_format
This commit is contained in:
Josh Hawkins
2026-03-29 13:03:07 -06:00
committed by GitHub
parent f44f485f48
commit 257dae11c1
23 changed files with 165 additions and 133 deletions
+13 -12
View File
@@ -8,6 +8,7 @@ import {
formatUnixTimestampToDateTime,
getDurationFromTimestamps,
} from "@/utils/dateUtil";
import { use24HourTime } from "@/hooks/use-date-utils";
import { useTranslation } from "react-i18next";
import AnnotationOffsetSlider from "@/components/overlay/detail/AnnotationOffsetSlider";
import { FrigateConfig } from "@/types/frigateConfig";
@@ -398,12 +399,12 @@ function ReviewGroup({
}
}, [isActive, alwaysExpandActive]);
const is24Hour = use24HourTime(config);
const displayTime = formatUnixTimestampToDateTime(start, {
timezone: config.ui.timezone,
date_format:
config.ui.time_format == "24hour"
? t("time.formattedTimestampHourMinuteSecond.24hour", { ns: "common" })
: t("time.formattedTimestampHourMinuteSecond.12hour", { ns: "common" }),
date_format: is24Hour
? t("time.formattedTimestampHourMinuteSecond.24hour", { ns: "common" })
: t("time.formattedTimestampHourMinuteSecond.12hour", { ns: "common" }),
time_style: "medium",
date_style: "medium",
});
@@ -787,17 +788,17 @@ function LifecycleItem({
);
}, [config, item]);
const is24Hour = use24HourTime(config);
const formattedEventTimestamp = config
? formatUnixTimestampToDateTime(item?.timestamp ?? 0, {
timezone: config.ui.timezone,
date_format:
config.ui.time_format == "24hour"
? t("time.formattedTimestampHourMinuteSecond.24hour", {
ns: "common",
})
: t("time.formattedTimestampHourMinuteSecond.12hour", {
ns: "common",
}),
date_format: is24Hour
? t("time.formattedTimestampHourMinuteSecond.24hour", {
ns: "common",
})
: t("time.formattedTimestampHourMinuteSecond.12hour", {
ns: "common",
}),
time_style: "medium",
date_style: "medium",
})