Fallback to VITE_DEFAULT_HOUR_FORMAT if the browser doesn't provide…

… a time format. (Fixes #867)
thunderbird · Feb 12, 2025 · 9decff9 · 9decff9
1 parent 1ee54d5
commit 9decff9
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -28,3 +28,6 @@ VITE_POSTHOG_HOST=https://us.i.posthog.com
 VITE_POSTHOG_UI_HOST=https://us.posthog.com
 
 VITE_REPORT_BUG_URL=https://github.com/thunderbird/appointment/issues/new?assignees=&labels=bug&projects=&template=bug_report.md
+
+# If the browser's hour setting is empty or missing fallback to this value
+VITE_DEFAULT_HOUR_FORMAT=12
diff --git a/frontend/.env.prod.example b/frontend/.env.prod.example
@@ -19,3 +19,6 @@ VITE_POSTHOG_HOST=https://data.appointment.day
 VITE_POSTHOG_UI_HOST=https://us.posthog.com
 
 VITE_REPORT_BUG_URL=https://github.com/thunderbird/appointment/issues/new?assignees=&labels=bug&projects=&template=bug_report.md
+
+# If the browser's hour setting is empty or missing fallback to this value
+VITE_DEFAULT_HOUR_FORMAT=12
diff --git a/frontend/.env.stage.example b/frontend/.env.stage.example
@@ -19,3 +19,6 @@ VITE_POSTHOG_HOST=https://data.appointment.day
 VITE_POSTHOG_UI_HOST=https://us.posthog.com
 
 VITE_REPORT_BUG_URL=https://github.com/thunderbird/appointment/issues/new?assignees=&labels=bug&projects=&template=bug_report.md
+
+# If the browser's hour setting is empty or missing fallback to this value
+VITE_DEFAULT_HOUR_FORMAT=12
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
@@ -81,8 +81,16 @@ export const download = (data: BlobPart, filename: string, contenttype: string =
 // This functions works independent from Pinia stores so that
 // it can be called even if stores are not initialized yet.
 export const timeFormat = (): string => {
+  const fallbackFormat = import.meta.env?.VITE_DEFAULT_HOUR_FORMAT ?? 12;
   const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}') as User;
-  const detected = Intl.DateTimeFormat().resolvedOptions().hour12 ? 12 : 24;
+  const use12HourTime = Intl.DateTimeFormat().resolvedOptions()?.hour12;
+
+  // `.hour12` is an optional value and can be undefined. So default to our env value, and if not undefined use it.
+  let detected = fallbackFormat;
+  if (typeof use12HourTime !== 'undefined') {
+    detected = use12HourTime ? 12 : 24;
+  }
+
   const format = Number(user.settings?.timeFormat ?? detected);
   return format === 24 ? 'HH:mm' : 'hh:mm A';
 };