diff options
| author | Yuval Adam <_@yuv.al> | 2025-09-24 10:52:38 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-09-24 10:52:38 +0200 |
| commit | 2a050b383bcafefb8fc378531d6f15f352fdb5a5 (patch) | |
| tree | 3170255e4a0b6e5488a3b851d8d9a0873e95747e /src/components/Geshem.tsx | |
| parent | c9d9d3a49aed068a7fe3dadcd8dd06f938e6d9b5 (diff) | |
Override all files with v8 implementation
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 |
