stream/app.js

73 lines
2.1 KiB
JavaScript
Raw Normal View History

2021-03-05 12:17:51 +00:00
import { h } from 'preact'
2021-03-11 20:24:44 +00:00
import { useState, useEffect } from 'preact/hooks'
2021-03-24 15:24:34 +00:00
import { isWithinInterval, subHours } from 'date-fns'
2021-05-23 15:21:15 +00:00
import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz'
2021-03-24 15:24:34 +00:00
import { addHours } from 'date-fns/esm'
2021-03-05 12:17:51 +00:00
import Video from './src/components/Video'
import config from './src/data/config'
import Info from './src/components/Info'
2021-03-24 15:24:34 +00:00
import { useEventStream } from './src/hooks/data'
2021-03-11 20:24:44 +00:00
import { useTimeout } from './src/hooks/timerHooks'
2021-03-05 12:17:51 +00:00
export default () => {
2021-03-24 15:24:34 +00:00
const [currentVideo, setCurrentVideo] = useState(null)
2021-03-29 16:03:46 +00:00
const [streamIsLive, setStreamIsLive] = useState(false)
2021-03-24 15:24:34 +00:00
const [infoActive, setInfoActive] = useState(false)
2021-03-11 20:24:44 +00:00
const [minLoadTimePassed, setMinTimeUp] = useState(false)
2021-03-24 15:24:34 +00:00
const { data, loading } = useEventStream()
2021-03-11 20:24:44 +00:00
useTimeout(() => {
setMinTimeUp(true)
}, 1500)
useEffect(() => {
if (data && data.length) {
2021-03-24 15:24:34 +00:00
data.forEach((stream, index) => {
2021-05-23 15:21:15 +00:00
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)
2021-03-24 15:24:34 +00:00
if (
isWithinInterval(new Date(), {
2021-05-23 15:21:15 +00:00
start: subHours(zonedStartDate, 1),
end: addHours(zonedEndDate, 1),
2021-03-24 15:24:34 +00:00
})
) {
setCurrentVideo(stream)
}
if (
isWithinInterval(new Date(), {
2021-05-23 15:21:15 +00:00
start: zonedStartDate,
end: zonedEndDate,
2021-03-24 15:24:34 +00:00
})
) {
2021-03-29 16:03:46 +00:00
setStreamIsLive(true)
2021-03-11 20:24:44 +00:00
}
})
}
}, [data])
2021-03-05 12:17:51 +00:00
return (
<div>
2021-03-24 15:24:34 +00:00
{currentVideo && !infoActive && minLoadTimePassed ? (
2021-03-29 16:03:46 +00:00
<Video video={currentVideo} setInfoActive={setInfoActive} />
2021-03-11 20:24:44 +00:00
) : (
2021-03-24 15:24:34 +00:00
<Info
data={data}
loading={loading || !minLoadTimePassed}
infoActive={infoActive}
// infoActive
2021-03-24 15:24:34 +00:00
currentVideo={currentVideo}
setInfoActive={setInfoActive}
/>
2021-03-11 20:24:44 +00:00
)}
2021-03-05 12:17:51 +00:00
</div>
)
}