stream/index.js

92 lines
3.2 KiB
JavaScript
Raw Normal View History

import { Fragment, h, render } from 'preact'
import { useEffect, useState } from 'preact/hooks'
2021-10-20 14:33:06 +00:00
import { ThemeProvider } from 'styled-components'
2021-10-11 13:50:24 +00:00
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import { isWithinInterval, subHours, addHours } from 'date-fns'
import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'
2021-10-11 13:50:24 +00:00
import Main from './app'
import SeriesPage from './src/pages/SeriesPage'
import { useEventApi, usePeertubeApi } from './src/hooks/data'
2021-11-01 22:34:29 +00:00
import { useStreamStore, useTheme, useUiStore } from './src/store'
2021-10-11 13:50:24 +00:00
import { useTimeout } from './src/hooks/timerHooks'
import LoaderLayout from './src/pages/LoaderLayout'
2021-10-15 13:37:54 +00:00
import FourOhFour from './src/pages/404'
import Series from './src/pages/Series'
2021-10-22 13:44:28 +00:00
import Program from './src/pages/Program'
import StreamPreview from './src/components/StreamPreview'
2021-11-01 22:34:29 +00:00
import Video from './src/components/Video'
// import { useWindowSize } from './src/hooks/dom'
2021-10-11 13:50:24 +00:00
const App = () => {
2021-10-20 14:33:06 +00:00
const { theme } = useTheme((store) => store)
2021-11-01 22:34:29 +00:00
const { data, loading: eventsLoading, error } = useEventApi()
2021-10-11 13:50:24 +00:00
const [minLoadTimePassed, setMinTimeUp] = useState(false)
const { setCurrentStream, currentStream, streamIsLive } = useStreamStore(store => store)
2021-11-01 22:34:29 +00:00
const streamActive = useUiStore(store => store.streamActive)
usePeertubeApi(data.episodes)
2021-10-11 13:50:24 +00:00
useTimeout(() => {
setMinTimeUp(true)
}, 1500)
useEffect(() => {
if (Array.isArray(data.episodes)) {
data.episodes.forEach(stream => {
const utcStartDate = zonedTimeToUtc(
new Date(stream.beginsOn),
'Europe/Berlin'
)
const utcEndDate = zonedTimeToUtc(new Date(stream.endsOn), '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),
})
) {
setCurrentStream(stream)
}
})
}
}, [eventsLoading])
2021-10-22 13:44:28 +00:00
// console.log({ episodes: data.episodes, series: data.series })
const seriesData = data.series ? Object.values(data.series) : []
2021-10-11 13:50:24 +00:00
2021-10-20 14:33:06 +00:00
return (
<ThemeProvider theme={theme}>
2021-11-01 22:34:29 +00:00
{!seriesData.length || eventsLoading || !minLoadTimePassed || error ? (
<LoaderLayout error={error} />
2021-10-20 14:33:06 +00:00
) : (
<Fragment>
<BrowserRouter>
<Switch>
2021-11-01 22:34:29 +00:00
<Route exact path="/" component={Program} />
<Route exact path="/series" component={Series} />
<Route exact path="/program" component={Program} />
{seriesData.length ? seriesData.map(series => (
<Route exact path={`/series/${series.slug}`}>
<SeriesPage data={series} />
</Route>)) : null}
<Route path="*">
<FourOhFour />
</Route>
</Switch>
</BrowserRouter>
2021-11-01 22:34:29 +00:00
{streamActive ? <Video stream={currentStream} /> :
<StreamPreview stream={currentStream} isLive={streamIsLive} />}
</Fragment>
2021-10-20 14:33:06 +00:00
)}
</ThemeProvider>)
2021-10-11 13:50:24 +00:00
}
2021-03-05 12:17:51 +00:00
const appEl = document.getElementById('app')
2021-03-05 12:17:51 +00:00
render(<App />, appEl)