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/timer/Timer.tsx

@@ -1,4 +1,4 @@
-import { OntimeView, TimerType } from 'ontime-types';
+import { MaybeString, OntimeView, TimerType } from 'ontime-types';
 import { useMemo } from 'react';
 
 import { FitText } from '../../common/components/fit-text/FitText';
@@ -69,6 +69,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
     font,
     keyColour,
     timerColour,
+    timeformat,
   } = useTimerOptions();
 
   const { getLocalizedString } = useTranslation();
@@ -106,6 +107,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
   const display = getFormattedTimer(stageTimer, viewTimerType, localisedMinutes, {
     removeSeconds: hideTimerSeconds,
     removeLeadingZero: removeLeadingZeros,
+    clockFormat: timeformat,
   });
 
   const currentAux = (() => {
@@ -164,7 +166,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
         </div>
       )}
 
-      {showClock && <TimerAutoTickingClock />}
+      {showClock && <TimerAutoTickingClock clockFormat={timeformat} />}
 
       <div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
         {showEndMessage ? (
@@ -212,9 +214,9 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
   );
 }
 
-function TimerAutoTickingClock() {
+function TimerAutoTickingClock({ clockFormat }: { clockFormat: MaybeString }) {
   const autoTickingClock = useAutoTickingClock();
-  const formattedClock = formatTime(autoTickingClock);
+  const formattedClock = formatTime(autoTickingClock, { override: clockFormat });
   const { getLocalizedString } = useTranslation();
 
   return (

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

@@ -6,8 +6,10 @@ import { useSearchParams } from 'react-router';
 import type { SelectOption } from '../../common/components/select/Select';
 import {
   getTimeOption,
+  getTimeOptionsFromParams,
   hideTimerSeconds,
   showLeadingZeros,
+  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';
@@ -194,7 +196,7 @@ type TimerOptions = {
   font?: string;
   keyColour?: string;
   timerColour?: string;
-};
+} & TimeOptions;
 
 /**
  * Utility extract the view options from URL Params
@@ -229,6 +231,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
     font: getValue('font') ?? undefined,
     keyColour: makeColourString(getValue('keyColour')),
     timerColour: makeColourString(getValue('timerColour')),
+    timeformat: getTimeOptionsFromParams(searchParams, defaultValues),
   };
 }