stream/src/components/Info/index.js

/* 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,
  Img,
  Trailer,
} from './styles'

import intro from '../../data/intro.md'
import credits from '../../data/credits.md'
import { colours } from '../../assets/theme'
import config from '../../data/config'
import trailerThumb from '../../assets/img/main_thumb.png'

const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => {
  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)
          )
      : []

  return (
    <InfoLayout loading={loading}>
      {embedURL ? (
        <VideoEmbed onClose={deactivateEmbed} url={embedURL} />
      ) : null}
      {infoActive && (
        <CrossSvg size="64" onClick={() => setInfoActive(false)} />
      )}
      {!loading && (
        <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} {...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