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/components/overlay/CustomTimeSelector.tsx

@@ -3,7 +3,7 @@ import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { SelectSeparator } from "../ui/select";
 import { TimeRange } from "@/types/timeline";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { getUTCOffset } from "@/utils/dateUtil";
 import { TimezoneAwareCalendar } from "./ReviewActivityCalendar";
 import { FaArrowRight, FaCalendarAlt } from "react-icons/fa";
@@ -69,16 +69,18 @@ export function CustomTimeSelector({
     return time;
   }, [range, latestTime, timezoneOffset, localTimeOffset]);
 
+  const is24Hour = use24HourTime(config);
+
   const formattedStart = useFormattedTimestamp(
     startTime,
-    config?.ui.time_format == "24hour"
+    is24Hour
       ? t("time.formattedTimestamp.24hour")
       : t("time.formattedTimestamp.12hour"),
   );
 
   const formattedEnd = useFormattedTimestamp(
     endTime,
-    config?.ui.time_format == "24hour"
+    is24Hour
       ? t("time.formattedTimestamp.24hour")
       : t("time.formattedTimestamp.12hour"),
   );

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -2,7 +2,7 @@ import { isDesktop, isIOS, isMobile, isSafari } from "react-device-detect";
 import { SearchResult } from "@/types/search";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { useApiHost } from "@/api";
 import { Button } from "../../ui/button";
@@ -769,9 +769,10 @@ function ObjectDetailsTab({
     setShowNavigationButtons,
   ]);
 
+  const is24Hour = use24HourTime(config);
   const formattedDate = useFormattedTimestamp(
     search?.start_time ?? 0,
-    config?.ui.time_format == "24hour"
+    is24Hour
       ? t("time.formattedTimestampMonthDayYearHourMinute.24hour", {
           ns: "common",
         })

web/src/components/overlay/detail/TrackingDetails.tsx

@@ -7,6 +7,7 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { TrackingDetailsSequence } from "@/types/timeline";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { use24HourTime } from "@/hooks/use-date-utils";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { LuCircle, LuFolderX } from "react-icons/lu";
 import { cn } from "@/lib/utils";
@@ -428,17 +429,18 @@ export function TrackingDetails({
     [annotationOffset, displaySource, timestampToVideoTime],
   );
 
+  const is24Hour = use24HourTime(config);
+
   const formattedStart = config
     ? formatUnixTimestampToDateTime(event.start_time ?? 0, {
         timezone: config.ui.timezone,
-        date_format:
-          config.ui.time_format == "24hour"
-            ? t("time.formattedTimestamp.24hour", {
-                ns: "common",
-              })
-            : t("time.formattedTimestamp.12hour", {
-                ns: "common",
-              }),
+        date_format: is24Hour
+          ? t("time.formattedTimestamp.24hour", {
+              ns: "common",
+            })
+          : t("time.formattedTimestamp.12hour", {
+              ns: "common",
+            }),
         time_style: "medium",
         date_style: "medium",
       })
@@ -448,14 +450,13 @@ export function TrackingDetails({
     config && event.end_time != null
       ? formatUnixTimestampToDateTime(event.end_time, {
           timezone: config.ui.timezone,
-          date_format:
-            config.ui.time_format == "24hour"
-              ? t("time.formattedTimestamp.24hour", {
-                  ns: "common",
-                })
-              : t("time.formattedTimestamp.12hour", {
-                  ns: "common",
-                }),
+          date_format: is24Hour
+            ? t("time.formattedTimestamp.24hour", {
+                ns: "common",
+              })
+            : t("time.formattedTimestamp.12hour", {
+                ns: "common",
+              }),
           time_style: "medium",
           date_style: "medium",
         })
@@ -917,24 +918,25 @@ function LifecycleIconRow({
     [effectiveTime, item.timestamp],
   );
 
+  const is24Hour = use24HourTime(config);
+
   const formattedEventTimestamp = useMemo(
     () =>
       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",
           })
         : "",
-    [config, item.timestamp, t],
+    [config, is24Hour, item.timestamp, t],
   );
 
   const ratio = useMemo(