fix: format clock from preset (#2066)

* fix: format clock from preset

* fix: add to all views

* chore: format

* refactor: return flat value from common.options.ts

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

@@ -6,6 +6,7 @@ import { useStudioClockSocket } from '../../common/hooks/useSocket';
 import { cx } from '../../common/utils/styleUtils';
 import { formatTime } from '../../common/utils/time';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
+import { useStudioOptions } from './studio.options';
 import { getLargeClockData } from './studioClock.utils';
 
 import './StudioClock.scss';
@@ -18,6 +19,7 @@ interface StudioClockProps {
 }
 
 export default function StudioClock({ hideCards }: StudioClockProps) {
+  const { timeformat } = useStudioOptions();
   const isSmallScreen = useIsSmallScreen();
   const clock = useAutoTickingClock();
   const { playback } = useStudioClockSocket();
@@ -25,10 +27,10 @@ export default function StudioClock({ hideCards }: StudioClockProps) {
 
   // if we are on mobile and have to show the cards
   if (isSmallScreen && !hideCards) {
-    return <StudioClockMobile clock={clock} onAir={onAir} />;
+    return <StudioClockMobile clock={clock} onAir={onAir} timeformat={timeformat} />;
   }
 
-  const { seconds, display, meridian } = getLargeClockData(clock);
+  const { seconds, display, meridian } = getLargeClockData(clock, timeformat);
 
   return (
     <div className='studio__clock'>
@@ -62,10 +64,11 @@ export default function StudioClock({ hideCards }: StudioClockProps) {
 interface StudioClockMobileProps {
   clock: number;
   onAir: boolean;
+  timeformat: string | null;
 }
 
-function StudioClockMobile({ clock, onAir }: StudioClockMobileProps) {
-  const displayClock = formatTime(clock);
+function StudioClockMobile({ clock, onAir, timeformat }: StudioClockMobileProps) {
+  const displayClock = formatTime(clock, { override: timeformat });
 
   return (
     <div className='studio__clock studio__clock--small'>

apps/client/src/views/studio/studio.options.ts

@@ -2,7 +2,11 @@ import { CustomFields, OntimeEvent } from 'ontime-types';
 import { use, useMemo } from 'react';
 import { useSearchParams } from 'react-router';
 
-import { getTimeOption } from '../../common/components/view-params-editor/common.options';
+import {
+  getTimeOption,
+  getTimeOptionsFromParams,
+  TimeOptions,
+} from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
@@ -47,7 +51,7 @@ export const getStudioOptions = (timeFormat: string, customFields: CustomFields)
 type StudioOptions = {
   mainSource: keyof OntimeEvent | null;
   hideCards: boolean;
-};
+} & TimeOptions;
 
 /**
  * Utility extract the view options from URL Params
@@ -60,6 +64,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
   return {
     mainSource: getValue('main') as keyof OntimeEvent | null,
     hideCards: isStringBoolean(getValue('hideCards')),
+    timeformat: getTimeOptionsFromParams(searchParams, defaultValues),
   };
 }
 

apps/client/src/views/studio/studioClock.utils.ts

@@ -5,9 +5,9 @@ import { formatTime } from '../../common/utils/time';
 /**
  * Gathers display elements for the large studio clock
  */
-export function getLargeClockData(clock: number) {
+export function getLargeClockData(clock: number, timeformat: string | null) {
   const [display, meridian] = (() => {
-    const formatted = formatTime(clock);
+    const formatted = formatTime(clock, { override: timeformat });
     if (formatted.endsWith('AM')) {
       return [formatted.slice(0, -2), 'AM'];
     }