@@ -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 (
diff --git a/apps/client/src/views/studio/studio.options.ts b/apps/client/src/views/studio/studio.options.ts
index f13075d92..16f4551c8 100644
--- a/apps/client/src/views/studio/studio.options.ts
+++ b/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),
};
}
diff --git a/apps/client/src/views/studio/studioClock.utils.ts b/apps/client/src/views/studio/studioClock.utils.ts
index 6dcd0812c..4bee0bfa1 100644
--- a/apps/client/src/views/studio/studioClock.utils.ts
+++ b/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'];
}
diff --git a/apps/client/src/views/timeline/TimelinePage.tsx b/apps/client/src/views/timeline/TimelinePage.tsx
index 8882ec81a..c6d0cdb49 100644
--- a/apps/client/src/views/timeline/TimelinePage.tsx
+++ b/apps/client/src/views/timeline/TimelinePage.tsx
@@ -37,7 +37,7 @@ export default function TimelinePageLoader() {
function TimelinePage({ events, customFields, projectData, settings }: TimelineData) {
const selectedEventId = useSelectedEventId();
- const { mainSource } = useTimelineOptions();
+ const { mainSource, timeformat } = useTimelineOptions();
// holds copy of the rundown with only relevant events
const { scopedRundown, firstStart, totalDuration } = useScopedRundown(events, selectedEventId);
@@ -56,7 +56,7 @@ function TimelinePage({ events, customFields, projectData, settings }: TimelineD
{projectData?.logo &&
}
{projectData.title}
-
+
@@ -71,12 +71,12 @@ function TimelinePage({ events, customFields, projectData, settings }: TimelineD
);
}
-function TimelineClock() {
+function TimelineClock({ timeformat }: { timeformat: string | null }) {
const { getLocalizedString } = useTranslation();
const clock = useAutoTickingClock();
// gather timer data
- const formattedClock = formatTime(clock);
+ const formattedClock = formatTime(clock, { override: timeformat });
return (
diff --git a/apps/client/src/views/timeline/timeline.options.ts b/apps/client/src/views/timeline/timeline.options.ts
index 23c5cbfa3..a322937dc 100644
--- a/apps/client/src/views/timeline/timeline.options.ts
+++ b/apps/client/src/views/timeline/timeline.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';
@@ -55,7 +59,7 @@ type TimelineOptions = {
mainSource: keyof OntimeEvent | null;
hidePast: boolean;
fixedSize: boolean;
-};
+} & TimeOptions;
/**
* Utility extract the view options from URL Params
@@ -69,6 +73,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
mainSource: getValue('main') as keyof OntimeEvent | null,
hidePast: isStringBoolean(getValue('hidePast')),
fixedSize: isStringBoolean(getValue('fixedSize')),
+ timeformat: getTimeOptionsFromParams(searchParams, defaultValues),
};
}
diff --git a/apps/client/src/views/timer/Timer.tsx b/apps/client/src/views/timer/Timer.tsx
index 4605b3d3a..3ae139d26 100644
--- a/apps/client/src/views/timer/Timer.tsx
+++ b/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,
)}
- {showClock &&
}
+ {showClock &&
}
{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 (
diff --git a/apps/client/src/views/timer/timer.options.ts b/apps/client/src/views/timer/timer.options.ts
index 9533d8852..c6bde0f29 100644
--- a/apps/client/src/views/timer/timer.options.ts
+++ b/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),
};
}