Spaces:
Sleeping
Sleeping
File size: 3,113 Bytes
d2226ad |
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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
import React, { useEffect, useRef } from "react";
export function TimeController({
time,
onTimeChange,
isPlaying,
setIsPlaying,
}) {
const timeRef = useRef(time);
const onTimeChangeRef = useRef(onTimeChange);
useEffect(() => {
timeRef.current = time;
onTimeChangeRef.current = onTimeChange;
}, [time, onTimeChange]);
useEffect(() => {
let interval;
if (isPlaying) {
interval = setInterval(() => {
const date = new Date(timeRef.current);
date.setMinutes(date.getMinutes() + 15);
const nextTime = toLocalISOString(date);
onTimeChangeRef.current(nextTime);
}, 100);
}
return () => clearInterval(interval);
}, [isPlaying]);
const toLocalISOString = (date) => {
const offset = date.getTimezoneOffset() * 60000;
return new Date(date - offset).toISOString().slice(0, 16);
};
const handleSliderChange = (e) => {
const totalMinutes = parseInt(e.target.value);
const date = new Date(time);
date.setHours(Math.floor(totalMinutes / 60));
date.setMinutes(totalMinutes % 60);
onTimeChange(toLocalISOString(date));
};
const dateObj = new Date(time);
const minutesValue = dateObj.getHours() * 60 + dateObj.getMinutes();
const styles = {
container: {
position: "absolute",
bottom: "30px",
left: "50%",
transform: "translateX(-50%)",
display: "flex",
alignItems: "center",
gap: "15px",
background: "rgba(20, 20, 30, 0.9)",
backdropFilter: "blur(8px)",
padding: "12px 25px",
borderRadius: "30px",
border: "1px solid rgba(255, 255, 255, 0.2)",
boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
zIndex: 20,
color: "white",
minWidth: "400px",
},
button: {
background: isPlaying ? "#ff5555" : "#4ADE80",
border: "none",
borderRadius: "50%",
width: "40px",
height: "40px",
color: "black",
fontSize: "1.2rem",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontWeight: "bold",
transition: "background 0.2s",
},
slider: { flex: 1, cursor: "pointer", accentColor: "#88ccff" },
display: {
fontFamily: "monospace",
fontSize: "1.1rem",
minWidth: "60px",
textAlign: "center",
},
date: {
fontSize: "0.75rem",
color: "#aaa",
position: "absolute",
bottom: "-20px",
left: "50%",
transform: "translateX(-50%)",
whiteSpace: "nowrap",
},
};
return (
<div style={styles.container}>
<button style={styles.button} onClick={() => setIsPlaying(!isPlaying)}>
{isPlaying ? "⏸" : "▶"}
</button>
<input
type="range"
min="0"
max="1439"
value={minutesValue}
onChange={handleSliderChange}
style={styles.slider}
/>
<div style={styles.display}>
{dateObj.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
</div>
<div style={styles.date}>{dateObj.toLocaleDateString()}</div>
</div>
);
}
|