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 enGB from 'date-fns/locale/en-GB'
|
|
|
|
import { H1, Label } 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,
|
|
LogosRow,
|
|
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 { orgs } = data
|
|
|
|
const credits = data.credits ? `
|
|
## Credits
|
|
${data.credits}
|
|
` : null
|
|
|
|
const orgsList = Object.values(orgs || {})
|
|
|
|
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}
|
|
{...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>
|
|
<Markdown theme={theme}>{credits}</Markdown>
|
|
</InfoContent> : null}
|
|
</Fragment>
|
|
{orgsList.length ? (
|
|
<LogosRow $wrap>
|
|
{orgsList.map((org, index) => (
|
|
<Fragment>
|
|
<a href={org.orgUrl}>
|
|
<img src={org.logoUrl} alt={`${org.orgName} logo`} />
|
|
</a>
|
|
{orgsList.length === 2 && index + 1 !== orgsList.length ? <Label colour={theme.foreground}>{'//'}</Label> : null}
|
|
</Fragment>
|
|
))}
|
|
</LogosRow>
|
|
) : null}
|
|
</InfoLayout>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
export default SeriesPage
|