In Google Chrome, times between midnight and 1AM are shown as, e.g. 24:17 instead of 00:17 due to an issue with react-intl

[neatchee]

Steps to reproduce the problem

1. Create a post between midnight and 1 AM local time
2. Navigate to the post using Google Chrome

Expected behaviour

Timestamp is displayed as 00:17 if the post was made at 12:17AM

Actual behaviour

Timestamp is displayed as 24:17 if the psot was made at 12:17AM

Detailed description

react-intl did not support the hourCycle='h23' option until later versions. We are still using react-intl v2.9 which is very, very old and includes breaking changes to migrate to v3.

We should replace usages of react-intl with direct browser API calls, which have stabilized since this issue came up and are well supported across browsers.

Specifications

Mastodon 4.0.2
react-intl v2.9.0

[deanveloper]

For reproducibility, this only occurs in Chrome, and in locales that have a default hourCycle of h12 ("12-hour time")

Quoting myself from glitch-soc#2051 (comment):

To be extremely precise, the hour12 option is supposed to swap hourCycle between either h11 and h23, or h12 and h24, as is described in ECMAScript. However, Chrome is the only large browser who actually follows this spec. Most other browsers implement hour12 as setting hourCycle to h12 when true, and h23 when false, which is probably the more "human" way to think of hour12. There is already an ECMA proposal to fix this (coincidentally, issue 402 in ecma402 😄)

Anyway, it makes more sense to directly set the hourCycle to h23 instead of hour12 to false, since hour12 doesn't do what's expected in Chrome. Or well, because Chrome follows the ECMAScript spec, and the spec doesn't do what a human would expect.

So if the locale's default hourCycle is h12, then setting hour12: false in Chrome will set the hourCycle to h24, which causes midnight to appear as 24:00 instead of 0:00.