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 { Tooltip } from '@chakra-ui/react';
import { useLocalStorage } from '@mantine/hooks'; import { useLocalStorage } from '@mantine/hooks';
import { Playback } from 'ontime-types'; 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 TimeInput from '../../../../common/components/input/time-input/TimeInput';
import { setPlayback } from '../../../../common/hooks/useSocket'; import { setPlayback } from '../../../../common/hooks/useSocket';
@@ -17,29 +17,29 @@ interface AddTimeProps {
export default function AddTime(props: AddTimeProps) { export default function AddTime(props: AddTimeProps) {
const { playback } = props; 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 handleTimeChange = (_field: string, value: string) => {
const newTime = parseUserTime(value); const newTimeInMs = parseUserTime(value);
// cap add time to 1 hour // 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') => { const handleAddTime = (direction: 'add' | 'remove') => {
// API expects input in seconds // API expects input in milliseconds
if (direction === 'add') { if (direction === 'add') {
setPlayback.addTime(time / MILLIS_PER_SECOND); setPlayback.addTime(timeInMs);
} else { } else {
setPlayback.addTime((-1 * time) / MILLIS_PER_SECOND); setPlayback.addTime(-1 * timeInMs);
} }
}; };
const canAddTime = playback === Playback.Play || playback === Playback.Pause; const canAddTime = playback === Playback.Play || playback === Playback.Pause;
const doDisableButtons = !canAddTime || time === 0; const doDisableButtons = !canAddTime || timeInMs === 0;
return ( return (
<div className={style.addTime}> <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}> <div className={style.addButtons}>
<Tooltip label='Remove time' openDelay={tooltipDelayMid} shouldWrapChildren> <Tooltip label='Remove time' openDelay={tooltipDelayMid} shouldWrapChildren>
<TapButton onClick={() => handleAddTime('remove')} disabled={doDisableButtons} className={style.tallButtons}> <TapButton onClick={() => handleAddTime('remove')} disabled={doDisableButtons} className={style.tallButtons}>
@@ -59,15 +59,20 @@ export function AuxTimer() {
} }
function AuxTimerInput() { function AuxTimerInput() {
const time = useAuxTimerTime(); const newTimeInMs = useAuxTimerTime();
const { setDuration } = setAuxTimer; const { setDuration } = setAuxTimer;
const handleTimeUpdate = (_field: string, value: string) => { const handleTimeUpdate = (_field: string, value: string) => {
const newTime = parseUserTime(value); const newTimeInMs = parseUserTime(value);
setDuration(newTime / 1000); // frontend api is seconds based setDuration(newTimeInMs);
}; };
return ( 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'
/>
); );
} }
@@ -1,5 +1,5 @@
import { MessageState, OffsetMode, OntimeEvent, SimpleDirection, SimplePlayback } from 'ontime-types'; import { MessageState, OffsetMode, OntimeEvent, SimpleDirection, SimplePlayback } from 'ontime-types';
import { MILLIS_PER_HOUR, MILLIS_PER_SECOND } from 'ontime-utils'; import { MILLIS_PER_HOUR } from 'ontime-utils';
import { DeepPartial } from 'ts-essentials'; import { DeepPartial } from 'ts-essentials';
@@ -187,27 +187,24 @@ const actionHandlers: Record<string, ActionHandler> = {
throw new Error('No matching method provided'); throw new Error('No matching method provided');
}, },
addtime: (payload) => { addtime: (payload) => {
let time = 0; const time = (() => {
if (payload && typeof payload === 'object') { if (payload && typeof payload === 'object') {
if ('add' in payload) { if ('add' in payload) return numberOrError(payload.add);
time = numberOrError(payload.add); if ('remove' in payload) return numberOrError(payload.remove) * -1;
} else if ('remove' in payload) {
time = numberOrError(payload.remove) * -1;
} }
} else { return numberOrError(payload);
time = numberOrError(payload); })();
}
assert.isNumber(time); assert.isNumber(time);
if (time === 0) { if (time === 0) {
return { payload: 'success' }; return { payload: 'success' };
} }
const timeToAdd = time * MILLIS_PER_SECOND; // frontend is seconds based if (Math.abs(time) > MILLIS_PER_HOUR) {
if (Math.abs(timeToAdd) > MILLIS_PER_HOUR) {
throw new Error(`Payload too large: ${time}`); throw new Error(`Payload too large: ${time}`);
} }
runtimeService.addTime(timeToAdd); runtimeService.addTime(time);
return { payload: 'success' }; return { payload: 'success' };
}, },
/* Extra timers */ /* Extra timers */
@@ -233,13 +230,11 @@ const actionHandlers: Record<string, ActionHandler> = {
} else if (command && typeof command === 'object') { } else if (command && typeof command === 'object') {
const reply = { payload: {} }; const reply = { payload: {} };
if ('duration' in command) { if ('duration' in command) {
// convert duration in seconds to ms const timeInMs = numberOrError(command.duration);
const timeInMs = numberOrError(command.duration) * 1000;
reply.payload = auxTimerService.setTime(timeInMs); reply.payload = auxTimerService.setTime(timeInMs);
} }
if ('addtime' in command) { if ('addtime' in command) {
// convert addTime in seconds to ms const timeInMs = numberOrError(command.addtime);
const timeInMs = numberOrError(command.addtime) * 1000;
reply.payload = auxTimerService.addTime(timeInMs); reply.payload = auxTimerService.addTime(timeInMs);
} }
if ('direction' in command) { if ('direction' in command) {