1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
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(0);
useEffect(() => {
const fetchImages = async () =>
fetch(`/imgs/`)
.then(res => res.json())
.then(data => (data as any).images.map((img: any) => img.path))
.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}/gis.png`)),
[]
);
setImages(paths);
};
let timer: number;
if (playback) {
buildPlayback();
} else {
fetchImages();
timer = window.setInterval(fetchImages, 60 * 1000);
}
return () => {
if (timer !== undefined) clearInterval(timer);
};
}, [playback]);
// Update slider to point to the latest image when images change
useEffect(() => {
if (images.length > 0) {
setSlider(prevSlider => {
const maxIndex = playback ? PLAYBACK_SLOTS : images.length - 1;
// If this is the first load (slider is 0) or if slider is out of bounds, set to max
if (prevSlider === 0 || prevSlider > maxIndex) {
return maxIndex;
}
return prevSlider;
});
}
}, [images.length, playback]);
return (
<>
<Map images={images} slider={slider} />
<DateTime images={images} slider={slider} />
<Slider slider={slider} playback={playback} setSlider={setSlider} imageCount={images.length} />
</>
);
}
|
