Fix binding HMSInput / slider

src/HMSInput.js

@@ -26,13 +26,15 @@ const StyledRoot = styled('div')({
 
 function HMSInput({ seconds, onChange }) {
   const [hms, setHms] = useState(secondsToHMSarray(seconds));
+  console.log('hms', secondsToHMSarray(seconds));
+  console.log('seconds', seconds);
 
   useEffect(() => {
     setHms(secondsToHMSarray(seconds));
   }, [seconds]);
 
   const someChange = (ev) => {
-    const newState = { ...hms, [ev.target.name]: Number(ev.target.value) };
+    const newState = secondsToHMSarray(Number(ev.target.value));
     setHms(newState);
     onChange(newState.hours * 3600 + newState.minutes * 60 + newState.seconds);
   };

src/utils.js

@@ -19,5 +19,9 @@ export function secondsToHMS(secs) {
 /** Split a second to [hours, minutes, seconds]  */
 export function secondsToHMSarray(secs) {
   const h = Math.floor(secs / 3600);
-  return [h, Math.floor(secs / 60) - h * 60, secs % 60];
+  return {
+    hours: h,
+    minutes: Math.floor(secs / 60) - h * 60,
+    seconds: secs % 60,
+  };
 }