99 changed files with 290 additions and 417 deletions
--- a/.eslintrc
+++ b/.eslintrc
--- a/.gitignore
+++ b/.gitignore
@ -10,4 +10,3 @@ public
 .DS_Store
 .env*
 yarn.lock
-.parcel-cache
--- a/.prettierrc
+++ b/.prettierrc
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
--- a/app.js
+++ b/app.js
--- a/index.html
+++ b/index.html
@ -53,7 +53,7 @@
  </head>
  <body>
    <div id="app"></div>
-    <script src="./index.js" type="module"></script>
+    <script src="./index.js"></script>
    <!-- Matomo -->
    <script type="text/javascript">
      var _paq = (window._paq = window._paq || [])
--- a/index.js
+++ b/index.js
@ -16,16 +16,13 @@ import Series from './src/pages/Series'
 import Program from './src/pages/Program'
 import StreamPreview from './src/components/StreamPreview'
 import Video from './src/components/Video'
-import Chat from './src/components/Chat'
 // import { useWindowSize } from './src/hooks/dom'

 const App = () => {
-  const { theme } = useTheme(store => store)
+  const { theme } = useTheme((store) => store)
  const { data, loading: eventsLoading, error } = useEventApi()
  const [minLoadTimePassed, setMinTimeUp] = useState(false)
-  const { setCurrentStream, currentStream, streamIsLive } = useStreamStore(
-    store => store
-  )
+  const { setCurrentStream, currentStream, streamIsLive } = useStreamStore(store => store)
  const streamActive = useUiStore(store => store.streamActive)
  usePeertubeApi(data.episodes)

@ -40,17 +37,14 @@ const App = () => {
          new Date(stream.beginsOn),
          'Europe/Berlin'
        )
-        const utcEndDate = zonedTimeToUtc(
-          new Date(stream.endsOn),
-          'Europe/Berlin'
-        )
+        const utcEndDate = zonedTimeToUtc(new Date(stream.endsOn), 'Europe/Berlin')
        const { timeZone } = Intl.DateTimeFormat().resolvedOptions()

-        const zonedStartDate = utcToZonedTime(utcStartDate, 'Europe/Berlin')
-        const zonedEndDate = utcToZonedTime(utcEndDate, 'Europe/Berlin')
+        const zonedStartDate = utcToZonedTime(utcStartDate, timeZone)
+        const zonedEndDate = utcToZonedTime(utcEndDate, timeZone)
        if (
          isWithinInterval(new Date(), {
-            start: subHours(zonedStartDate, 2),
+            start: subHours(zonedStartDate, 1),
            end: addHours(zonedEndDate, 1),
          })
        ) {
@ -60,6 +54,8 @@ const App = () => {
    }
  }, [eventsLoading])

+  // console.log({ episodes: data.episodes, series: data.series })
+
  const seriesData = data.series ? Object.values(data.series) : []

  return (
@ -73,30 +69,23 @@ const App = () => {
              <Route exact path="/" component={Program} />
              <Route exact path="/series" component={Series} />
              <Route exact path="/program" component={Program} />
-              {seriesData.length
-                ? seriesData.map(series => (
+              {seriesData.length ? seriesData.map(series => (
                <Route exact path={`/series/${series.slug}`}>
                  <SeriesPage data={series} />
-                    </Route>
-                  ))
-                : null}
+                </Route>)) : null}
              <Route path="*">
                <FourOhFour />
              </Route>
            </Switch>
          </BrowserRouter>
-
-          {streamActive ? (
-            <Video stream={currentStream} />
-          ) : (
-            <StreamPreview stream={currentStream} isLive={streamIsLive} />
-          )}
+          {streamActive ? <Video stream={currentStream} /> :
+            <StreamPreview stream={currentStream} isLive={streamIsLive} />}
        </Fragment>
      )}
-    </ThemeProvider>
-  )
+    </ThemeProvider>)
 }

+
 const appEl = document.getElementById('app')

 render(<App />, appEl)
--- a/netlify.toml
+++ b/netlify.toml
--- a/package.json
+++ b/package.json
@ -1,11 +1,13 @@
 {
  "name": "underscore_stream",
  "version": "0.0.0",
+  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "yarn parcel index.html",
    "dev": "yarn parcel watch index.html",
-    "build": "parcel build index.html && cp -r static dist/static"
+    "build": "parcel build index.html && cp -r static dist/static",
+    "deploy": "yarn parcel build; rsync rsync -aP ./dist/ inu@95.216.203.71:/media/www/stream.undersco.re/"
  },
  "alias": {
    "react": "preact/compat",
@ -24,7 +26,7 @@
    "ical.js": "^1.4.0",
    "markdown-to-jsx": "^7.1.2",
    "preact": "^10.5.12",
-    "prop-types": "^15.8.1",
+    "prop-types": "^15.7.2",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^5.3.0",
    "striptags": "^3.2.0",
@ -33,7 +35,6 @@
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.13.10",
-    "@parcel/transformer-sass": "2.5.0",
    "babel": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.6.1",
@ -41,7 +42,7 @@
    "eslint-config-flying-rocket": "^1.1.1",
    "marked": "^2.0.3",
    "module-alias": "^2.0.3",
-    "parcel": "^2.0.0",
+    "parcel-bundler": "1.12.3",
    "parcel-plugin-ogimage": "^1.2.0",
    "prettier": "^1.9.1",
    "sass": "^1.32.8",
--- a/src/assets/fonts/Karla/Karla-Bold.ttf
+++ b/src/assets/fonts/Karla/Karla-Bold.ttf
--- a/src/assets/fonts/Karla/Karla-Medium.ttf
+++ b/src/assets/fonts/Karla/Karla-Medium.ttf
--- a/src/assets/fonts/Karla/Karla-Regular.ttf
+++ b/src/assets/fonts/Karla/Karla-Regular.ttf
--- a/src/assets/fonts/Karla/Karla-VariableFont_wght.ttf
+++ b/src/assets/fonts/Karla/Karla-VariableFont_wght.ttf
--- a/src/assets/fonts/Lunchtype/lunchtype24-medium.ttf
+++ b/src/assets/fonts/Lunchtype/lunchtype24-medium.ttf
--- a/src/assets/img/IconSM.png
+++ b/src/assets/img/IconSM.png
--- a/src/assets/img/hero/1lg.png
+++ b/src/assets/img/hero/1lg.png
--- a/src/assets/img/hero/1sm.png
+++ b/src/assets/img/hero/1sm.png
--- a/src/assets/img/hero/2lg.png
+++ b/src/assets/img/hero/2lg.png
--- a/src/assets/img/hero/2md.png
+++ b/src/assets/img/hero/2md.png
--- a/src/assets/img/hero/2sm.png
+++ b/src/assets/img/hero/2sm.png
--- a/src/assets/styles/fontface.scss
+++ b/src/assets/styles/fontface.scss
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
--- a/src/assets/styles/reset.scss
+++ b/src/assets/styles/reset.scss
--- a/src/assets/theme/index.js
+++ b/src/assets/theme/index.js
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
--- a/src/components/Chat/index.js
+++ b/src/components/Chat/index.js
@ -27,21 +27,17 @@ const Chat = ({ overlayActive }) => {
          <CloseBox colour={colours.white} size={18} onClick={toggleChatOpen} />
        </ChatHeader>
        <iframe
-          src={`https://e.widgetbot.io/channels/${config.chat.guildId}/${config.chat.channelId}`}
+          src={`https://titanembeds.com/embed/${config.chat.guildId}?css=${config.chat.css}&defaultchannel=${config.chat.channelId}&lang=en_EN`}
          height={(height / 4) * 3}
          width="350"
          frameBorder="0"
-          className="titanembed"
          title="discord-chat"
+          className="titanembed"
        />
      </ChatFrame>
    </ChatWrapper>
  ) : (
-    <ChatHeader
-      chatIsOpen={false}
-      onClick={toggleChatOpen}
-      $active={overlayActive}
-    >
+    <ChatHeader chatIsOpen={false} onClick={toggleChatOpen} $active={overlayActive}>
      <Label weight="400" size={16} colour={colours.midnightDarker}>
        CHAT
      </Label>
--- a/src/components/Chat/styles.js
+++ b/src/components/Chat/styles.js
--- a/src/components/EpisodeCard/index.js
+++ b/src/components/EpisodeCard/index.js
@ -1,44 +1,25 @@
 import { h } from 'preact'
 import { ICalendar } from 'datebook'
-// import { format } from 'date-fns'
+import { format } from 'date-fns'
 import striptags from 'striptags'
-import { utcToZonedTime, zonedTimeToUtc, format } from 'date-fns-tz'
-import enGB from 'date-fns/locale/en-GB'
-
 import Link from '../Link'
 import { H2, H3, Label } from '../Text'
-import Flex from '../Flex'
-
-import { Img, Left, Right, Center, Title, ButtonRow, StyledButton as Button } from './styles'
-
 import strings from '../../data/strings'
-import { colours, screenSizes } from '../../assets/theme'
 import { andList } from '../../helpers/string'
+import { colours, screenSizes } from '../../assets/theme'
+import { Img, Left, Right, Center, Title, ButtonRow, StyledButton as Button } from './styles'
 import { useEventApi } from '../../hooks/data'
 import { useWindowSize } from '../../hooks/dom'
+import Flex from '../Flex'



-const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id: episodeId, url, description, ...rest }) => {
+const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id, url, description, ...rest }) => {
  const { data: { series: allSeries } } = useEventApi()

  const series = seriesId ? allSeries.filter(({ id }) => id === seriesId)[0] : {}
  const hosts = series.hosts ? series.hosts.map(host => host.actor.name) : null
-  const startDate = new Date(beginsOn)
-
-  const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
-  const utcDate = zonedTimeToUtc(startDate, timeZone)
-
-  const zonedDate = utcToZonedTime(utcDate, timeZone)
-
-  const startTime = format(zonedDate, 'h:mma', {
-    timeZone,
-    locale: enGB,
-  })
-  const tzShort = format(zonedDate, 'zzz', {
-    timeZone,
-    locale: enGB,
-  })
+  const startTime = format(new Date(beginsOn), 'h:mma')

  const { width: screenWidth } = useWindowSize()
  const isMobile = screenWidth < screenSizes.md
@ -47,7 +28,7 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id: episodeId,
  return (
    <Flex align="stretch" direction={isMobile ? 'column' : 'row'} {...rest}>
      <Left>
-        <Link to={`/series/${series.slug}#${episodeId}`}>
+        <Link to={`/series/${series.slug}#${id}`}>
          <Img src={image} />
        </Link>
        <ButtonsRows title={title} description={description} beginsOn={beginsOn} endsOn={endsOn} url={url} />
@ -62,8 +43,7 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, endsOn, id: episodeId,
        </div>
      </Center>
      <Right>
-        <Label size={24} colour={colours.rose} weight="600" align="right" block>{startTime}</Label>
-        <Label size={18} colour={colours.rose} weight="600" align="right" block>{tzShort}</Label>
+        <Label size={24} colour={colours.rose} weight="600">{startTime}</Label>
      </Right>
    </Flex>
  )
--- a/src/components/EpisodeCard/styles.js
+++ b/src/components/EpisodeCard/styles.js
@ -16,8 +16,7 @@ export const ButtonRow = styled(Flexbox)`
  width: 100%;
  align-items: stretch;

-  button,
-  a {
+  button, a{
    font-size: 16px;
    width: 49%;
    height: 100%;
@ -30,12 +29,11 @@ export const ButtonRow = styled(Flexbox)`
  @media screen and (min-width: ${screenSizes.md}px) and (max-width: ${screenSizes.lg}px) {
    flex-direction: column;

-    button,
-    a {
+    button, a {
      width: 100%;
-      height: auto;
    }
  }
+
 `

 export const Left = styled(FlexColumn)`
@ -45,33 +43,26 @@ export const Left = styled(FlexColumn)`
  @media screen and (max-width: ${screenSizes.md}px) {
    margin-right: 0em;
  }
-`
+  `

 export const Center = styled(FlexColumn)`
-  @media screen and (max-width: ${screenSizes.md}px) {
+@media screen and (max-width: ${screenSizes.md}px) {
  order: 2;
-    position: relative;
-    top: -1em;
-  }
-`
+}
+  `

 export const Title = styled(H2)`
  max-width: 80%;
  margin-bottom: 1em;
-`
+  `

 export const Right = styled.div`
  flex: 1;
  text-align: right;
  
-  label {
-    display: block;
-    margin-bottom: 0.2em;
-  }
-
  @media screen and (max-width: ${screenSizes.md}px) {
    position: relative;
-    top: 1.2em;
+    top: 1em;
    order: 1;
  }
 `
--- a/src/components/Flex/index.js
+++ b/src/components/Flex/index.js
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
--- a/src/components/Header/styles.js
+++ b/src/components/Header/styles.js
--- a/src/components/Link/index.js
+++ b/src/components/Link/index.js
--- a/src/components/Link/styles.js
+++ b/src/components/Link/styles.js
--- a/src/components/Loader/index.js
+++ b/src/components/Loader/index.js
--- a/src/components/Loader/styles.js
+++ b/src/components/Loader/styles.js
--- a/src/components/Logo/index.js
+++ b/src/components/Logo/index.js
--- a/src/components/Markdown/index.js
+++ b/src/components/Markdown/index.js
--- a/src/components/Markdown/styles.js
+++ b/src/components/Markdown/styles.js
@ -28,10 +28,6 @@ export const MarkdownWrapper = styled.span`

  p {
    margin-bottom: ${props => (props.$withLinebreaks ? '32px' : '0')};
-
-    &:last-of-type {
-      margin-bottom: ${props => (props.$withLinebreaks ? '8px' : '0')};
-    }
  }

  p > p {
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
--- a/src/components/Select/styles.js
+++ b/src/components/Select/styles.js
--- a/src/components/Seo/index.js
+++ b/src/components/Seo/index.js
--- a/src/components/SeriesCard/index.js
+++ b/src/components/SeriesCard/index.js
@ -7,31 +7,15 @@ import { Img, LabelBlock, Wrapper } from './styles'
 import { andList } from '../../helpers/string'
 import { colours } from '../../assets/theme'

-const SeriesCard = ({
-  series: { image, episodes, title, subtitle, hosts: hostsArray, slug },
-  isPast,
-  ...rest
-}) => {
+const SeriesCard = ({ series: { image, episodes, title, subtitle, hosts: hostsArray, slug, }, isPast, ...rest }) => {
  const hosts = hostsArray.map(({ actor }) => actor.name)

  const episodesLength = episodes.past.length + episodes.future.length

  const getNextLastStreamText = () => {
    const hasFutureEpisodes = episodes.future.length
-    const prefix = hasFutureEpisodes
-      ? strings.en.nextStream
-      : strings.en.lastStream
-
-    const episodesList = episodes[hasFutureEpisodes ? 'future' : 'past']
-
-    const mainText = formatDistanceToNow(
-      new Date(
-        episodesList[hasFutureEpisodes ? 0 : episodesList.length - 1][
-          hasFutureEpisodes ? 'endsOn' : 'beginsOn'
-        ]
-      ),
-      { addSuffix: true }
-    )
+    const prefix = hasFutureEpisodes ? strings.en.nextStream : strings.en.lastStream
+    const mainText = formatDistanceToNow(new Date(episodes[hasFutureEpisodes ? 'future' : 'past'][0][hasFutureEpisodes ? 'endsOn' : 'beginsOn']), { addSuffix: true })

    return `${prefix} ${mainText}`
  }
@ -40,24 +24,21 @@ const SeriesCard = ({
    <Link to={`series/${slug}`}>
      <Wrapper {...rest}>
        <Img src={image}>
-          <LabelBlock $position="top">
-            {episodesLength}{' '}
-            {episodesLength === 1 ? strings.en.episode : strings.en.episodes}
+          <LabelBlock
+            $position="top"
+          >
+            {episodesLength} {episodesLength === 1 ? strings.en.episode : strings.en.episodes}
+          </LabelBlock>
+          <LabelBlock
+            $position="bottom"
+          >
+            {getNextLastStreamText()}
          </LabelBlock>
-          <LabelBlock $position="bottom">{getNextLastStreamText()}</LabelBlock>
        </Img>

-        <H2 size={32} colour={colours.rose}>
-          {title}
-        </H2>
-        <H3 size={21} colour={colours.rose}>
-          {subtitle}
-        </H3>
-        {hosts.length ? (
-          <Label size={16} colour={colours.rose}>
-            — {andList(hosts)}
-          </Label>
-        ) : null}
+        <H2 size={32} colour={colours.rose}>{title}</H2>
+        <H3 size={21} colour={colours.rose}>{subtitle}</H3>
+        {hosts.length ? <Label size={16} colour={colours.rose}>— {andList(hosts)}</Label> : null}
      </Wrapper>
    </Link>
  )
--- a/src/components/SeriesCard/styles.js
+++ b/src/components/SeriesCard/styles.js
--- a/src/components/StreamPreview/helpers.js
+++ b/src/components/StreamPreview/helpers.js
--- a/src/components/StreamPreview/index.js
+++ b/src/components/StreamPreview/index.js
@ -1,7 +1,10 @@
-import { h } from 'preact'
+import { Fragment, h } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
 import { PeerTubePlayer } from '@peertube/embed-api'
+import { string } from 'prop-types'
+import Link from '../Link'
 import { Label } from '../Text'
+import strings from '../../data/strings'
 import { colours, textSizes } from '../../assets/theme'
 import { Row } from '../Flex'
 import CrossSvg from '../Svg/Cross'
@ -10,18 +13,18 @@ import { getLabel } from './helpers'
 import Chevron from '../Svg/Chevron'

 import { Frame, Img, Iframe, InnerWrapper } from './styles'
+// import { useEventApi } from '../../hooks/data'

 const StreamPreview = ({ stream, isLive, ...rest }) => {
  const currentLanguage = 'en'
  const videoiFrame = useRef(null)
  const ptVideo = useRef(null)
-  const { isMinimized, toggleMinimized, setStreamActive } = useUiStore(
-    store => ({
+  const { isMinimized, toggleMinimized, setStreamActive } = useUiStore(store => ({
    isMinimized: store.streamPreviewMinimized,
    toggleMinimized: store.toggleStreamPreviewMinimized,
-      setStreamActive: store.setStreamActive,
-    })
-  )
+    setStreamActive: store.setStreamActive
+  }))
+

  useEffect(() => {
    const setupAndPlayVideo = async () => {
@ -44,30 +47,12 @@ const StreamPreview = ({ stream, isLive, ...rest }) => {
  return stream ? (
    <Frame isMinimized={isMinimized}>
      <Row justify="space-between">
-        <Label
-          colour={colours.midnightDarker}
-          size={textSizes.lg}
-          onClick={activateStream}
-        >
-          {getLabel(stream, isLive, isMinimized)}
-        </Label>
-        {isMinimized ? (
-          <Chevron
-            colour={colours.midnightDarker}
-            size={14}
-            onClick={toggleMinimized}
-          />
-        ) : (
-          <CrossSvg
-            colour={colours.midnightDarker}
-            size={16}
-            onClick={toggleMinimized}
-          />
-        )}
+        <Label colour={colours.midnightDarker} size={textSizes.lg} onClick={activateStream}>{getLabel(stream, isLive, isMinimized)}</Label>
+        {isMinimized ? <Chevron colour={colours.midnightDarker} size={14} onClick={toggleMinimized} /> : <CrossSvg colour={colours.midnightDarker} size={16} onClick={toggleMinimized} />}
      </Row>
-      {!isMinimized ? (
+      {!isMinimized ?
        <InnerWrapper onClick={activateStream}>
-          {isLive ? (
+          {isLive ?
            <Iframe
              width="560"
              height="315"
@ -79,13 +64,11 @@ const StreamPreview = ({ stream, isLive, ...rest }) => {
              allowFullScreen
              ref={videoiFrame}
            />
-          ) : (
-            <Img src={stream.image} onClick={activateStream} />
-          )}
-        </InnerWrapper>
-      ) : null}
+            : <Img src={stream.image} onClick={activateStream} />}
+        </InnerWrapper> : null}
    </Frame>
  ) : null
 }

+
 export default StreamPreview
--- a/src/components/StreamPreview/styles.js
+++ b/src/components/StreamPreview/styles.js
--- a/src/components/Svg/Chevron.js
+++ b/src/components/Svg/Chevron.js
--- a/src/components/Svg/Cross.js
+++ b/src/components/Svg/Cross.js
--- a/src/components/Svg/Play.js
+++ b/src/components/Svg/Play.js
--- a/src/components/Svg/VideoOverlay/index.js
+++ b/src/components/Svg/VideoOverlay/index.js
--- a/src/components/Svg/VideoOverlay/styles.js
+++ b/src/components/Svg/VideoOverlay/styles.js
--- a/src/components/Svg/base.js
+++ b/src/components/Svg/base.js
--- a/src/components/Svg/proptypes.js
+++ b/src/components/Svg/proptypes.js
--- a/src/components/Text/index.js
+++ b/src/components/Text/index.js
--- a/src/components/Text/styles.js
+++ b/src/components/Text/styles.js
--- a/src/components/Video/index.js
+++ b/src/components/Video/index.js
@ -1,7 +1,13 @@
 import { h } from 'preact'
 import { useEffect, useRef, useState } from 'preact/hooks'
-import { instanceOf, number, object, shape, string } from 'prop-types'
-
+import {
+  instanceOf,
+  number,
+  object,
+  shape,
+  string,
+} from 'prop-types'
+import 'regenerator-runtime/runtime'
 import { PeerTubePlayer } from '@peertube/embed-api'

 import Chat from '../Chat'
@ -51,6 +57,7 @@ const Video = () => {
    setVideo()
  }, [])

+
  const playVideo = () => {
    const { current: player } = ptVideo
    if (!videoReady) return
@ -77,6 +84,7 @@ const Video = () => {
    }
  }

+
  const toggleVideo = () => {
    if (isPlaying) {
      pauseVideo()
@ -117,6 +125,7 @@ const Video = () => {
    console.log({ vol })
  }

+
  const handleKeyPress = keyCode => {
    if (keyCode === 32) {
      // key == 'space'
--- a/src/components/Video/styles.js
+++ b/src/components/Video/styles.js
--- a/src/components/VideoEmbed/index.js
+++ b/src/components/VideoEmbed/index.js
--- a/src/components/VideoEmbed/styles.js
+++ b/src/components/VideoEmbed/styles.js
--- a/src/components/VideoOverlay/index.js
+++ b/src/components/VideoOverlay/index.js
--- a/src/components/VideoOverlay/styles.js
+++ b/src/components/VideoOverlay/styles.js
--- a/src/data/config.js
+++ b/src/data/config.js
@ -1,9 +1,8 @@
 export default {
  meta: {
    title: 'Underscore streams',
-    description:
-      'Quality live programming from beyond the surveillance economy.',
-    img: 'https://stream.undersco.re/static/meta.png',
+    description: 'Quality live programming from beyond the surveillance economy.',
+    img: 'https://stream.undersco.re/static/meta.png'
  },
  peertube_root: 'https://tv.undersco.re',
  EVENTS_API_URL: 'https://api.undersco.re',
@ -12,5 +11,6 @@ export default {
  chat: {
    guildId: '709318870909059082',
    channelId: '826751398757793842',
+    css: '215',
  },
 }
--- a/src/data/navigation.js
+++ b/src/data/navigation.js
--- a/src/data/strings.js
+++ b/src/data/strings.js
--- a/src/helpers/environment.js
+++ b/src/helpers/environment.js
--- a/src/helpers/string.js
+++ b/src/helpers/string.js
--- a/src/helpers/utils.js
+++ b/src/helpers/utils.js
--- a/src/hooks/data.js
+++ b/src/hooks/data.js
@ -1,110 +1,108 @@
-import { h } from 'preact'
+import { h, render } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-import { secondsToMilliseconds } from 'date-fns'
 import axios from 'axios'
-// import ICAL from 'ical.js'
+import ICAL from 'ical.js'
 import config from '../data/config'
 import { useSeriesStore, useStreamStore } from '../store/index'
+import 'regenerator-runtime/runtime'
 import { useInterval } from './timerHooks'
+import { secondsToMilliseconds } from 'date-fns'

-// export const useEventCalendar = () => {
-//   const [data, setData] = useState([])
-//   const [loading, setLoading] = useState(true)
+export const useEventCalendar = () => {
+  const [data, setData] = useState([])
+  const [loading, setLoading] = useState(true)

-//   async function fetchData() {
-//     setLoading(true)
+  async function fetchData() {
+    setLoading(true)

-//     const { data: responseData } = await axios.get(
-//       `https://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export`
-//     )
-//     const jCalData = ICAL.parse(responseData)
-//     const comp = new ICAL.Component(jCalData)
+    const { data: responseData } = await axios.get(
+      `https://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export`
+    )
+    const jCalData = ICAL.parse(responseData)
+    const comp = new ICAL.Component(jCalData)

-//     const vevents = comp.getAllSubcomponents('vevent')
+    const vevents = comp.getAllSubcomponents('vevent')

-//     const calEvents = vevents
-//       .filter(
-//         vevent =>
-//           vevent.getFirstPropertyValue('status') === null ||
-//           (vevent.getFirstPropertyValue('status') &&
-//             vevent.getFirstPropertyValue('status').toUpperCase() ===
-//               'CONFIRMED')
-//       )
-//       .map(vevent => {
-//         const event = new ICAL.Event(vevent)
-//         return event
-//       })
-//       .sort((a, b) => a.startDate.toJSDate() - b.startDate.toJSDate())
+    const calEvents = vevents
+      .filter(
+        vevent =>
+          vevent.getFirstPropertyValue('status') === null ||
+          (vevent.getFirstPropertyValue('status') &&
+            vevent.getFirstPropertyValue('status').toUpperCase() ===
+            'CONFIRMED')
+      )
+      .map(vevent => {
+        const event = new ICAL.Event(vevent)
+        return event
+      })
+      .sort((a, b) => a.startDate.toJSDate() - b.startDate.toJSDate())

-//     await Promise.all(
-//       calEvents.map(async calItem => {
-//         const url = calItem.component.getAllProperties('url')[0]
-//         if (url) {
-//           const id = url
-//             .getFirstValue()
-//             .split('/')
-//             .pop()
-//           const {
-//             data: {
-//               account,
-//               category,
-//               channel,
-//               embedPath,
-//               language,
-//               state,
-//               previewPath,
-//               views,
-//               duration,
-//             },
-//           } = await axios.get(`https://tv.undersco.re/api/v1/videos/${id}`)
+    await Promise.all(
+      calEvents.map(async calItem => {
+        const url = calItem.component.getAllProperties('url')[0]
+        if (url) {
+          const id = url
+            .getFirstValue()
+            .split('/')
+            .pop()
+          const {
+            data: {
+              account,
+              category,
+              channel,
+              embedPath,
+              language,
+              state,
+              previewPath,
+              views,
+              duration,
+            },
+          } = await axios.get(`https://tv.undersco.re/api/v1/videos/${id}`)

-//           const item = {
-//             title: calItem.summary,
-//             account,
-//             category,
-//             channel,
-//             description: calItem.description,
-//             embedPath,
-//             language,
-//             state,
-//             previewPath,
-//             views,
-//             start: calItem.startDate.toJSDate(),
-//             end: calItem.endDate.toJSDate(),
-//             id,
-//             duration,
-//             videoUrl: url.getFirstValue(),
-//           }
-//           setData(arr => [...arr, item])
-//         } else {
-//           const item = {
-//             title: calItem.summary,
-//             description: calItem.description,
-//             start: calItem.startDate.toJSDate(),
-//             end: calItem.endDate.toJSDate(),
-//           }
-//           setData(arr => [...arr, item])
-//         }
-//       })
-//     )
+          const item = {
+            title: calItem.summary,
+            account,
+            category,
+            channel,
+            description: calItem.description,
+            embedPath,
+            language,
+            state,
+            previewPath,
+            views,
+            start: calItem.startDate.toJSDate(),
+            end: calItem.endDate.toJSDate(),
+            id,
+            duration,
+            videoUrl: url.getFirstValue(),
+          }
+          setData(arr => [...arr, item])
+        } else {
+          const item = {
+            title: calItem.summary,
+            description: calItem.description,
+            start: calItem.startDate.toJSDate(),
+            end: calItem.endDate.toJSDate(),
+          }
+          setData(arr => [...arr, item])
+        }
+      })
+    )

-//     setLoading(false)
-//   }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+  return { loading, data }
+}

-//   useEffect(() => {
-//     fetchData()
-//   }, [])

-//   return { loading, data }
-// }

 export const useEventApi = () => {
-  const [data, setData] = useSeriesStore(store => [
-    store.series,
-    store.setSeries,
-  ])
+  const [data, setData] = useSeriesStore(store => [store.series, store.setSeries])
  const [error, setError] = useState(null)
  const [loading, setLoading] = useState(!!data.length)

@ -113,12 +111,15 @@ export const useEventApi = () => {
      setLoading(true)

      try {
+
        const { data: responseData } = await axios.get(
          `${config.EVENTS_API_URL}/events`
        )
        setData(responseData)
+        console.log({ data: responseData })
        setLoading(false)
-      } catch (err) {
+      }
+      catch (err) {
        console.log('ERROR')
        setError(err)
        setLoading(false)
@ -134,12 +135,7 @@ export const useEventApi = () => {
 }

 export const usePeertubeApi = async () => {
-  const {
-    currentStream,
-    setCurrentStream,
-    setStreamIsLive,
-    streamIsLive,
-  } = useStreamStore(store => store)
+  const { currentStream, setCurrentStream, setStreamIsLive, streamIsLive } = useStreamStore(store => store)

  if (!currentStream) return

@ -147,11 +143,10 @@ export const usePeertubeApi = async () => {
    const { peertubeLive } = currentStream
    if (!peertubeLive || !peertubeLive.id) return

+
    const {
-      data: { state, embedPath },
-    } = await axios.get(
-      `https://tv.undersco.re/api/v1/videos/${peertubeLive.id}`
-    )
+      data: { state, embedPath }
+    } = await axios.get(`https://tv.undersco.re/api/v1/videos/${peertubeLive.id}`)

    setStreamIsLive(state.id === 1)
    setCurrentStream({ ...currentStream, embedPath })
@ -161,10 +156,7 @@ export const usePeertubeApi = async () => {
    fetchData()
  }, [])

-  useInterval(
-    () => {
+  useInterval(() => {
    fetchData()
-    },
-    streamIsLive ? secondsToMilliseconds(15) : secondsToMilliseconds(1)
-  )
+  }, streamIsLive ? secondsToMilliseconds(15) : secondsToMilliseconds(1))
 }
--- a/src/hooks/dom.js
+++ b/src/hooks/dom.js
--- a/src/hooks/timerHooks.js
+++ b/src/hooks/timerHooks.js
--- a/src/hooks/utility.js
+++ b/src/hooks/utility.js
--- a/src/layouts/InfoLayout/index.js
+++ b/src/layouts/InfoLayout/index.js
--- a/src/layouts/InfoLayout/styles.js
+++ b/src/layouts/InfoLayout/styles.js
--- a/src/layouts/Page/index.js
+++ b/src/layouts/Page/index.js
--- a/src/layouts/Page/styles.js
+++ b/src/layouts/Page/styles.js
--- a/src/pages/404/index.js
+++ b/src/pages/404/index.js
--- a/src/pages/404/styles.js
+++ b/src/pages/404/styles.js
--- a/src/pages/LoaderLayout/index.js
+++ b/src/pages/LoaderLayout/index.js
--- a/src/pages/LoaderLayout/styles.js
+++ b/src/pages/LoaderLayout/styles.js
--- a/src/pages/Program/helpers.js
+++ b/src/pages/Program/helpers.js
--- a/src/pages/Program/index.js
+++ b/src/pages/Program/index.js
--- a/src/pages/Program/styles.js
+++ b/src/pages/Program/styles.js
--- a/src/pages/Series/index.js
+++ b/src/pages/Series/index.js
@ -14,23 +14,20 @@ const Series = () => {
  const { data } = useEventApi()
  const pastSeries = []

-  const currentSeries = data.series
-    ? data.series.filter(series => {
+  const currentSeries = data.series ? data.series.filter(series => {
    if (series.episodes.future.length) {
      return true
    }
-        if (
-          series.episodes.past.every(({ beginsOn }) =>
-            isFuture(addYears(new Date(beginsOn), 1))
-          )
-        ) {
+    if (series.episodes.past.every(({ beginsOn }) => isFuture(addYears(new Date(beginsOn), 1)))) {
      return true
    }

    pastSeries.push(series)
    return false
-      })
-    : []
+  }) : []
+
+  console.log({ currentSeries })
+

  return (
    <Page title={strings.en.series}>
@ -51,8 +48,7 @@ const Series = () => {
                <SeriesCard series={series} isPast />
              ))}
            </SeriesGrid>
-          </Fragment>
-        ) : null}
+          </Fragment>) : null}
      </Content>
    </Page>
  )
--- a/src/pages/Series/styles.js
+++ b/src/pages/Series/styles.js
--- a/src/pages/SeriesPage/index.js
+++ b/src/pages/SeriesPage/index.js
@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import { h, Fragment } from 'preact'
 import { useEffect } from 'preact/hooks'
-import enGB from 'date-fns/locale/en-GB'
+import striptags from 'striptags'

 import { H1, Label } from '../../components/Text'
 import Markdown from '../../components/Markdown'
@ -14,7 +14,6 @@ import {
  InfoContent,
  Row,
  LogosRow,
-  FooterImage,
  ActionButton as Button,
  TrailerContainer,
 } from './styles'
@ -27,38 +26,37 @@ const SeriesPage = ({ data }) => {
  const theme = data.theme || defaultTheme
  const { orgs } = data

-  const credits = data.credits
-    ? `
+  const credits = data.credits ? `
  ## Credits
  ${data.credits}
-  `
-    : null
+  ` : null

  const orgsList = Object.values(orgs || {})

-  const footerImages = data?.resources?.filter(({ title }) =>
-    title.includes('FOOTER_IMG')
-  )
+  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}
-      >
+      <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.description ? <Markdown withLinebreaks theme={theme}>{data.description}</Markdown> : null}

            {data.trailer ? (
              <TrailerContainer>
@ -66,9 +64,8 @@ const SeriesPage = ({ data }) => {
              </TrailerContainer>
            ) : null}

-            {links
-              ? links.map(linkRow => (
-                  <Row>
+            {links ?
+              links.map(linkRow => <Row>
                {linkRow.map(link => (
                  <a
                    href={link.resourceUrl}
@ -78,15 +75,19 @@ const SeriesPage = ({ data }) => {
                    <Button>{link.summary}</Button>
                  </a>
                ))}
-                  </Row>
-                ))
-              : null}
+              </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} />
+                <EpisodeCard
+                  theme={theme}
+                  key={feeditem.start}
+                  tzShort={tzShort}
+                  {...feeditem}
+                />
              ))}
            </Fragment>
          ) : null}
@ -104,34 +105,20 @@ const SeriesPage = ({ data }) => {
              ))}
            </Fragment>
          ) : null}
-          {credits ? (
-            <InfoContent>
+          {credits ? <InfoContent>
            <Markdown theme={theme}>{credits}</Markdown>
-            </InfoContent>
-          ) : null}
+          </InfoContent> : null}
        </Fragment>
-        {orgsList.length ? (
-          <LogosRow $wrap>
+        {orgsList.length ? <LogosRow $wrap>
          {orgsList.map((org, index) => (
            <Fragment>
+              <a href={org.orgUrl}>
                <img src={org.logoUrl} alt={`${org.orgName} logo`} />
-                {orgsList.length < 4 !== 1 &&
-                orgsList.length < 4 &&
-                index + 1 !== orgsList.length ? (
-                  <Label colour={theme.foreground}>{'//'}</Label>
-                ) : null}
+              </a>
+              {orgsList.length === 2 && index + 1 !== orgsList.length ? <Label colour={theme.foreground}>{'//'}</Label> : null}
            </Fragment>
          ))}
-          </LogosRow>
-        ) : null}
-        {footerImages.length
-          ? footerImages.map(image => (
-              <FooterImage
-                src={image.resourceUrl}
-                alt={`${image.orgName} logo`}
-              />
-            ))
-          : null}
+        </LogosRow> : null}
      </InfoLayout>
    </Page>
  )
--- a/src/pages/SeriesPage/styles.js
+++ b/src/pages/SeriesPage/styles.js
@ -1,24 +1,23 @@
 import { h, Fragment } from 'preact'
 import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz'
-import enGB from 'date-fns/locale/en-GB'
 import { bool, func, instanceOf, string } from 'prop-types'
 import styled from 'styled-components'
+import { colours, textSizes } from '../../assets/theme'
+import config from '../../data/config'

 import Markdown from '../../components/Markdown'
 import Logo from '../../components/Logo'
+import translations from '../../data/strings'
+import CrossSvg from '../../components/Svg/Cross'
+
 import { H1, H2, Span, Label } from '../../components/Text'
 import Link from '../../components/Link'
 import Button from '../../components/Button'
-import CrossSvg from '../../components/Svg/Cross'
+import { slugify } from '../../helpers/string'
 import { ButtonsRows } from '../../components/EpisodeCard'

-import translations from '../../data/strings'
-import { colours, textSizes } from '../../assets/theme'
-import config from '../../data/config'
-import { slugify } from '../../helpers/string'
-
 export const TrailerContainer = styled.div`
-  height: 21em;
+  height: 22em;
  border: 1px solid ${colours.midnightDarker};
  margin-bottom: 16px;

@ -40,6 +39,7 @@ export const TrailerContainer = styled.div`
  }
 `

+
 export const ActionButton = styled(Button)`
  font-size: 18px;
 `
@ -48,7 +48,7 @@ export const Row = styled.div`
  display: flex;
  flex-direction: row;
  margin-bottom: 32px;
-  flex-wrap: ${props => (props.$wrap ? 'wrap' : 'nowrap')};
+  flex-wrap: ${props => props.$wrap ? 'wrap' : 'nowrap'};

  a {
    display: block;
@ -63,28 +63,22 @@ export const LogosRow = styled(Row)`
    align-items: center;
    max-width: 600px;
    justify-content: space-between;
-  padding: 32px 0;
+    padding: 32px 0 ;

    a {
      width: auto;
      margin-right: 0;

      &[href]:hover {
-      opacity: 0.7;
+        opacity: 0.7
      }
    }

    img {
-    max-height: 42px;
-    width: 25%;
+      height: 64px;
    }
 `

-export const FooterImage = styled.img`
-  max-width: 600px;
-  padding: 32px 0;
-`
-
 export const InfoContent = styled.div`
  max-width: 600px;
  margin: 0 0 0em 2px;
@ -173,32 +167,25 @@ export const EpisodeCard = ({
  url,
  hasPassed,
  videoUrl,
+  onClickButton,
+  tzShort,
  theme,
  peertubeReplay,
-  id,
+  id
 }) => {
  const startDate = new Date(beginsOn)
+  const utcDate = zonedTimeToUtc(startDate, 'Europe/Berlin')

-  const { timeZone } = Intl.DateTimeFormat().resolvedOptions() // client timezone eg. 'Europe/Berlin'
-  const utcDate = zonedTimeToUtc(startDate, timeZone) // convert the start date to UTC
-
+  const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
  const zonedDate = utcToZonedTime(utcDate, timeZone)
-
-  const timezoneLabel = format(
-    zonedDate,
-    hasPassed ? 'dd/MM/yy' : 'do LLLL y // HH:mm zzz',
-    {
-      timeZone,
-      locale: enGB,
-    }
-  )
-
  return (
    <VCWrapper id={id}>
      <DateLabel size={textSizes.lg} colour={theme.foreground}>
        {`${hasPassed ? translations.en.streamDatePast : ''}`}
        <Span bold colour={theme.foreground}>
-          {timezoneLabel}
+          {hasPassed
+            ? format(zonedDate, 'dd/MM/yy')
+            : `${format(zonedDate, 'do LLLL y // HH:mm')} ${tzShort}`}
        </Span>
      </DateLabel>
      {videoUrl && hasPassed ? (
@ -212,25 +199,11 @@ export const EpisodeCard = ({
          <VCImg src={image} alt="" />
        </Fragment>
      )}
-      <Markdown withLinebreaks theme={theme}>
-        {description}
-      </Markdown>
+      <Markdown theme={theme}>{description}</Markdown>
      {hasPassed ? (
-        <a href={peertubeReplay.url || url}>
-          <Button>
-            {peertubeReplay.url
-              ? translations.en.watchEpisode
-              : translations.en.eventDetails}
-          </Button>
-        </a>
+        <a href={peertubeReplay.url || url}><Button>{peertubeReplay.url ? translations.en.watchEpisode : translations.en.eventDetails}</Button></a>
      ) : (
-        <ButtonsRows
-          title={title}
-          description={description}
-          beginsOn={beginsOn}
-          endsOn={endsOn}
-          url={url}
-        />
+        <ButtonsRows title={title} description={description} beginsOn={beginsOn} endsOn={endsOn} url={url} />
      )}
    </VCWrapper>
  )
--- a/src/store/index.js
+++ b/src/store/index.js
--- a/static/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
--- a/static/browserconfig.xml
+++ b/static/browserconfig.xml
--- a/static/favicon-16x16.png
+++ b/static/favicon-16x16.png
--- a/static/favicon-32x32.png
+++ b/static/favicon-32x32.png
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/static/logo.png
+++ b/static/logo.png
--- a/static/meta.png
+++ b/static/meta.png
--- a/static/mstile-150x150.png
+++ b/static/mstile-150x150.png
--- a/static/safari-pinned-tab.svg
+++ b/static/safari-pinned-tab.svg
--- a/static/site.webmanifest
+++ b/static/site.webmanifest