added footer images on series type + other dertails

replacing chat with widgetbot for now
ch ch changes
2022-09-27 14:29:09 +02:00 · 2022-09-07 16:40:27 +02:00 · 2022-09-07 14:37:49 +02:00 · 2022-09-07 14:37:34 +02:00 · 2022-05-06 15:10:53 +02:00 · 2022-05-06 15:10:40 +02:00
99 changed files with 420 additions and 293 deletions
--- a/.eslintrc
+++ b/.eslintrc
--- a/.gitignore
+++ b/.gitignore
@ -10,3 +10,4 @@ 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"></script>
+    <script src="./index.js" type="module"></script>
    <!-- Matomo -->
    <script type="text/javascript">
      var _paq = (window._paq = window._paq || [])
--- a/index.js
+++ b/index.js
@ -16,13 +16,16 @@ 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)

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

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

  return (
@ -69,23 +73,30 @@ 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,13 +1,11 @@
 {
  "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",
-    "deploy": "yarn parcel build; rsync rsync -aP ./dist/ inu@95.216.203.71:/media/www/stream.undersco.re/"
+    "build": "parcel build index.html && cp -r static dist/static"
  },
  "alias": {
    "react": "preact/compat",
@ -26,7 +24,7 @@
    "ical.js": "^1.4.0",
    "markdown-to-jsx": "^7.1.2",
    "preact": "^10.5.12",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^5.3.0",
    "striptags": "^3.2.0",
@ -35,6 +33,7 @@
  },
  "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",
@ -42,7 +41,7 @@
    "eslint-config-flying-rocket": "^1.1.1",
    "marked": "^2.0.3",
    "module-alias": "^2.0.3",
-    "parcel-bundler": "1.12.3",
+    "parcel": "^2.0.0",
    "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,17 +27,21 @@ const Chat = ({ overlayActive }) => {
          <CloseBox colour={colours.white} size={18} onClick={toggleChatOpen} />
        </ChatHeader>
        <iframe
-          src={`https://titanembeds.com/embed/${config.chat.guildId}?css=${config.chat.css}&defaultchannel=${config.chat.channelId}&lang=en_EN`}
+          src={`https://e.widgetbot.io/channels/${config.chat.guildId}/${config.chat.channelId}`}
          height={(height / 4) * 3}
          width="350"
          frameBorder="0"
-          title="discord-chat"
          className="titanembed"
+          title="discord-chat"
        />
      </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,25 +1,44 @@
 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 strings from '../../data/strings'
-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'

+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 { useEventApi } from '../../hooks/data'
+import { useWindowSize } from '../../hooks/dom'


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

-  button, a{
+  button,
+  a {
    font-size: 16px;
    width: 49%;
    height: 100%;
@ -29,11 +30,12 @@ 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)`
@ -43,26 +45,33 @@ 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: 1em;
+    top: 1.2em;
    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,6 +28,10 @@ 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,15 +7,31 @@ 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 mainText = formatDistanceToNow(new Date(episodes[hasFutureEpisodes ? 'future' : 'past'][0][hasFutureEpisodes ? 'endsOn' : 'beginsOn']), { addSuffix: true })
+    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 }
+    )

    return `${prefix} ${mainText}`
  }
@ -24,21 +40,24 @@ const SeriesCard = ({ series: { image, episodes, title, subtitle, hosts: hostsAr
    <Link to={`series/${slug}`}>
      <Wrapper {...rest}>
        <Img src={image}>
-          <LabelBlock
-            $position="top"
-          >
-            {episodesLength} {episodesLength === 1 ? strings.en.episode : strings.en.episodes}
-          </LabelBlock>
-          <LabelBlock
-            $position="bottom"
-          >
-            {getNextLastStreamText()}
+          <LabelBlock $position="top">
+            {episodesLength}{' '}
+            {episodesLength === 1 ? strings.en.episode : strings.en.episodes}
          </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,10 +1,7 @@
-import { Fragment, h } from 'preact'
+import { 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'
@ -13,18 +10,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 () => {
@ -47,12 +44,30 @@ 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"
@ -64,11 +79,13 @@ 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,13 +1,7 @@
 import { h } from 'preact'
 import { useEffect, useRef, useState } from 'preact/hooks'
-import {
-  instanceOf,
-  number,
-  object,
-  shape,
-  string,
-} from 'prop-types'
-import 'regenerator-runtime/runtime'
+import { instanceOf, number, object, shape, string } from 'prop-types'
+
 import { PeerTubePlayer } from '@peertube/embed-api'

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

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

-
  const toggleVideo = () => {
    if (isPlaying) {
      pauseVideo()
@ -125,7 +117,6 @@ 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,8 +1,9 @@
 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',
@ -11,6 +12,5 @@ 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,108 +1,110 @@
-import { h, render } from 'preact'
+import { h } 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)
-  }
-
-  useEffect(() => {
-    fetchData()
-  }, [])
-
-  return { loading, data }
-}
+//     setLoading(false)
+//   }

+//   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)

@ -111,15 +113,12 @@ 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)
@ -135,7 +134,12 @@ 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

@ -143,10 +147,11 @@ 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 })
@ -156,7 +161,10 @@ 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,20 +14,23 @@ 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}>
@ -48,7 +51,8 @@ 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 striptags from 'striptags'
+import enGB from 'date-fns/locale/en-GB'

 import { H1, Label } from '../../components/Text'
 import Markdown from '../../components/Markdown'
@ -14,6 +14,7 @@ import {
  InfoContent,
  Row,
  LogosRow,
+  FooterImage,
  ActionButton as Button,
  TrailerContainer,
 } from './styles'
@ -26,37 +27,38 @@ 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 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 footerImages = data?.resources?.filter(({ title }) =>
+    title.includes('FOOTER_IMG')
+  )

  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>
@ -64,8 +66,9 @@ const SeriesPage = ({ data }) => {
              </TrailerContainer>
            ) : null}

-            {links ?
-              links.map(linkRow => <Row>
+            {links
+              ? links.map(linkRow => (
+                  <Row>
                    {linkRow.map(link => (
                      <a
                        href={link.resourceUrl}
@ -75,19 +78,15 @@ 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}
-                  tzShort={tzShort}
-                  {...feeditem}
-                />
+                <EpisodeCard theme={theme} key={feeditem.start} {...feeditem} />
              ))}
            </Fragment>
          ) : null}
@ -105,20 +104,34 @@ 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`} />
-              </a>
-              {orgsList.length === 2 && index + 1 !== orgsList.length ? <Label colour={theme.foreground}>{'//'}</Label> : null}
+                {orgsList.length < 4 !== 1 &&
+                orgsList.length < 4 &&
+                index + 1 !== orgsList.length ? (
+                  <Label colour={theme.foreground}>{'//'}</Label>
+                ) : null}
              </Fragment>
            ))}
-        </LogosRow> : null}
+          </LogosRow>
+        ) : null}
+        {footerImages.length
+          ? footerImages.map(image => (
+              <FooterImage
+                src={image.resourceUrl}
+                alt={`${image.orgName} logo`}
+              />
+            ))
+          : null}
      </InfoLayout>
    </Page>
  )
--- a/src/pages/SeriesPage/styles.js
+++ b/src/pages/SeriesPage/styles.js
@ -1,23 +1,24 @@
 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 { slugify } from '../../helpers/string'
+import CrossSvg from '../../components/Svg/Cross'
 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: 22em;
+  height: 21em;
  border: 1px solid ${colours.midnightDarker};
  margin-bottom: 16px;

@ -39,7 +40,6 @@ 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,22 +63,28 @@ 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 {
-      height: 64px;
+    max-height: 42px;
+    width: 25%;
  }
 `

+export const FooterImage = styled.img`
+  max-width: 600px;
+  padding: 32px 0;
+`
+
 export const InfoContent = styled.div`
  max-width: 600px;
  margin: 0 0 0em 2px;
@ -167,25 +173,32 @@ 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()
+  const { timeZone } = Intl.DateTimeFormat().resolvedOptions() // client timezone eg. 'Europe/Berlin'
+  const utcDate = zonedTimeToUtc(startDate, timeZone) // convert the start date to UTC
+
  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}>
-          {hasPassed
-            ? format(zonedDate, 'dd/MM/yy')
-            : `${format(zonedDate, 'do LLLL y // HH:mm')} ${tzShort}`}
+          {timezoneLabel}
        </Span>
      </DateLabel>
      {videoUrl && hasPassed ? (
@ -199,11 +212,25 @@ export const EpisodeCard = ({
          <VCImg src={image} alt="" />
        </Fragment>
      )}
-      <Markdown theme={theme}>{description}</Markdown>
+      <Markdown withLinebreaks 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
Author	SHA1	Message	Date
sunda	3ab937bdb2	added footer images on series type + other dertails	2022-09-27 14:29:09 +02:00
sunda	2651e1cb37	replacing chat with widgetbot for now	2022-09-07 16:40:27 +02:00
sunda	c24124c970	ch ch changes	2022-09-07 14:37:49 +02:00
sunda	fdc031c64b	UNCHANGED (git weirdness)	2022-09-07 14:37:34 +02:00
sunda	6462f327c9	fix 'last stream' message on series card	2022-05-06 15:10:53 +02:00
sunda	e29bc39075	upgrade to parcel 2	2022-05-06 15:10:40 +02:00
sunda	16e45c3030	fixed timezones for current stream lol	2021-11-19 16:37:36 +01:00
sunda	a6a3e6c28e	fixing timezone displays	2021-11-11 17:05:25 +01:00
sunda	15180937f9	added timezones to program items	2021-11-11 12:48:27 +01:00
sunda	1489a0380b	style tweaks	2021-11-11 12:29:11 +01:00