refactor: consistent time formatting for 12h mode

apps/client/src/views/backstage/Backstage.tsx

@@ -76,13 +76,13 @@ function Backstage({ events, customFields, projectData, isMirrored, settings }:
   const scheduledStart = (() => {
     if (showNow) return undefined;
     if (!hasEvents) return undefined;
-    return formatTime(rundown.plannedStart, { format12: 'hh:mm a', format24: 'HH:mm' });
+    return formatTime(rundown.plannedStart, { format12: 'h:mm a', format24: 'HH:mm' });
   })();
 
   const scheduledEnd = (() => {
     if (showNow) return undefined;
     if (!hasEvents) return undefined;
-    return formatTime(rundown.plannedEnd, { format12: 'hh:mm a', format24: 'HH:mm' });
+    return formatTime(rundown.plannedEnd, { format12: 'h:mm a', format24: 'HH:mm' });
   })();
 
   let displayTimer = millisToString(time.current, { fallback: timerPlaceholderMin });

apps/client/src/views/common/schedule/ScheduleItem.tsx

@@ -5,14 +5,14 @@ import { getOffsetState } from '../../../common/utils/offset';
 import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { cx } from '../../../common/utils/styleUtils';
 import { formatTime, getExpectedTimesFromExtendedEvent } from '../../../common/utils/time';
-import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime';
+import SuperscriptPeriod from '../../../features/viewers/common/superscript-time/SuperscriptPeriod';
 
 import { useScheduleOptions } from './schedule.options';
 
 import './Schedule.scss';
 
 const formatOptions = {
-  format12: 'hh:mm a',
+  format12: 'h:mm a',
   format24: 'HH:mm',
 };
 
@@ -84,9 +84,9 @@ function PlannedScheduleItem({
   return (
     <>
       <span className='entry-colour' style={{ backgroundColor: colour }} />
-      <SuperscriptTime time={start} />
+      <SuperscriptPeriod time={start} />
       →
-      <SuperscriptTime time={end} />
+      <SuperscriptPeriod time={end} />
     </>
   );
 }
@@ -106,14 +106,14 @@ function DelayedScheduleItem({
     <>
       <span className='entry-times--delayed'>
         <span className='entry-colour' style={{ backgroundColor: colour }} />
-        <SuperscriptTime time={start} />
+        <SuperscriptPeriod time={start} />
         →
-        <SuperscriptTime time={end} />
+        <SuperscriptPeriod time={end} />
       </span>
       <span className='entry-times--delay'>
-        <SuperscriptTime time={delayedStart} />
+        <SuperscriptPeriod time={delayedStart} />
         →
-        <SuperscriptTime time={delayedEnd} />
+        <SuperscriptPeriod time={delayedEnd} />
       </span>
     </>
   );
@@ -161,5 +161,5 @@ interface ExpectedTimeProps {
 function ExpectedTime({ expectedTime, plannedTime }: ExpectedTimeProps) {
   const timeDisplay = formatTime(expectedTime);
   const expectedState = getOffsetState(expectedTime - plannedTime);
-  return <SuperscriptTime className={`entry-times--${expectedState}`} time={timeDisplay} />;
+  return <SuperscriptPeriod className={`entry-times--${expectedState}`} time={timeDisplay} />;
 }

apps/client/src/views/countdown/CountdownSelect.tsx

@@ -73,9 +73,9 @@ export default function CountdownSelect({ events, subscriptions, disableEdit }:
           >
             <div className='sub__binder' style={{ '--user-color': event?.colour ?? '' }} />
             <div className='sub__schedule'>
-              <ClockTime value={event.timeStart} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
+              <ClockTime value={event.timeStart} preferredFormat12='h:mm a' preferredFormat24='HH:mm' />
               →
-              <ClockTime value={event.timeEnd} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
+              <ClockTime value={event.timeEnd} preferredFormat12='h:mm a' preferredFormat24='HH:mm' />
             </div>
             <div className='sub__label'>{isSelected ? 'Click to remove' : 'Click to add'}</div>
             <div className='sub__title'>{title}</div>

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx

@@ -23,7 +23,7 @@ function MakeStart({ getValue, row, table, column }: CellContext<ExtendedEntry,
   }
 
   const { showDelayedTimes, hideTableSeconds } = table.options.meta.options;
-  const formatOpts = hideTableSeconds ? { format12: 'hh:mm a', format24: 'HH:mm' } : undefined;
+  const formatOpts = hideTableSeconds ? { format12: 'h:mm a', format24: 'HH:mm' } : undefined;
 
   const event = row.original;
   if (!isOntimeEvent(event)) {
@@ -62,7 +62,7 @@ function MakeEnd({ getValue, row, table, column }: CellContext<ExtendedEntry, un
   }
 
   const { showDelayedTimes, hideTableSeconds } = table.options.meta.options;
-  const formatOpts = hideTableSeconds ? { format12: 'hh:mm a', format24: 'HH:mm' } : undefined;
+  const formatOpts = hideTableSeconds ? { format12: 'h:mm a', format24: 'HH:mm' } : undefined;
 
   const event = row.original;
   if (!isOntimeEvent(event)) {

apps/client/src/views/studio/StudioTimers.tsx

@@ -49,9 +49,7 @@ export default function StudioTimers({ viewSettings }: StudioTimersProps) {
           </div>
           <div>
             <div className='label center'>Over / under</div>
-            <div className={cx(['runtime-timer', 'center', !eventNow && 'muted', offsetState && offsetState])}>
-              {schedule.offset}
-            </div>
+            <div className={cx(['runtime-timer', 'center', !eventNow && 'muted', offsetState])}>{schedule.offset}</div>
           </div>
           <div>
             <div className='label right'>{getLocalizedString('common.expected_end')}</div>

apps/client/src/views/timeline/TimelineEntry.tsx

@@ -30,7 +30,7 @@ interface TimelineEntryProps {
 }
 
 const formatOptions = {
-  format12: 'hh:mm a',
+  format12: 'h:mm a',
   format24: 'HH:mm',
 };