Proper i18n date/time handling (#17858)

* install date-fns-tz

* add date locale hook

* refactor formatUnixTimestampToDateTime

Use date-fns style instead of using strftime. This requires changing the i18n keys to the way date-fns represents dates (eg: "MMM d, h:mm:ss aaa"  instead of "%b %-d, %H:%M"

* refactor calendar to use new hook

* fix useFormattedTimestamp to use new formatUnixTimestampToDateTime date_format

* change i18n keys to new format

* fix timeline

* fix review

* fix explore

* fix metrics

* fix notifications

* fix face library

* clean up

web/src/hooks/use-date-utils.ts

@@ -1,33 +1,42 @@
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useMemo } from "react";
+import { useDateLocale } from "@/hooks/use-date-locale";
 
 export function useFormattedTimestamp(
   timestamp: number,
   format: string,
   timezone?: string,
 ) {
+  const locale = useDateLocale();
+
   const formattedTimestamp = useMemo(() => {
     return formatUnixTimestampToDateTime(timestamp, {
       timezone,
-      strftime_fmt: format,
+      date_format: format,
+      locale,
     });
-  }, [format, timestamp, timezone]);
+  }, [format, timestamp, timezone, locale]);
 
   return formattedTimestamp;
 }
 
 export function useFormattedRange(start: number, end: number, format: string) {
+  const locale = useDateLocale();
+
   const formattedStart = useMemo(() => {
     return formatUnixTimestampToDateTime(start, {
-      strftime_fmt: format,
+      date_format: format,
+      locale,
     });
-  }, [format, start]);
+  }, [format, start, locale]);
+
   const formattedEnd = useMemo(() => {
     return formatUnixTimestampToDateTime(end, {
-      strftime_fmt: format,
+      date_format: format,
+      locale,
     });
-  }, [format, end]);
+  }, [format, end, locale]);
 
   return `${formattedStart} - ${formattedEnd}`;
 }
@@ -44,7 +53,7 @@ export function useTimezone(config: FrigateConfig | undefined) {
   }, [config]);
 }
 
-function use24HourTime(config: FrigateConfig | undefined) {
+export function use24HourTime(config: FrigateConfig | undefined) {
   const localeUses24HourTime = useMemo(
     () =>
       new Intl.DateTimeFormat(undefined, {
@@ -60,8 +69,8 @@ function use24HourTime(config: FrigateConfig | undefined) {
       return false;
     }
 
-    if (config.ui.time_format != "browser") {
-      return config.ui.time_format == "24hour";
+    if (config.ui.time_format !== "browser") {
+      return config.ui.time_format === "24hour";
     }
 
     return localeUses24HourTime;