diff options
Diffstat (limited to 'src/components/Geshem.tsx')
| -rw-r--r-- | src/components/Geshem.tsx | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/src/components/Geshem.tsx b/src/components/Geshem.tsx new file mode 100644 index 0000000..982d841 --- /dev/null +++ b/src/components/Geshem.tsx @@ -0,0 +1,65 @@ +import React, { useState, useEffect } from "react"; + +import { Map } from "./Map"; +import { Slider } from "./Slider"; +import { DateTime } from "./Datetime"; + +import { IMAGES_BASE_URL, PLAYBACK_HOURS, PLAYBACK_SLOTS } from "../config"; + +interface GeshemProps { + date?: string; +} + +export function Geshem({ date }: GeshemProps) { + const [images, setImages] = useState<string[]>([]); + const [playback] = useState( + date || + (typeof window !== 'undefined' ? new URL(window.location.toString()).searchParams.get("history") : null) || + undefined + ); + const [slider, setSlider] = useState(playback ? PLAYBACK_SLOTS : 9); + + useEffect(() => { + const fetchImages = async () => + fetch(`${IMAGES_BASE_URL}/imgs.json`) + .then(res => res.json()) + .then(imgs => (imgs as any)["280"]) + .then(setImages); + + const buildPlayback = async () => { + const date = playback; + const hours = Array.from(Array(PLAYBACK_HOURS).keys()).map( + h => `${String(h).padStart(2, "0")}` + ); + const minutes = Array.from(Array(6).keys()).map( + m => `${String(m * 10).padStart(2, "0")}` + ); + const paths = hours.reduce<string[]>( + (acc, h) => + acc.concat(minutes.map(m => `imgs/${date}/${h}${m}/280.png`)), + [] + ); + setImages(paths); + }; + + let timer: number; + if (playback) { + buildPlayback(); + } else { + fetchImages(); + timer = window.setInterval(fetchImages, 60 * 1000); + } + + return () => { + if (timer !== undefined) clearInterval(timer); + }; + }, [playback]); + + return ( + <> + <Map images={images} slider={slider} /> + <DateTime images={images} slider={slider} /> + <Slider slider={slider} playback={playback} setSlider={setSlider} /> + </> + ); +}
\ No newline at end of file |