import { Fragment, h, render } from 'preact' import { useEffect, useState } from 'preact/hooks' import { ThemeProvider } from 'styled-components' import { BrowserRouter, Route, Switch } from 'react-router-dom' import { isWithinInterval, subHours, addHours } from 'date-fns' import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz' import Main from './app' import SeriesPage from './src/pages/SeriesPage' import { useEventApi, usePeertubeApi } from './src/hooks/data' import { useStreamStore, useTheme, useUiStore } from './src/store' import { useTimeout } from './src/hooks/timerHooks' import LoaderLayout from './src/pages/LoaderLayout' import FourOhFour from './src/pages/404' import Series from './src/pages/Series' import Program from './src/pages/Program' import StreamPreview from './src/components/StreamPreview' import Video from './src/components/Video' // import { useWindowSize } from './src/hooks/dom' const App = () => { const { theme } = useTheme((store) => store) const { data, loading: eventsLoading, error } = useEventApi() const [minLoadTimePassed, setMinTimeUp] = useState(false) const { setCurrentStream, currentStream, streamIsLive } = useStreamStore(store => store) const streamActive = useUiStore(store => store.streamActive) usePeertubeApi(data.episodes) 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, 'Europe/Berlin') const zonedEndDate = utcToZonedTime(utcEndDate, 'Europe/Berlin') if ( isWithinInterval(new Date(), { start: subHours(zonedStartDate, 2), end: addHours(zonedEndDate, 1), }) ) { setCurrentStream(stream) } }) } }, [eventsLoading]) // console.log({ episodes: data.episodes, series: data.series }) const seriesData = data.series ? Object.values(data.series) : [] return ( {!seriesData.length || eventsLoading || !minLoadTimePassed || error ? ( ) : ( {seriesData.length ? seriesData.map(series => ( )) : null} {streamActive ? )} ) } const appEl = document.getElementById('app') render(, appEl)