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/operator/Operator.module.scss

@@ -43,3 +43,8 @@
     opacity: 1;
   }
 }
+
+.schedule {
+  display: flex;
+  gap: 0.25em;
+}

apps/client/src/features/operator/Operator.tsx

@@ -14,6 +14,7 @@ import useRundown from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import useUserFields from '../../common/hooks-query/useUserFields';
 import { debounce } from '../../common/utils/debounce';
+import { getDefaultFormat } from '../../common/utils/time';
 import { isStringBoolean } from '../../common/utils/viewUtils';
 
 import EditModal from './edit-modal/EditModal';
@@ -130,9 +131,9 @@ export default function Operator() {
   const main = searchParams.get('main') as keyof TitleFields | null;
   const secondary = searchParams.get('secondary') as keyof TitleFields | null;
   const subscribedAlias = subscribe ? userFields[subscribe] : '';
-  const showSeconds = isStringBoolean(searchParams.get('showseconds'));
 
-  const operatorOptions = getOperatorOptions(userFields, settings?.timeFormat ?? '24');
+  const defaultFormat = getDefaultFormat(settings?.timeFormat);
+  const operatorOptions = getOperatorOptions(userFields, defaultFormat);
   let isPast = Boolean(featureData.selectedEventId);
   const hidePast = isStringBoolean(searchParams.get('hidepast'));
 
@@ -193,7 +194,6 @@ export default function Operator() {
                 isSelected={isSelected}
                 subscribed={subscribedData}
                 subscribedAlias={subscribedAlias}
-                showSeconds={showSeconds}
                 isPast={isPast}
                 selectedRef={isSelected ? selectedRef : undefined}
                 onLongPress={canEdit ? handleEdit : () => undefined}

apps/client/src/features/operator/operator-event/OperatorEvent.module.scss

@@ -81,10 +81,12 @@
   justify-self: end;
 }
 
-.running {
+.runningTime {
   @include clock-size;
   grid-area: running;
   justify-self: end;
+  display: flex;
+  gap: 0.5em;
 }
 
 .fields {

apps/client/src/features/operator/operator-event/OperatorEvent.tsx

@@ -4,7 +4,8 @@ import DelayIndicator from '../../../common/components/delay-indicator/DelayIndi
 import useLongPress from '../../../common/hooks/useLongPress';
 import { useTimer } from '../../../common/hooks/useSocket';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
-import { formatTime } from '../../../common/utils/time';
+import ClockTime from '../../viewers/common/clock-time/ClockTime';
+import RunningTime from '../../viewers/common/running-time/RunningTime';
 import type { EditEvent } from '../Operator';
 
 import style from './OperatorEvent.module.scss';
@@ -22,7 +23,6 @@ interface OperatorEventProps {
   isSelected: boolean;
   subscribed?: string;
   subscribedAlias: string;
-  showSeconds: boolean;
   isPast: boolean;
   selectedRef?: RefObject<HTMLDivElement>;
   onLongPress: (event: EditEvent) => void;
@@ -31,7 +31,7 @@ interface OperatorEventProps {
 // extract this to contain re-renders
 function RollingTime() {
   const timer = useTimer();
-  return <>{formatTime(timer.current, { showSeconds: true, format: 'hh:mm:ss' })}</>;
+  return <RunningTime value={timer.current} />;
 }
 
 function OperatorEvent(props: OperatorEventProps) {
@@ -48,7 +48,6 @@ function OperatorEvent(props: OperatorEventProps) {
     isSelected,
     subscribed,
     subscribedAlias,
-    showSeconds,
     isPast,
     selectedRef,
     onLongPress,
@@ -61,10 +60,6 @@ function OperatorEvent(props: OperatorEventProps) {
   };
 
   const mouseHandlers = useLongPress(handleLongPress, { threshold: 800 });
-
-  const start = formatTime(timeStart, { showSeconds });
-  const end = formatTime(timeEnd, { showSeconds });
-
   const cueColours = colour && getAccessibleColour(colour);
 
   const operatorClasses = cx([
@@ -82,13 +77,15 @@ function OperatorEvent(props: OperatorEventProps) {
 
       <span className={style.mainField}>{main}</span>
       <span className={style.schedule}>
-        {start} - {end}
+        <ClockTime value={timeStart} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
+        -
+        <ClockTime value={timeEnd} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
       </span>
 
       <span className={style.secondaryField}>{secondary}</span>
-      <span className={style.running}>
+      <span className={style.runningTime}>
         <DelayIndicator delayValue={delay} />
-        {isSelected ? <RollingTime /> : formatTime(duration, { showSeconds: true, format: 'hh:mm:ss' })}
+        {isSelected ? <RollingTime /> : <RunningTime value={duration} hideLeadingZero />}
       </span>
 
       <div className={style.fields}>

apps/client/src/features/operator/status-bar/StatusBarTimers.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
-import { Playback } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
+import { MaybeNumber, Playback } from 'ontime-types';
 
 import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
 import { useTimer } from '../../../common/hooks/useSocket';
 import { cx } from '../../../common/utils/styleUtils';
-import { formatTime } from '../../../common/utils/time';
+import ClockTime from '../../viewers/common/clock-time/ClockTime';
+import RunningTime from '../../viewers/common/running-time/RunningTime';
 
 import styles from './StatusBar.module.scss';
 
@@ -24,30 +24,30 @@ export default function StatusBarTimers(props: StatusBarTimersProps) {
 
   const timer = useTimer();
 
-  const getTimeStart = () => {
+  const getTimeStart = (): MaybeNumber => {
     if (firstStart === undefined) {
-      return '...';
+      return null;
     }
 
     if (selectedEventId) {
       if (firstId === selectedEventId) {
-        return millisToString(timer.expectedFinish);
+        return timer.expectedFinish;
       }
     }
-    return millisToString(firstStart);
+    return firstStart;
   };
 
-  const getTimeEnd = () => {
+  const getTimeEnd = (): MaybeNumber => {
     if (lastEnd === undefined) {
-      return '...';
+      return null;
     }
 
     if (selectedEventId) {
       if (lastId === selectedEventId) {
-        return millisToString(timer.expectedFinish);
+        return timer.expectedFinish;
       }
     }
-    return millisToString(lastEnd);
+    return lastEnd;
   };
 
   const PlaybackIconComponent = useMemo(() => {
@@ -56,38 +56,30 @@ export default function StatusBarTimers(props: StatusBarTimersProps) {
     return <PlaybackIcon state={playback} skipTooltip className={classes} />;
   }, [playback]);
 
-  // use user defined format
-  const timeNow = formatTime(timer.clock, {
-    showSeconds: true,
-  });
-
-  const runningTime = millisToString(timer.current);
-  const elapsedTime = millisToString(timer.elapsed);
-
   return (
     <div className={styles.timers}>
       {PlaybackIconComponent}
       <div className={styles.timeNow}>
         <span className={styles.label}>Time now</span>
-        <span className={styles.timer}>{timeNow}</span>
+        <ClockTime className={styles.timer} value={timer.clock} />
       </div>
       <div className={styles.elapsedTime}>
         <span className={styles.label}>Elapsed time</span>
-        <span className={styles.timer}>{elapsedTime}</span>
+        <RunningTime className={styles.timer} value={timer.elapsed} />
       </div>
       <div className={styles.runningTime}>
         <span className={styles.label}>Running timer</span>
-        <span className={styles.timer}>{runningTime}</span>
+        <RunningTime className={styles.timer} value={timer.current} />
       </div>
 
       <span className={styles.title}>{projectTitle}</span>
       <div className={styles.startTime}>
         <span className={styles.label}>Scheduled start</span>
-        <span className={styles.timer}>{getTimeStart()}</span>
+        <ClockTime className={styles.timer} value={getTimeStart()} />
       </div>
       <div className={styles.endTime}>
         <span className={styles.label}>Scheduled end</span>
-        <span className={styles.timer}>{getTimeEnd()}</span>
+        <ClockTime className={styles.timer} value={getTimeEnd()} />
       </div>
     </div>
   );