Refactor/time formatting (#696)

* chore: upgrade related dependencies

* fix: skip sentry on dev

* refactor: unify time formatting

* refactor: display default format for page
This commit is contained in:
Carlos Valente
2024-01-09 15:30:11 +01:00
committed by GitHub
parent 9031051465
commit b4e73ff6b5
54 changed files with 1177 additions and 687 deletions
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { AnimatePresence, motion } from 'framer-motion';
import { Message, OntimeEvent, Playback, Settings, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
import { millisToString, removeLeadingZero, removeSeconds } from 'ontime-utils';
import { overrideStylesURL } from '../../../common/api/apiConstants';
import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
@@ -11,11 +12,11 @@ import { getTimerOptions } from '../../../common/components/view-params-editor/c
import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
import { TimeManagerType } from '../../../common/models/TimeManager.type';
import { formatTime } from '../../../common/utils/time';
import { formatTime, getDefaultFormat } from '../../../common/utils/time';
import { isStringBoolean } from '../../../common/utils/viewUtils';
import { useTranslation } from '../../../translation/TranslationProvider';
import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
import { getTimerByType, removePrependedZero } from '../common/viewerUtils';
import { getTimerByType } from '../common/viewerUtils';
import './Timer.scss';
@@ -85,10 +86,7 @@ export default function Timer(props: TimerProps) {
const hideClockSeconds = searchParams.get('hideClockSeconds');
userOptions.hideClockSeconds = isStringBoolean(hideClockSeconds);
const clock = formatTime(time.clock, {
showSeconds: !userOptions.hideClockSeconds,
format: 'hh:mm:ss a',
});
const clock = formatTime(time.clock);
const hideTimerSeconds = searchParams.get('hideTimerSeconds');
userOptions.hideTimerSeconds = isStringBoolean(hideTimerSeconds);
@@ -117,13 +115,17 @@ export default function Timer(props: TimerProps) {
: viewSettings.normalColor;
const stageTimer = getTimerByType(time);
let display = '-- : -- : --';
let display = millisToString(stageTimer, { fallback: '-- : -- : --' });
if (stageTimer !== null) {
display = formatTime(stageTimer, {
showSeconds: !userOptions.hideTimerSeconds,
format: 'hh:mm:ss a',
});
display = removePrependedZero(display);
if (hideTimerSeconds) {
display = removeSeconds(display);
}
display = removeLeadingZero(display);
// last unit rounds up in negative timers
const isNegative = stageTimer ?? 0 < 0;
if (isNegative && display === '0') {
display = '-1';
}
if (display.length < 3) {
display = `${display} ${getLocalizedString('common.minutes')}`;
}
@@ -140,7 +142,8 @@ export default function Timer(props: TimerProps) {
const timerContainerClasses = `timer-container ${showBlinking ? (showOverlay ? '' : 'blink') : ''}`;
const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`;
const timerOptions = getTimerOptions(settings?.timeFormat ?? '24');
const defaultFormat = getDefaultFormat(settings?.timeFormat);
const timerOptions = getTimerOptions(defaultFormat);
return (
<div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>