73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
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>
|
|
)
|
|
}
|