diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Geshem.tsx | 7 | ||||
| -rw-r--r-- | src/Slider.tsx | 3 | ||||
| -rw-r--r-- | src/config.tsx | 4 |
3 files changed, 10 insertions, 4 deletions
diff --git a/src/Geshem.tsx b/src/Geshem.tsx index 5210622..6e88f19 100644 --- a/src/Geshem.tsx +++ b/src/Geshem.tsx @@ -5,7 +5,7 @@ import { Map } from "./Map"; import { Slider } from "./Slider"; import { DateTime } from "./Datetime"; -import { IMAGES_BASE_URL } from "./config"; +import { IMAGES_BASE_URL, PLAYBACK_HOURS, PLAYBACK_SLOTS } from "./config"; import "./Geshem.css"; import "rc-slider/assets/index.css"; @@ -25,6 +25,7 @@ interface GeshemProps { date?: string } + export function Geshem({ date }: GeshemProps) { const [images, setImages] = useState<string[]>([]); const [playback] = useState( @@ -32,7 +33,7 @@ export function Geshem({ date }: GeshemProps) { new URL(window.location.toString()).searchParams.get("history") || undefined ); - const [slider, setSlider] = useState(playback ? 143 : 9); + const [slider, setSlider] = useState(playback ? PLAYBACK_SLOTS : 9); useEffect(() => { const fetchImages = async () => @@ -43,7 +44,7 @@ export function Geshem({ date }: GeshemProps) { const buildPlayback = async () => { const date = playback; - const hours = Array.from(Array(24).keys()).map( + const hours = Array.from(Array(PLAYBACK_HOURS).keys()).map( h => `${String(h).padStart(2, "0")}` ); const minutes = Array.from(Array(6).keys()).map( diff --git a/src/Slider.tsx b/src/Slider.tsx index 4d287a2..50223fc 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -1,5 +1,6 @@ import React from "react"; import RcSlider, { SliderProps, SliderRef } from 'rc-slider/lib/Slider'; +import { PLAYBACK_SLOTS } from "./config"; // use workaround from: https://github.com/react-component/slider/issues/835#issuecomment-1201805736 const CustomSlider = RcSlider as React.ForwardRefExoticComponent<SliderProps<number> & React.RefAttributes<SliderRef>>; @@ -32,7 +33,7 @@ export function Slider({ playback, slider, setSlider }: GeshemSliderProps) { <div id="slider"> <CustomSlider min={0} - max={playback ? 143 : 9} + max={playback ? PLAYBACK_SLOTS : 9} defaultValue={slider} handleStyle={handleStyle} railStyle={railStyle} diff --git a/src/config.tsx b/src/config.tsx index 0a79239..4ca4578 100644 --- a/src/config.tsx +++ b/src/config.tsx @@ -13,3 +13,7 @@ export const IMAGE_COORDINATES = [ [37.7157066403, 29.4538271687], [31.9347389087, 29.4373462909] ]; + +export const PLAYBACK_HOURS = 2; + +export const PLAYBACK_SLOTS = (PLAYBACK_HOURS * 6) - 1;
\ No newline at end of file |