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

web/src/views/motion-search/MotionSearchDialog.tsx

@@ -43,8 +43,9 @@ import { TimezoneAwareCalendar } from "@/components/overlay/ReviewActivityCalend
 
 import { useApiHost } from "@/api";
 import { useResizeObserver } from "@/hooks/resize-observer";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { getUTCOffset } from "@/utils/dateUtil";
+import useSWR from "swr";
 import { cn } from "@/lib/utils";
 import MotionSearchROICanvas from "./MotionSearchROICanvas";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
@@ -452,7 +453,6 @@ export default function MotionSearchDialog({
                 range={searchRange}
                 setRange={setSearchRange}
                 defaultRange={defaultRange}
-                timeFormat={config.ui?.time_format}
                 timezone={timezone}
               />
 
@@ -476,7 +476,6 @@ type SearchRangeSelectorProps = {
   range?: TimeRange;
   setRange: React.Dispatch<React.SetStateAction<TimeRange | undefined>>;
   defaultRange: TimeRange;
-  timeFormat?: "browser" | "12hour" | "24hour";
   timezone?: string;
 };
 
@@ -484,7 +483,6 @@ function SearchRangeSelector({
   range,
   setRange,
   defaultRange,
-  timeFormat,
   timezone,
 }: SearchRangeSelectorProps) {
   const { t } = useTranslation(["views/motionSearch", "common"]);
@@ -527,15 +525,18 @@ function SearchRangeSelector({
     return time;
   }, [range, defaultRange, timezoneOffset, localTimeOffset]);
 
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const is24Hour = use24HourTime(config);
+
   const formattedStart = useFormattedTimestamp(
     startTime,
-    timeFormat === "24hour"
+    is24Hour
       ? t("time.formattedTimestamp.24hour", { ns: "common" })
       : t("time.formattedTimestamp.12hour", { ns: "common" }),
   );
   const formattedEnd = useFormattedTimestamp(
     endTime,
-    timeFormat === "24hour"
+    is24Hour
       ? t("time.formattedTimestamp.24hour", { ns: "common" })
       : t("time.formattedTimestamp.12hour", { ns: "common" }),
   );

web/src/views/motion-search/MotionSearchView.tsx

@@ -51,7 +51,7 @@ import {
   RecordingSegment,
 } from "@/types/record";
 import { VideoResolutionType } from "@/types/live";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import MotionSearchROICanvas from "./MotionSearchROICanvas";
 import MotionSearchDialog from "./MotionSearchDialog";
 import { IoMdArrowRoundBack } from "react-icons/io";
@@ -94,12 +94,13 @@ export default function MotionSearchView({
   ]);
   const navigate = useNavigate();
 
+  const is24Hour = use24HourTime(config);
   const resultTimestampFormat = useMemo(
     () =>
-      config.ui?.time_format === "24hour"
+      is24Hour
         ? t("time.formattedTimestamp.24hour", { ns: "common" })
         : t("time.formattedTimestamp.12hour", { ns: "common" }),
-    [config.ui?.time_format, t],
+    [is24Hour, t],
   );
 
   // Refs