mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-11 18:33:53 +00:00
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:
committed by
arc-alex
parent
5c47a834b5
commit
8e994fb0df
@@ -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'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user