116 lines
3.4 KiB
JavaScript
116 lines
3.4 KiB
JavaScript
/* eslint-disable react/prop-types */
|
|
import { h, Fragment } from 'preact'
|
|
import { useEffect } from 'preact/hooks'
|
|
import striptags from 'striptags'
|
|
|
|
import { H1 } from '../../components/Text'
|
|
import Markdown from '../../components/Markdown'
|
|
import translations from '../../data/strings'
|
|
import InfoLayout from '../../layouts/InfoLayout'
|
|
import VideoEmbed from '../../components/VideoEmbed'
|
|
import {
|
|
EpisodeCard,
|
|
Title,
|
|
InfoContent,
|
|
Row,
|
|
ActionButton as Button,
|
|
TrailerContainer,
|
|
} from './styles'
|
|
|
|
import Page from '../../layouts/Page'
|
|
import { splitArray } from '../../helpers/utils'
|
|
import { defaultTheme } from '../../assets/theme'
|
|
|
|
const SeriesPage = ({ data }) => {
|
|
const theme = data.theme || defaultTheme
|
|
|
|
const credits = data.credits ? `
|
|
## Credits
|
|
${data.credits}
|
|
` : null
|
|
|
|
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
|
|
|
|
|
|
return (
|
|
<Page title={data.title} theme={data.theme} withHeader={false}>
|
|
<InfoLayout title={data.title} subtitle={data.subtitle} image={data.image} theme={theme}>
|
|
<Fragment>
|
|
<InfoContent>
|
|
<H1>{data.title}:</H1>
|
|
<H1>{data.subtitle}</H1>
|
|
{data.description ? <Markdown withLinebreaks theme={theme}>{data.description}</Markdown> : null}
|
|
|
|
{data.trailer ? (
|
|
<TrailerContainer>
|
|
<VideoEmbed url={data.trailer} />
|
|
</TrailerContainer>
|
|
) : null}
|
|
|
|
{links ?
|
|
links.map(linkRow => <Row>
|
|
{linkRow.map(link => (
|
|
<a
|
|
href={link.resourceUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Button>{link.summary}</Button>
|
|
</a>
|
|
))}
|
|
</Row>) : null
|
|
}
|
|
</InfoContent>
|
|
{data.episodes.future.length ? (
|
|
<Fragment>
|
|
<Title>{translations.en.program}:</Title>
|
|
{data.episodes.future.map(feeditem => (
|
|
<EpisodeCard
|
|
theme={theme}
|
|
key={feeditem.start}
|
|
tzShort={tzShort}
|
|
{...feeditem}
|
|
/>
|
|
))}
|
|
</Fragment>
|
|
) : null}
|
|
{data.episodes.past.length ? (
|
|
<Fragment>
|
|
<Title>Past streams:</Title>
|
|
{data.episodes.past.map(feeditem => (
|
|
<EpisodeCard
|
|
theme={theme}
|
|
key={feeditem.beginsOn}
|
|
hasPassed
|
|
onClickButton={() => null} // todo: fix this
|
|
{...feeditem}
|
|
/>
|
|
))}
|
|
</Fragment>
|
|
) : null}
|
|
{credits ? <InfoContent>
|
|
<Title>Credits</Title>
|
|
<Markdown theme={theme}>{credits}</Markdown>
|
|
</InfoContent> : null}
|
|
</Fragment>
|
|
|
|
</InfoLayout>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
export default SeriesPage
|