Refactor/time formatting (#696)

* chore: upgrade related dependencies

* fix: skip sentry on dev

* refactor: unify time formatting

* refactor: display default format for page

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss

@@ -12,12 +12,6 @@
   justify-items: start;
 }
 
-.timer {
-  grid-area: clk;
-  white-space: nowrap;
-  max-width: 18.75rem;
-}
-
 .indicators {
   grid-area: ind;
   width: 100%;

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx

@@ -1,12 +1,11 @@
 import { Tooltip } from '@chakra-ui/react';
 import { Playback } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
+import { millisToMinutes, millisToSeconds, millisToString } from 'ontime-utils';
 
-import TimerDisplay from '../../../../common/components/timer-display/TimerDisplay';
 import { setPlayback, useTimer } from '../../../../common/hooks/useSocket';
-import { millisToMinutes, millisToSeconds } from '../../../../common/utils/dateConfig';
 import { tooltipDelayMid } from '../../../../ontimeConfig';
 import TapButton from '../tap-button/TapButton';
+import TimerDisplay from '../timer-display/TimerDisplay';
 
 import style from './PlaybackTimer.module.scss';
 
@@ -65,9 +64,7 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
           <div className={hasAddedTime ? style.indDelayActive : style.indDelay} />
         </Tooltip>
       </div>
-      <div className={style.timer}>
-        <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} />
-      </div>
+      <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} />
       {isWaiting ? (
         <div className={style.roll}>
           <span className={style.rolltag}>Roll: Countdown to start</span>

apps/client/src/features/control/playback/timer-display/TimerDisplay.module.scss

@@ -0,0 +1,20 @@
+@use '../../../../theme/viewerDefs' as *;
+
+.timer {
+  grid-area: clk;
+  white-space: nowrap;
+  max-width: 18.75rem;
+
+
+  font-family: var(--font-family-override, $viewer-font-family);
+  color: var(--timer-color-override, $timer-color);
+  line-height: 0.9em;
+  text-align: center;
+  letter-spacing: 0.1em;
+  font-weight: 600;
+  font-size: 3.5rem;
+  
+  &.finished {
+    color: $timer-finished-color;
+  }
+}

apps/client/src/features/control/playback/timer-display/TimerDisplay.tsx

@@ -0,0 +1,27 @@
+import { MaybeNumber } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
+
+import { cx } from '../../../../common/utils/styleUtils';
+
+import style from './TimerDisplay.module.scss';
+
+interface TimerDisplayProps {
+  time: MaybeNumber;
+}
+
+/**
+ * Displays time in ms in formatted timetag
+ */
+export default function TimerDisplay(props: TimerDisplayProps) {
+  const { time } = props;
+
+  if (time == null) {
+    return <div className={style.timer}>-- : -- : --</div>;
+  }
+
+  const isNegative = time < 0;
+  const display = millisToString(Math.abs(time), { fallback: '-- : -- : --' });
+  const classes = cx([style.timer, isNegative ? style.finished : null]);
+
+  return <div className={classes}>{display}</div>;
+}