stream/src/pages/SeriesPage/styles.js

import { h, Fragment } from 'preact'
import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz'
import { bool, instanceOf, string } from 'prop-types'
import styled from 'styled-components'
import { colours, textSizes } from '../../assets/theme'
import config from '../../data/config'
import Logo from '../../components/Logo'
import translations from '../../data/strings'
import CrossSvg from '../../components/Svg/Cross'
import PlaySvg from '../../components/Svg/Play'

import { P, H1, H2, Span, Label } from '../../components/Text'
import { Link } from '../../components/Link'
import Button from '../../components/Button'

export const TrailerContainer = styled.div`
  background: url(${props => props.imgSrc});
  height: 20em;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid ${colours.midnightDarker};
  cursor: pointer;
  margin-bottom: 16px;

  div {
    padding: 1em 2em;
    background-color: #ffffffba;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  label {
    color: ${colours.midnightDarker};
    margin-left: 8px;
    font-size: 20px;
  }

  :hover div {
    background-color: #ffffff;
  }
`

export const Trailer = props => (
  <TrailerContainer {...props}>
    <div>
      <PlaySvg colour={colours.midnightDarker} size="20" />
      <Label>{translations.en.watchTrailer}</Label>
    </div>
  </TrailerContainer>
)

export const ActionButton = styled(Button)`
  font-size: 18px;
`

export const Row = styled.div`
  display: flex;
  flex-direction: row;
  margin-bottom: 32px;

  a {
    display: block;
    width: 50%;
    &:not(:last-of-type) {
      margin-right: 16px;
    }
  }
`

export const InfoContent = styled.div`
  max-width: 600px;
  margin: 0 0 0em 2px;
  padding-bottom: 1em;

  h1 {
    display: none;

    &:last-of-type {
      margin-bottom: 32px;
    }
    @media screen and (max-width: 1000px) {
      display: block;
    }
  }
`

export const PositionedLogo = styled(Logo)`
  margin-bottom: 64px;
`

export const TaglineContainer = styled.div`
  h1 {
    margin-top: 32px;
  }
`

export const Title = styled(H1)`
  margin: 0.3em 0;
`

export const PositionedCross = styled(CrossSvg)`
  position: fixed;
  right: 2.5em;
  top: 2em;
  cursor: pointer;
  stroke: ${colours.midnightDarker};
  z-index: 5;

  &:hover {
    opacity: 0.5;
  }
`

export const VCWrapper = styled.div`
  max-width: 600px;
  margin: 0 0 6em 2px;

  button {
    margin-top: 16px;
  }

  p {
    margin-left: 2px;
  }
`

const VCImg = styled.img`
  width: 100%;
  margin-bottom: 8px;
`

const ItemTitleWrapper = styled.div`
  margin-bottom: 0.3em;
`

const DateLabel = styled(Label)`
  margin: 1em 0;
  display: block;
`

const LinkBlock = styled(Link)`
  display: block;
  width: 100%;
`

const renderTitles = titles =>
  titles.split('\\n').map(title => <H2 key={title}>{title}</H2>)

export const VideoCard = ({
  title,
  description,
  start,
  previewPath,
  hasPassed,
  videoUrl,
  onClickButton,
  tzShort,
}) => {
  const startDate = new Date(start)
  const utcDate = zonedTimeToUtc(startDate, 'Europe/Berlin')

  const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
  const zonedDate = utcToZonedTime(utcDate, timeZone)
  return (
    <VCWrapper>
      <DateLabel colour={colours.midnight} size={textSizes.lg}>
        {`${hasPassed ? translations.en.streamDatePast : ''}`}
        <Span bold colour={colours.midnight}>
          {hasPassed
            ? format(zonedDate, 'dd/MM/yy')
            : `${format(zonedDate, 'do LLLL y // HH:mm')} ${tzShort}`}
        </Span>
      </DateLabel>
      {videoUrl && hasPassed ? (
        <LinkBlock href={videoUrl}>
          <ItemTitleWrapper>{renderTitles(title)}</ItemTitleWrapper>
          <VCImg src={`${config.peertube_root}${previewPath}`} alt="" />
        </LinkBlock>
      ) : (
        <Fragment>
          <ItemTitleWrapper>{renderTitles(title)}</ItemTitleWrapper>
          <VCImg src={`${config.peertube_root}${previewPath}`} alt="" />
        </Fragment>
      )}
      <P>{description}</P>
      {hasPassed ? (
        <Button onClick={onClickButton}>{translations.en.watchEpisode}</Button>
      ) : (
        <a
          href={
            hasPassed
              ? videoUrl
              : `webcal://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export`
          }
        >
          <Button>{translations.en.subEvent}</Button>
        </a>
      )}
    </VCWrapper>
  )
}

VideoCard.propTypes = {
  title: string,
  description: string,
  start: instanceOf(Date),
  previewPath: string,
  hasPassed: bool,
  videoUrl: string,
}