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/views/settings/NotificationsSettingsView.tsx

@@ -44,6 +44,7 @@ import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Trans, useTranslation } from "react-i18next";
+import { useDateLocale } from "@/hooks/use-date-locale";
 
 const NOTIFICATION_SERVICE_WORKER = "notifications-worker.js";
 
@@ -645,6 +646,8 @@ export function CameraNotificationSwitch({
     sendNotificationSuspend(0);
   };
 
+  const locale = useDateLocale();
+
   const formatSuspendedUntil = (timestamp: string) => {
     // Some languages require a change in word order
     if (timestamp === "0") return t("time.untilForRestart", { ns: "common" });
@@ -653,10 +656,15 @@ export function CameraNotificationSwitch({
       time_style: "medium",
       date_style: "medium",
       timezone: config?.ui.timezone,
-      strftime_fmt:
+      date_format:
         config?.ui.time_format == "24hour"
-          ? t("time.formattedTimestampExcludeSeconds.24hour", { ns: "common" })
-          : t("time.formattedTimestampExcludeSeconds.12hour", { ns: "common" }),
+          ? t("time.formattedTimestampMonthDayHourMinute.24hour", {
+              ns: "common",
+            })
+          : t("time.formattedTimestampMonthDayHourMinute.12hour", {
+              ns: "common",
+            }),
+      locale: locale,
     });
     return t("time.untilForTime", { ns: "common", time });
   };

web/src/views/system/StorageMetrics.tsx

@@ -10,9 +10,8 @@ import {
 import useSWR from "swr";
 import { CiCircleAlert } from "react-icons/ci";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useTimezone } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, useTimezone } from "@/hooks/use-date-utils";
 import { RecordingsSummary } from "@/types/review";
-import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useTranslation } from "react-i18next";
 
 type CameraStorage = {
@@ -70,6 +69,19 @@ export default function StorageMetrics({
       : null;
   }, [recordingsSummary]);
 
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampMonthDayYearHourMinute.${timeFormat}`, {
+      ns: "common",
+    });
+  }, [t, timeFormat]);
+
+  const formattedEarliestDate = useFormattedTimestamp(
+    earliestDate || 0,
+    format,
+    timezone,
+  );
+
   if (!cameraStorage || !stats || !totalStorage || !config) {
     return;
   }
@@ -114,13 +126,7 @@ export default function StorageMetrics({
               <span className="font-medium">
                 {t("storage.recordings.earliestRecording")}
               </span>{" "}
-              {formatUnixTimestampToDateTime(earliestDate, {
-                timezone: timezone,
-                strftime_fmt:
-                  config.ui.time_format === "24hour"
-                    ? "%d %b %Y, %H:%M"
-                    : "%B %d, %Y, %I:%M %p",
-              })}
+              {formattedEarliestDate}
             </div>
           )}
         </div>