fixing timezone displays

src/components/EpisodeCard/index.js

@@ -1,16 +1,21 @@
 import { h } from 'preact'
 import { ICalendar } from 'datebook'
-import { format } from 'date-fns'
+// import { format } from 'date-fns'
 import striptags from 'striptags'
+import { utcToZonedTime, zonedTimeToUtc, format } from 'date-fns-tz'
+import enGB from 'date-fns/locale/en-GB'
+
 import Link from '../Link'
 import { H2, H3, Label } from '../Text'
-import strings from '../../data/strings'
-import { andList } from '../../helpers/string'
-import { colours, screenSizes } from '../../assets/theme'
+import Flex from '../Flex'
+
 import { Img, Left, Right, Center, Title, ButtonRow, StyledButton as Button } from './styles'
+
+import strings from '../../data/strings'
+import { colours, screenSizes } from '../../assets/theme'
+import { andList } from '../../helpers/string'
 import { useEventApi } from '../../hooks/data'
 import { useWindowSize } from '../../hooks/dom'
-import Flex from '../Flex'
 
 
 
@@ -19,24 +24,25 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id: episodeId,
 
   const series = seriesId ? allSeries.filter(({ id }) => id === seriesId)[0] : {}
   const hosts = series.hosts ? series.hosts.map(host => host.actor.name) : null
-  const startTime = format(new Date(beginsOn), 'h:mma')
+  const startDate = new Date(beginsOn)
+
+  const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
+  const utcDate = zonedTimeToUtc(startDate, timeZone)
+
+  const zonedDate = utcToZonedTime(utcDate, timeZone)
+
+  const startTime = format(zonedDate, 'h:mma', {
+    timeZone,
+    locale: enGB,
+  })
+  const tzShort = format(zonedDate, 'zzz', {
+    timeZone,
+    locale: enGB,
+  })
 
   const { width: screenWidth } = useWindowSize()
   const isMobile = screenWidth < screenSizes.md
 
-  const dateString = `${new Date()}`
-  let tzShort =
-    // Works for the majority of modern browsers
-    dateString.match(/\(([^\)]+)\)$/) ||
-    // IE outputs date strings in a different format:
-    dateString.match(/([A-Z]+) [\d]{4}$/)
-
-  if (tzShort) {
-    // Old Firefox uses the long timezone name (e.g., "Central
-    // Daylight Time" instead of "CDT")
-    tzShort = tzShort[1].match(/[A-Z]/g).join('')
-  }
-
 
   return (
     <Flex align="stretch" direction={isMobile ? 'column' : 'row'} {...rest}>

src/pages/SeriesPage/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import { h, Fragment } from 'preact'
 import { useEffect } from 'preact/hooks'
-import striptags from 'striptags'
+import enGB from 'date-fns/locale/en-GB'
 
 import { H1, Label } from '../../components/Text'
 import Markdown from '../../components/Markdown'
@@ -33,19 +33,6 @@ const SeriesPage = ({ data }) => {
 
   const orgsList = Object.values(orgs || {})
 
-  const dateString = `${new Date()}`
-  let tzShort =
-    // Works for the majority of modern browsers
-    dateString.match(/\(([^\)]+)\)$/) ||
-    // IE outputs date strings in a different format:
-    dateString.match(/([A-Z]+) [\d]{4}$/)
-
-  if (tzShort) {
-    // Old Firefox uses the long timezone name (e.g., "Central
-    // Daylight Time" instead of "CDT")
-    tzShort = tzShort[1].match(/[A-Z]/g).join('')
-  }
-
   const links = data.links.length ? splitArray(data.links, 2) : null
 
 
@@ -85,7 +72,6 @@ const SeriesPage = ({ data }) => {
                 <EpisodeCard
                   theme={theme}
                   key={feeditem.start}
-                  tzShort={tzShort}
                   {...feeditem}
                 />
               ))}

src/pages/SeriesPage/styles.js

@@ -1,21 +1,22 @@
 import { h, Fragment } from 'preact'
 import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz'
+import enGB from 'date-fns/locale/en-GB'
 import { bool, func, instanceOf, string } from 'prop-types'
 import styled from 'styled-components'
-import { colours, textSizes } from '../../assets/theme'
-import config from '../../data/config'
 
 import Markdown from '../../components/Markdown'
 import Logo from '../../components/Logo'
-import translations from '../../data/strings'
-import CrossSvg from '../../components/Svg/Cross'
-
 import { H1, H2, Span, Label } from '../../components/Text'
 import Link from '../../components/Link'
 import Button from '../../components/Button'
-import { slugify } from '../../helpers/string'
+import CrossSvg from '../../components/Svg/Cross'
 import { ButtonsRows } from '../../components/EpisodeCard'
 
+import translations from '../../data/strings'
+import { colours, textSizes } from '../../assets/theme'
+import config from '../../data/config'
+import { slugify } from '../../helpers/string'
+
 export const TrailerContainer = styled.div`
   height: 22em;
   border: 1px solid ${colours.midnightDarker};
@@ -167,25 +168,29 @@ export const EpisodeCard = ({
   url,
   hasPassed,
   videoUrl,
-  onClickButton,
-  tzShort,
   theme,
   peertubeReplay,
   id
 }) => {
   const startDate = new Date(beginsOn)
-  const utcDate = zonedTimeToUtc(startDate, 'Europe/Berlin')
 
-  const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
+  const { timeZone } = Intl.DateTimeFormat().resolvedOptions() // client timezone eg. 'Europe/Berlin'
+  const utcDate = zonedTimeToUtc(startDate, timeZone) // convert the start date to UTC
+
   const zonedDate = utcToZonedTime(utcDate, timeZone)
+
+  const timezoneLabel = format(zonedDate, hasPassed ? 'dd/MM/yy' : 'do LLLL y // HH:mm zzz', {
+    timeZone,
+    locale: enGB,
+  })
+
+
   return (
     <VCWrapper id={id}>
       <DateLabel size={textSizes.lg} colour={theme.foreground}>
         {`${hasPassed ? translations.en.streamDatePast : ''}`}
         <Span bold colour={theme.foreground}>
-          {hasPassed
-            ? format(zonedDate, 'dd/MM/yy')
-            : `${format(zonedDate, 'do LLLL y // HH:mm')} ${tzShort}`}
+          {timezoneLabel}
         </Span>
       </DateLabel>
       {videoUrl && hasPassed ? (