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/hooks/use-date-utils.ts

@@ -84,6 +84,18 @@ export function use24HourTime(config: FrigateConfig | undefined) {
   }, [config, localeUses24HourTime]);
 }
 
+/**
+ * Returns the resolved time format key ("24hour" | "12hour") based on config
+ * and browser locale. Use this instead of checking config.ui.time_format directly
+ * to correctly handle the "browser" setting.
+ */
+export function useTimeFormat(
+  config: FrigateConfig | undefined,
+): "24hour" | "12hour" {
+  const is24Hour = use24HourTime(config);
+  return is24Hour ? "24hour" : "12hour";
+}
+
 export function useFormattedHour(
   config: FrigateConfig | undefined,
   time: string, // hour is assumed to be in 24 hour format per the Date object

web/src/hooks/use-draggable-element.ts

@@ -4,6 +4,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useDateLocale } from "./use-date-locale";
+import { useTimeFormat } from "./use-date-utils";
 import { useTranslation } from "react-i18next";
 import useUserInteraction from "./use-user-interaction";
 
@@ -168,7 +169,7 @@ function useDraggableElement({
   const { t } = useTranslation(["common"]);
   const locale = useDateLocale();
 
-  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const timeFormat = useTimeFormat(config);
   const format = useMemo(() => {
     const formatKey = `time.${
       segmentDuration < 60 && !dense