Refactor: ms for api calls (#1593)

* use ms for api calls

* change it in UI

* update comment

* rename variables

* refactor: addtime api logic
This commit is contained in:
Alex Christoffer Rasmussen
2025-05-02 19:42:02 +02:00
committed by arc-alex
parent 5c47a834b5
commit 8e994fb0df
3 changed files with 30 additions and 30 deletions
@@ -2,7 +2,7 @@ import { IoAdd, IoRemove } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/react';
import { useLocalStorage } from '@mantine/hooks';
import { Playback } from 'ontime-types';
import { MILLIS_PER_HOUR, MILLIS_PER_SECOND, parseUserTime } from 'ontime-utils';
import { MILLIS_PER_HOUR, parseUserTime } from 'ontime-utils';
import TimeInput from '../../../../common/components/input/time-input/TimeInput';
import { setPlayback } from '../../../../common/hooks/useSocket';
@@ -17,29 +17,29 @@ interface AddTimeProps {
export default function AddTime(props: AddTimeProps) {
const { playback } = props;
const [time, setTime] = useLocalStorage({ key: 'add-time', defaultValue: 300_000 }); // 5 minutes
const [timeInMs, setTime] = useLocalStorage({ key: 'add-time', defaultValue: 300_000 }); // 5 minutes
const handleTimeChange = (_field: string, value: string) => {
const newTime = parseUserTime(value);
const newTimeInMs = parseUserTime(value);
// cap add time to 1 hour
setTime(Math.min(newTime, MILLIS_PER_HOUR));
setTime(Math.min(newTimeInMs, MILLIS_PER_HOUR));
};
const handleAddTime = (direction: 'add' | 'remove') => {
// API expects input in seconds
// API expects input in milliseconds
if (direction === 'add') {
setPlayback.addTime(time / MILLIS_PER_SECOND);
setPlayback.addTime(timeInMs);
} else {
setPlayback.addTime((-1 * time) / MILLIS_PER_SECOND);
setPlayback.addTime(-1 * timeInMs);
}
};
const canAddTime = playback === Playback.Play || playback === Playback.Pause;
const doDisableButtons = !canAddTime || time === 0;
const doDisableButtons = !canAddTime || timeInMs === 0;
return (
<div className={style.addTime}>
<TimeInput name='addtime' submitHandler={handleTimeChange} time={time} placeholder='Add time' />
<TimeInput name='addtime' submitHandler={handleTimeChange} time={timeInMs} placeholder='Add time' />
<div className={style.addButtons}>
<Tooltip label='Remove time' openDelay={tooltipDelayMid} shouldWrapChildren>
<TapButton onClick={() => handleAddTime('remove')} disabled={doDisableButtons} className={style.tallButtons}>
@@ -59,15 +59,20 @@ export function AuxTimer() {
}
function AuxTimerInput() {
const time = useAuxTimerTime();
const newTimeInMs = useAuxTimerTime();
const { setDuration } = setAuxTimer;
const handleTimeUpdate = (_field: string, value: string) => {
const newTime = parseUserTime(value);
setDuration(newTime / 1000); // frontend api is seconds based
const newTimeInMs = parseUserTime(value);
setDuration(newTimeInMs);
};
return (
<TimeInput<'auxTimer'> submitHandler={handleTimeUpdate} name='auxTimer' time={time} placeholder='Aux Timer 1' />
<TimeInput<'auxTimer'>
submitHandler={handleTimeUpdate}
name='auxTimer'
time={newTimeInMs}
placeholder='Aux Timer 1'
/>
);
}