From 80d8d284d4feba18a6921e3371e2358f9a44ff5a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 29 Mar 2026 13:45:48 -0500
Subject: [PATCH] implement hook to return resolved "24hour" | "12hour" string

delegate to existing use24HourTime(), which correctly detects the browser's locale preference via Intl.DateTimeFormat
---
 web/src/hooks/use-date-utils.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/web/src/hooks/use-date-utils.ts b/web/src/hooks/use-date-utils.ts
index dbe3085d4..329266b6b 100644
--- a/web/src/hooks/use-date-utils.ts
+++ b/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