From 6fa8032caac9bb239d413544ac5c53482d7f65ba Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 11 Feb 2025 14:16:59 +0000 Subject: [PATCH] Respect user's 12/24 hour preference consistently (#29237) * Respect user's 12/24 hour preference consistently Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/DateUtils.ts | 2 +- src/hooks/useUserTimezone.ts | 8 ++++++-- .../components/views/right_panel/UserInfo-test.tsx | 5 ++++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/DateUtils.ts b/src/DateUtils.ts index 821b866e0b..e788ca09bf 100644 --- a/src/DateUtils.ts +++ b/src/DateUtils.ts @@ -38,7 +38,7 @@ export function getMonthsArray(month: Intl.DateTimeFormatOptions["month"] = "sho // XXX: Ideally we could just specify `hour12: boolean` but it has issues on Chrome in the `en` locale // https://support.google.com/chrome/thread/29828561?hl=en -function getTwelveHourOptions(showTwelveHour: boolean): Intl.DateTimeFormatOptions { +export function getTwelveHourOptions(showTwelveHour: boolean): Intl.DateTimeFormatOptions { return { hourCycle: showTwelveHour ? "h12" : "h23", }; diff --git a/src/hooks/useUserTimezone.ts b/src/hooks/useUserTimezone.ts index bca05659a0..0e5f046d74 100644 --- a/src/hooks/useUserTimezone.ts +++ b/src/hooks/useUserTimezone.ts @@ -7,6 +7,9 @@ Please see LICENSE files in the repository root for full details. import { useEffect, useState } from "react"; import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix"; +import { getTwelveHourOptions } from "../DateUtils.ts"; +import { useSettingValue } from "./useSettings.ts"; + /** * Fetch a user's delclared timezone through their profile, and return * a friendly string of the current time for that user. This will keep @@ -23,6 +26,7 @@ export const useUserTimezone = (cli: MatrixClient, userId: string): { timezone: const [updateInterval, setUpdateInterval] = useState>(); const [friendly, setFriendly] = useState(); const [supported, setSupported] = useState(); + const showTwelveHour = useSettingValue("showTwelveHourTimestamps"); useEffect(() => { if (!cli || supported !== undefined) { @@ -62,8 +66,8 @@ export const useUserTimezone = (cli: MatrixClient, userId: string): { timezone: const updateTime = (): void => { const currentTime = new Date(); const friendly = currentTime.toLocaleString(undefined, { + ...getTwelveHourOptions(showTwelveHour), timeZone: tz, - hour12: true, hour: "2-digit", minute: "2-digit", timeZoneName: "shortOffset", @@ -84,7 +88,7 @@ export const useUserTimezone = (cli: MatrixClient, userId: string): { timezone: console.error("Could not render current timezone for user", ex); } })(); - }, [supported, userId, cli]); + }, [supported, userId, cli, showTwelveHour]); if (!timezone || !friendly) { return null; diff --git a/test/unit-tests/components/views/right_panel/UserInfo-test.tsx b/test/unit-tests/components/views/right_panel/UserInfo-test.tsx index 95ef7d3f7e..a70fdabafd 100644 --- a/test/unit-tests/components/views/right_panel/UserInfo-test.tsx +++ b/test/unit-tests/components/views/right_panel/UserInfo-test.tsx @@ -241,7 +241,10 @@ describe("", () => { _locale, opts, ) { - return origDate.call(this, "en-US", opts); + return origDate.call(this, "en-US", { + ...opts, + hourCycle: "h12", + }); }); mockClient.doesServerSupportExtendedProfiles.mockResolvedValue(true); mockClient.getExtendedProfileProperty.mockResolvedValue("Europe/London");