fixing timezone displays

This commit is contained in:
sunda 2021-11-11 17:05:25 +01:00
parent 15180937f9
commit a6a3e6c28e
3 changed files with 44 additions and 47 deletions

View File

@ -1,16 +1,21 @@
import { h } from 'preact' import { h } from 'preact'
import { ICalendar } from 'datebook' import { ICalendar } from 'datebook'
import { format } from 'date-fns' // import { format } from 'date-fns'
import striptags from 'striptags' 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 Link from '../Link'
import { H2, H3, Label } from '../Text' import { H2, H3, Label } from '../Text'
import strings from '../../data/strings' import Flex from '../Flex'
import { andList } from '../../helpers/string'
import { colours, screenSizes } from '../../assets/theme'
import { Img, Left, Right, Center, Title, ButtonRow, StyledButton as Button } from './styles' 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 { useEventApi } from '../../hooks/data'
import { useWindowSize } from '../../hooks/dom' 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 series = seriesId ? allSeries.filter(({ id }) => id === seriesId)[0] : {}
const hosts = series.hosts ? series.hosts.map(host => host.actor.name) : null 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 { width: screenWidth } = useWindowSize()
const isMobile = screenWidth < screenSizes.md 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 ( return (
<Flex align="stretch" direction={isMobile ? 'column' : 'row'} {...rest}> <Flex align="stretch" direction={isMobile ? 'column' : 'row'} {...rest}>

View File

@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
import { h, Fragment } from 'preact' import { h, Fragment } from 'preact'
import { useEffect } from 'preact/hooks' import { useEffect } from 'preact/hooks'
import striptags from 'striptags' import enGB from 'date-fns/locale/en-GB'
import { H1, Label } from '../../components/Text' import { H1, Label } from '../../components/Text'
import Markdown from '../../components/Markdown' import Markdown from '../../components/Markdown'
@ -33,19 +33,6 @@ const SeriesPage = ({ data }) => {
const orgsList = Object.values(orgs || {}) 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 const links = data.links.length ? splitArray(data.links, 2) : null
@ -85,7 +72,6 @@ const SeriesPage = ({ data }) => {
<EpisodeCard <EpisodeCard
theme={theme} theme={theme}
key={feeditem.start} key={feeditem.start}
tzShort={tzShort}
{...feeditem} {...feeditem}
/> />
))} ))}

View File

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