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/components/button/DownloadVideoButton.tsx

@@ -4,6 +4,10 @@ import { FaDownload } from "react-icons/fa";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { useDateLocale } from "@/hooks/use-date-locale";
+import { useMemo } from "react";
 
 type DownloadVideoButtonProps = {
   source: string;
@@ -19,10 +23,17 @@ export function DownloadVideoButton({
   className,
 }: DownloadVideoButtonProps) {
   const { t } = useTranslation(["components/input"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const locale = useDateLocale();
+
+  const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
+  const format = useMemo(() => {
+    return t(`time.formattedTimestampFilename.${timeFormat}`, { ns: "common" });
+  }, [t, timeFormat]);
+
   const formattedDate = formatUnixTimestampToDateTime(startTime, {
-    strftime_fmt: "%D-%T",
-    time_style: "medium",
-    date_style: "medium",
+    date_format: format,
+    locale,
   });
   const filename = `${camera}_${formattedDate}.mp4`;