stream/app.js
2021-03-24 16:24:34 +01:00

74 lines
2.0 KiB
JavaScript

import { h } from 'preact'
import { useState, useEffect } from 'preact/hooks'
import { isWithinInterval, subHours } from 'date-fns'
import { addHours } from 'date-fns/esm'
import Video from './src/components/Video'
import config from './src/data/config'
import Info from './src/components/Info'
import { useEventStream } from './src/hooks/data'
import { useTimeout } from './src/hooks/timerHooks'
export default () => {
const [isPlaying, setIsPlaying] = useState(false)
const [currentVideo, setCurrentVideo] = useState(null)
const [streamIsLive, setStreamLive] = useState(false)
const [infoActive, setInfoActive] = useState(false)
const [minLoadTimePassed, setMinTimeUp] = useState(false)
const { data, loading } = useEventStream()
useTimeout(() => {
setMinTimeUp(true)
}, 1500)
useEffect(() => {
if (data && data.length) {
data.forEach((stream, index) => {
// if (stream.title === 'A Wider Screen') {
if (index === 0) {
setCurrentVideo(stream)
}
if (
isWithinInterval(new Date(), {
start: subHours(stream.start, 1),
end: addHours(stream.end, 1),
})
) {
setCurrentVideo(stream)
}
if (
isWithinInterval(new Date(), {
start: stream.start,
end: stream.end,
})
) {
setStreamLive(`${config.peertube_root}${stream.embedPath}`)
}
})
}
}, [data])
return (
<div>
{currentVideo && !infoActive && minLoadTimePassed ? (
<Video
playing={isPlaying}
setPlaying={setIsPlaying}
src={`${config.peertube_root}${currentVideo.embedPath}`}
title={currentVideo.title}
org={currentVideo.channel.displayName}
setInfoActive={setInfoActive}
/>
) : (
<Info
data={data}
loading={loading || !minLoadTimePassed}
infoActive={infoActive}
currentVideo={currentVideo}
setInfoActive={setInfoActive}
/>
)}
</div>
)
}