stream/app.js

import { h } from 'preact'
import { useState, useEffect } from 'preact/hooks'
import { isWithinInterval, subHours, addHours } from 'date-fns'
import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'

import Video from './src/components/Video'
import Info from './src/components/Info'
import { useEventCalendar, useEventApi } from './src/hooks/data'
import { useTimeout } from './src/hooks/timerHooks'

export default (props) => {

  // console.log({ props })
  const [currentVideo, setCurrentVideo] = useState(null)
  const [streamIsLive, setStreamIsLive] = useState(false)
  const [infoActive, setInfoActive] = useState(false)
  const [minLoadTimePassed, setMinTimeUp] = useState(false)
  const { data: calData, loading } = useEventCalendar()
  const { data: eventsData, loading: eventsLoading } = useEventApi()

  useTimeout(() => {
    setMinTimeUp(true)
  }, 1500)

  useEffect(() => {
    if (calData && calData.length) {
      calData.forEach((stream, index) => {
        const utcStartDate = zonedTimeToUtc(
          new Date(stream.start),
          'Europe/Berlin'
        )
        const utcEndDate = zonedTimeToUtc(new Date(stream.end), 'Europe/Berlin')
        const { timeZone } = Intl.DateTimeFormat().resolvedOptions()

        const zonedStartDate = utcToZonedTime(utcStartDate, timeZone)
        const zonedEndDate = utcToZonedTime(utcEndDate, timeZone)
        if (
          isWithinInterval(new Date(), {
            start: subHours(zonedStartDate, 1),
            end: addHours(zonedEndDate, 1),
          })
        ) {
          setCurrentVideo(stream)
        }
        if (
          isWithinInterval(new Date(), {
            start: zonedStartDate,
            end: zonedEndDate,
          })
        ) {
          setStreamIsLive(true)
        }
      })
    }
  }, [calData, eventsData, eventsLoading])

  return (
    <div>
      {currentVideo && !infoActive && minLoadTimePassed ? (
        <Video video={currentVideo} setInfoActive={setInfoActive} />
      ) : (
        <Info
          data={calData}
          loading={false}
          infoActive={infoActive}
          currentVideo={currentVideo}
          setInfoActive={setInfoActive}
        />
      )}
    </div>
  )
}