fix 'last stream' message on series card

src/components/SeriesCard/index.js

@@ -7,15 +7,32 @@ 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 prefix = hasFutureEpisodes
-    const mainText = formatDistanceToNow(new Date(episodes[hasFutureEpisodes ? 'future' : 'past'][0][hasFutureEpisodes ? 'endsOn' : 'beginsOn']), { addSuffix: true })
+      ? strings.en.nextStream
+      : strings.en.lastStream
+
+    console.log({ el1: episodes })
+
+    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 +41,24 @@ const SeriesCard = ({ series: { image, episodes, title, subtitle, hosts: hostsAr
     <Link to={`series/${slug}`}>
       <Wrapper {...rest}>
         <Img src={image}>
-          <LabelBlock
+          <LabelBlock $position="top">
-            $position="top"
+            {episodesLength}{' '}
-          >
+            {episodesLength === 1 ? strings.en.episode : strings.en.episodes}
-            {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>
+        <H2 size={32} colour={colours.rose}>
-        <H3 size={21} colour={colours.rose}>{subtitle}</H3>
+          {title}
-        {hosts.length ? <Label size={16} colour={colours.rose}>— {andList(hosts)}</Label> : null}
+        </H2>
+        <H3 size={21} colour={colours.rose}>
+          {subtitle}
+        </H3>
+        {hosts.length ? (
+          <Label size={16} colour={colours.rose}>
+            — {andList(hosts)}
+          </Label>
+        ) : null}
       </Wrapper>
     </Link>
   )

src/components/Video/index.js

@@ -1,13 +1,7 @@
 import { h } from 'preact'
 import { useEffect, useRef, useState } from 'preact/hooks'
-import {
+import { instanceOf, number, object, shape, string } from 'prop-types'
-  instanceOf,
+
-  number,
-  object,
-  shape,
-  string,
-} from 'prop-types'
-import 'regenerator-runtime/runtime'
 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'

src/hooks/data.js

@@ -1,12 +1,13 @@
-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 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([])
@@ -29,7 +30,7 @@ export const useEventCalendar = () => {
           vevent.getFirstPropertyValue('status') === null ||
           (vevent.getFirstPropertyValue('status') &&
             vevent.getFirstPropertyValue('status').toUpperCase() ===
-            'CONFIRMED')
+              'CONFIRMED')
       )
       .map(vevent => {
         const event = new ICAL.Event(vevent)
@@ -99,10 +100,11 @@ export const useEventCalendar = () => {
   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,14 @@ export const useEventApi = () => {
       setLoading(true)
 
       try {
-
         const { data: responseData } = await axios.get(
           `${config.EVENTS_API_URL}/events`
         )
+        console.log({ responseData })
         setData(responseData)
         console.log({ data: responseData })
         setLoading(false)
-      }
+      } catch (err) {
-      catch (err) {
         console.log('ERROR')
         setError(err)
         setLoading(false)
@@ -135,7 +136,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 +149,11 @@ export const usePeertubeApi = async () => {
     const { peertubeLive } = currentStream
     if (!peertubeLive || !peertubeLive.id) return
 
-
     const {
-      data: { state, embedPath }
+      data: { state, embedPath },
-    } = await axios.get(`https://tv.undersco.re/api/v1/videos/${peertubeLive.id}`)
+    } = await axios.get(
+      `https://tv.undersco.re/api/v1/videos/${peertubeLive.id}`
+    )
 
     setStreamIsLive(state.id === 1)
     setCurrentStream({ ...currentStream, embedPath })
@@ -156,7 +163,10 @@ export const usePeertubeApi = async () => {
     fetchData()
   }, [])
 
-  useInterval(() => {
+  useInterval(
-    fetchData()
+    () => {
-  }, streamIsLive ? secondsToMilliseconds(15) : secondsToMilliseconds(1))
+      fetchData()
-}
+    },
+    streamIsLive ? secondsToMilliseconds(15) : secondsToMilliseconds(1)
+  )
+}