summaryrefslogtreecommitdiff
path: root/src/components/Geshem.tsx
diff options
context:
space:
mode:
authorYuval Adam <_@yuv.al>2025-09-24 10:52:38 +0200
committerYuval Adam <_@yuv.al>2025-09-24 10:52:38 +0200
commit2a050b383bcafefb8fc378531d6f15f352fdb5a5 (patch)
tree3170255e4a0b6e5488a3b851d8d9a0873e95747e /src/components/Geshem.tsx
parentc9d9d3a49aed068a7fe3dadcd8dd06f938e6d9b5 (diff)
Override all files with v8 implementation
Diffstat (limited to 'src/components/Geshem.tsx')
-rw-r--r--src/components/Geshem.tsx65
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