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/cuesheet/cuesheet-table-header/CuesheetTableHeaderTimers.tsx

@@ -1,30 +1,21 @@
-import { formatDisplay } from 'ontime-utils';
-
 import { useTimer } from '../../../common/hooks/useSocket';
-import { formatTime } from '../../../common/utils/time';
+import ClockTime from '../../viewers/common/clock-time/ClockTime';
+import RunningTime from '../../viewers/common/running-time/RunningTime';
 
 import style from './CuesheetTableHeader.module.scss';
 
 export default function CuesheetTableHeaderTimers() {
   const timer = useTimer();
 
-  // prepare presentation variables
-  const isOvertime = (timer.current ?? 0) < 0;
-  const timerNow = timer.current == null ? '-' : `${isOvertime ? '-' : ''}${formatDisplay(timer.current)}`;
-  const timeNow = formatTime(timer.clock, {
-    showSeconds: true,
-    format: 'hh:mm:ss a',
-  });
-
   return (
     <>
       <div className={style.timer}>
         <div className={style.timerLabel}>Running Timer</div>
-        <div className={style.value}>{timerNow}</div>
+        <RunningTime className={style.value} value={timer.current} hideLeadingZero />
       </div>
       <div className={style.clock}>
         <div className={style.clockLabel}>Time Now</div>
-        <div className={style.value}>{timeNow}</div>
+        <ClockTime className={style.value} value={timer.clock} />
       </div>
     </>
   );

apps/client/src/features/cuesheet/cuesheetCols.tsx

@@ -5,6 +5,7 @@ import { OntimeEvent, OntimeRundownEntry, UserFields } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 import DelayIndicator from '../../common/components/delay-indicator/DelayIndicator';
+import RunningTime from '../viewers/common/running-time/RunningTime';
 
 import EditableCell from './cuesheet-table-elements/EditableCell';
 import { useCuesheetSettings } from './store/CuesheetSettings';
@@ -24,9 +25,9 @@ function MakeTimer({ getValue, row: { original } }: CellContext<OntimeRundownEnt
   return (
     <span className={style.time}>
       <DelayIndicator delayValue={delayValue} />
-      {millisToString(cellValue)}
+      <RunningTime value={cellValue} />
       {delayValue !== 0 && showDelayedTimes && (
-        <span className={style.delayedTime}>{` ${millisToString(cellValue + delayValue)}`}</span>
+        <RunningTime className={style.delayedTime} value={cellValue + delayValue} />
       )}
     </span>
   );