mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-19 22:24:11 +00:00
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:
@@ -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'>
|
||||
|
||||
Reference in New Issue
Block a user