From a6a3e6c28ee5014952b689b946359d9426c599ab Mon Sep 17 00:00:00 2001 From: sunda <> Date: Thu, 11 Nov 2021 17:05:25 +0100 Subject: [PATCH] fixing timezone displays --- src/components/EpisodeCard/index.js | 44 ++++++++++++++++------------- src/pages/SeriesPage/index.js | 16 +---------- src/pages/SeriesPage/styles.js | 31 +++++++++++--------- 3 files changed, 44 insertions(+), 47 deletions(-) diff --git a/src/components/EpisodeCard/index.js b/src/components/EpisodeCard/index.js index d294873..93d0798 100644 --- a/src/components/EpisodeCard/index.js +++ b/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 ( diff --git a/src/pages/SeriesPage/index.js b/src/pages/SeriesPage/index.js index 1cdd2ea..88522be 100644 --- a/src/pages/SeriesPage/index.js +++ b/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 }) => { ))} diff --git a/src/pages/SeriesPage/styles.js b/src/pages/SeriesPage/styles.js index 43108a8..9944a99 100644 --- a/src/pages/SeriesPage/styles.js +++ b/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 ( {`${hasPassed ? translations.en.streamDatePast : ''}`} - {hasPassed - ? format(zonedDate, 'dd/MM/yy') - : `${format(zonedDate, 'do LLLL y // HH:mm')} ${tzShort}`} + {timezoneLabel} {videoUrl && hasPassed ? (