147 lines
4.1 KiB
JavaScript
147 lines
4.1 KiB
JavaScript
/* eslint-disable react/prop-types */
|
|
import { h, Fragment } from 'preact'
|
|
import { useState, useEffect } from 'preact/hooks'
|
|
import { isFuture, isPast } from 'date-fns'
|
|
|
|
import { H1 } from '../Text'
|
|
import Markdown from '../Markdown'
|
|
import translations from '../../data/strings'
|
|
import InfoLayout from '../InfoLayout'
|
|
import VideoEmbed from '../VideoEmbed'
|
|
import {
|
|
VideoCard,
|
|
Title,
|
|
InfoContent,
|
|
PositionedCross as CrossSvg,
|
|
Row,
|
|
ActionButton as Button,
|
|
Trailer,
|
|
} from './styles'
|
|
|
|
import intro from '../../data/intro.md'
|
|
import credits from '../../data/credits.md'
|
|
|
|
import config from '../../data/config'
|
|
import trailerThumb from '../../assets/img/main_thumb.png'
|
|
|
|
const Info = ({ data }) => {
|
|
const trailerUrl = `https://www.youtube-nocookie.com/embed/${config.seriesTrailerId}?autoplay=1&vq=hd1080`
|
|
const [embedURL, setEmbedUrl] = useState('')
|
|
|
|
const onClickTrailerButton = () => {
|
|
setEmbedUrl(trailerUrl)
|
|
}
|
|
const deactivateEmbed = () => {
|
|
setEmbedUrl('')
|
|
}
|
|
|
|
// const pastStreams =
|
|
// data && data.length
|
|
// ? data.filter(feeditem => isPast(new Date(feeditem.end)))
|
|
// : []
|
|
|
|
// const futureStreams =
|
|
// data && data.length
|
|
// ? data
|
|
// .filter(
|
|
// feeditem =>
|
|
// feeditem.id !== (currentVideo && currentVideo.id) &&
|
|
// isFuture(new Date(feeditem.start))
|
|
// )
|
|
// .sort(
|
|
// (a, b) =>
|
|
// // Turn your strings into dates, and then subtract them
|
|
// // to get a value that is either negative, positive, or zero.
|
|
// new Date(a.start) - new Date(b.start)
|
|
// )
|
|
// : []
|
|
|
|
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 (
|
|
<InfoLayout>
|
|
{/* {embedURL ? (
|
|
<VideoEmbed onClose={deactivateEmbed} url={embedURL} />
|
|
) : null} */}
|
|
<Fragment>
|
|
<InfoContent>
|
|
<H1>The Para-Real:</H1>
|
|
<H1>Finding the Future in Unexpected Places</H1>
|
|
<Markdown withLinebreaks>{intro}</Markdown>
|
|
|
|
<Trailer imgSrc={trailerThumb} onClick={onClickTrailerButton} />
|
|
|
|
<Row>
|
|
<a
|
|
href="https://discord.gg/Xu9D3qVana"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Button>Join the Discord</Button>
|
|
</a>
|
|
<a
|
|
href="https://ndc.substack.com/subscribe"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Button>Subscribe to the mailing list</Button>
|
|
</a>
|
|
</Row>
|
|
</InfoContent>
|
|
{/* {currentVideo && (
|
|
<Fragment>
|
|
<Title>{translations.en.nowPlaying}:</Title>
|
|
<VideoCard {...currentVideo} />
|
|
</Fragment>
|
|
)}
|
|
|
|
{futureStreams.length ? (
|
|
<Fragment>
|
|
<Title>{translations.en.nextStream}:</Title>
|
|
{futureStreams.map(feeditem => (
|
|
<VideoCard
|
|
key={feeditem.start}
|
|
tzShort={tzShort}
|
|
{...feeditem}
|
|
/>
|
|
))}
|
|
</Fragment>
|
|
) : null}
|
|
|
|
{pastStreams.length ? (
|
|
<Fragment>
|
|
<Title>{translations.en.pastStream}:</Title>
|
|
{pastStreams.map(feeditem => (
|
|
<VideoCard
|
|
key={feeditem.start}
|
|
hasPassed
|
|
onClickButton={() =>
|
|
setEmbedUrl(`${config.peertube_root}${feeditem.embedPath}`)
|
|
}
|
|
{...feeditem}
|
|
/>
|
|
))}
|
|
</Fragment>
|
|
) : null} */}
|
|
{/* <InfoContent>
|
|
<Markdown>{credits}</Markdown>
|
|
</InfoContent> */}
|
|
</Fragment>
|
|
|
|
</InfoLayout>
|
|
)
|
|
}
|
|
|
|
export default Info
|