Default Values in ParamEditor (#610)

* add `defaultvalue` to `Field` types

* add `defaultValue` to constants; turn into functions for time values

* update constant imports/calls in view components

* use `defaultValue`s in `ParamInput`

* change `Clear` to `Reset`to better reflect actions

* make `defaultValue` optional rather than `undefined`

* update forgotten constants

* add `defaultValue` to boolean input

* change `101010` to `000000`

* add `prefix` property to types

* implement `prefix` for `ParamInput`s

* change `paramField` to `prop`

* add `onEditDrawerClose` to `resetParams`

* `ViewParamsEditor` omits default values

* undo close on reset

* move `useSettings` into `ViewWrapper`

* change `settings` to include `undefined`

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -1,5 +1,5 @@
 import { useSearchParams } from 'react-router-dom';
-import { Input, Select, Switch } from '@chakra-ui/react';
+import { Input, InputGroup, InputLeftElement, Select, Switch } from '@chakra-ui/react';
 
 import { isStringBoolean } from '../../utils/viewUtils';
 
@@ -9,16 +9,22 @@ interface EditFormInputProps {
   paramField: ParamField;
 }
 
-export default function ParamInput({ paramField }: EditFormInputProps) {
+export default function ParamInput(props: EditFormInputProps) {
   const [searchParams] = useSearchParams();
-  const { id, type } = paramField;
+  const { paramField } = props;
+  const { id, type, defaultValue } = paramField;
 
   if (type === 'option') {
     const optionFromParams = searchParams.get(id);
-    const defaultOptionValue = optionFromParams || undefined;
+    const defaultOptionValue = optionFromParams || defaultValue;
 
     return (
-      <Select placeholder='Select an option' variant='ontime' name={id} defaultValue={defaultOptionValue}>
+      <Select
+        placeholder={defaultValue ? undefined : 'Select an option'}
+        variant='ontime'
+        name={id}
+        defaultValue={defaultOptionValue}
+      >
         {Object.entries(paramField.values).map(([key, value]) => (
           <option key={key} value={key}>
             {value}
@@ -29,19 +35,31 @@ export default function ParamInput({ paramField }: EditFormInputProps) {
   }
 
   if (type === 'boolean') {
-    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) ?? false;
+    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) || defaultValue;
 
     // checked value should be 'true', so it can be captured by the form event
     return <Switch variant='ontime' name={id} defaultChecked={defaultCheckedValue} value='true' />;
   }
 
   if (type === 'number') {
-    const defaultNumberValue = searchParams.get(id) ?? '';
+    const { prefix } = paramField;
+    const defaultNumberValue = searchParams.get(id) ?? defaultValue;
 
-    return <Input type='number' step='any' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />;
+    return (
+      <InputGroup variant='ontime-filled'>
+        {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
+        <Input type='number' step='any' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />
+      </InputGroup>
+    );
   }
 
-  const defaultStringValue = searchParams.get(id) ?? '';
+  const defaultStringValue = searchParams.get(id) ?? defaultValue;
+  const { prefix } = paramField;
 
-  return <Input variant='ontime-filled' name={id} defaultValue={defaultStringValue} />;
+  return (
+    <InputGroup variant='ontime-filled'>
+      {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
+      <Input name={id} defaultValue={defaultStringValue} />
+    </InputGroup>
+  );
 }

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -22,9 +22,15 @@ import style from './ViewParamsEditor.module.scss';
 type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
 type SavedViewParams = Record<string, ViewParamsObj>;
 
-const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj) =>
+const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => {
-  Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
+  const defaultValues = paramFields.map(({ defaultValue }) => String(defaultValue));
+
+  return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
     if (typeof value === 'string' && value.length) {
+      if (defaultValues.includes(value)) {
+        return newSearchParams;
+      }
+
       newSearchParams.set(id, value);
 
       return newSearchParams;
@@ -32,6 +38,7 @@ const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj) =>
 
     return newSearchParams;
   }, new URLSearchParams());
+};
 
 interface EditFormDrawerProps {
   paramFields: ParamField[];
@@ -72,31 +79,30 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
 
   */
 
-  const onEditDrawerClose = () => {
+  const onCloseWithoutSaving = () => {
     onClose();
 
     searchParams.delete('edit');
     setSearchParams(searchParams);
   };
 
-  const clearParams = () => {
+  const resetParams = () => {
     setStoredViewParams({ ...storedViewParams, [pathname]: {} });
     setSearchParams();
-    onClose();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
     formEvent.preventDefault();
 
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
-    const newSearchParams = getURLSearchParamsFromObj(newParamsObject);
+    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
 
     setStoredViewParams({ ...storedViewParams, [pathname]: newParamsObject });
     setSearchParams(newSearchParams);
   };
 
   return (
-    <Drawer isOpen={isOpen} placement='right' onClose={onEditDrawerClose} size='lg'>
+    <Drawer isOpen={isOpen} placement='right' onClose={onCloseWithoutSaving} size='lg'>
       <DrawerOverlay />
       <DrawerContent>
         <DrawerHeader className={style.drawerHeader}>
@@ -119,10 +125,10 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
         </DrawerBody>
 
         <DrawerFooter className={style.drawerFooter}>
-          <Button variant='ontime-ghosted' onClick={clearParams} type='reset'>
+          <Button variant='ontime-ghosted' onClick={resetParams} type='reset'>
-            Clear
+            Reset
           </Button>
-          <Button variant='ontime-subtle' onClick={onEditDrawerClose}>
+          <Button variant='ontime-subtle' onClick={onCloseWithoutSaving}>
             Cancel
           </Button>
           <Button variant='ontime-filled' form='edit-params-form' type='submit'>

apps/client/src/common/components/view-params-editor/constants.ts

@@ -1,46 +1,56 @@
 import { UserFields } from 'ontime-types';
+import { TimeFormat } from 'ontime-types/src/definitions/core/TimeFormat.type';
 
 import { ParamField } from './types';
 
-export const TIME_FORMAT_OPTION: ParamField = {
+export const getTimeOption = (timeFormat: TimeFormat): ParamField => ({
   id: 'format',
   title: '12  / 24 hour timer',
   description: 'Whether to show the time in 12 or 24 hour mode. Overrides the global setting from preferences',
   type: 'option',
   values: { '12': '12 hour AM/PM', '24': '24 hour' },
-};
+  defaultValue: timeFormat,
+});
 
-export const CLOCK_OPTIONS: ParamField[] = [
+export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
-  TIME_FORMAT_OPTION,
+  getTimeOption(timeFormat),
   {
     id: 'key',
     title: 'Key Colour',
     description: 'Background colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000000',
   },
   {
     id: 'text',
     title: 'Text Colour',
     description: 'Text colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: 'fffff',
   },
   {
     id: 'textbg',
     title: 'Text Background',
     description: 'Colour of text background in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000000',
   },
   {
     id: 'font',
     title: 'Font',
     description: 'Font family, will use the fonts available in the system',
     type: 'string',
+    defaultValue: 'Arial Black',
   },
   {
     id: 'size',
     title: 'Text Size',
     description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
     type: 'number',
+    defaultValue: 1,
   },
   {
     id: 'alignx',
@@ -48,12 +58,14 @@ export const CLOCK_OPTIONS: ParamField[] = [
     description: 'Moves the horizontally in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
   },
   {
     id: 'offsetx',
     title: 'Offset Horizontal',
     description: 'Offsets the timer horizontal position by a given amount in pixels',
     type: 'number',
+    defaultValue: 0,
   },
   {
     id: 'aligny',
@@ -61,46 +73,53 @@ export const CLOCK_OPTIONS: ParamField[] = [
     description: 'Moves the vertically in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
   },
   {
     id: 'offsety',
     title: 'Offset Vertical',
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
+    defaultValue: 0,
   },
 ];
 
-export const TIMER_OPTIONS: ParamField[] = [
+export const getTimerOptions = (timeFormat: TimeFormat): ParamField[] => [
-  TIME_FORMAT_OPTION,
+  getTimeOption(timeFormat),
   {
     id: 'hideClock',
     title: 'Hide Time Now',
     description: 'Hides the Time Now field',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hideCards',
     title: 'Hide Cards',
     description: 'Hides the Now and Next cards',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hideProgress',
     title: 'Hide progress bar',
     description: 'Hides the progress bar',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hideMessage',
     title: 'Hide Presenter Message',
     description: 'Prevents the screen from displaying messages from the presenter',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hideExternal',
     title: 'Hide External',
     description: 'Prevents the screen from displaying the external field',
     type: 'boolean',
+    defaultValue: false,
   },
 ];
 
@@ -109,31 +128,39 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     id: 'key',
     title: 'Key Colour',
     description: 'Background colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000000',
   },
   {
     id: 'text',
     title: 'Text Colour',
     description: 'Text colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: 'fffff',
   },
   {
     id: 'textbg',
     title: 'Text Background',
     description: 'Colour of text background in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000000',
   },
   {
     id: 'font',
     title: 'Font',
     description: 'Font family, will use the fonts available in the system',
     type: 'string',
+    defaultValue: 'Arial Black',
   },
   {
     id: 'size',
     title: 'Text Size',
     description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
     type: 'number',
+    defaultValue: 1,
   },
   {
     id: 'alignx',
@@ -141,12 +168,14 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Moves the horizontally in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
   },
   {
     id: 'offsetx',
     title: 'Offset Horizontal',
     description: 'Offsets the timer horizontal position by a given amount in pixels',
     type: 'number',
+    defaultValue: 0,
   },
   {
     id: 'aligny',
@@ -154,145 +183,162 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Moves the vertically in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
   },
   {
     id: 'offsety',
     title: 'Offset Vertical',
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
+    defaultValue: 0,
   },
   {
     id: 'hideovertime',
     title: 'Hide Overtime',
     description: 'Whether to suppress overtime styles (red borders and red text)',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hidemessages',
     title: 'Hide Message Overlay',
     description: 'Whether to hide the overlay from showing timer screen messages',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hideendmessage',
     title: 'Hide End Message',
     description: 'Whether to hide end message and continue showing the clock if timer is in overtime',
     type: 'boolean',
+    defaultValue: false,
   },
 ];
 
 export const LOWER_THIRDS_OPTIONS: ParamField[] = [
-  {
-    id: 'preset',
-    title: 'Preset',
-    description: 'Selects a style preset (0-1)',
-    type: 'number',
-  },
   {
     id: 'size',
     title: 'Size',
     description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
     type: 'number',
+    defaultValue: 1,
   },
   {
     id: 'transition',
     title: 'Transition',
-    description: 'Transition in time in seconds (default 5)',
+    description: 'Transition in time in seconds (default 3)',
     type: 'number',
+    defaultValue: 3,
   },
   {
     id: 'text',
     title: 'Text Colour',
     description: 'Text colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '#fffffa',
   },
   {
     id: 'bg',
     title: 'Text Background',
     description: 'Text background colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000033',
   },
   {
     id: 'key',
     title: 'Key Colour',
     description: 'Screen background colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000033',
   },
   {
     id: 'fadeout',
     title: 'Fadeout',
     description: 'Time (in seconds) the lower third displays before fading out',
     type: 'number',
+    defaultValue: 3,
   },
 ];
 
-export const BACKSTAGE_OPTIONS: ParamField[] = [
+export const getBackstageOptions = (timeFormat: TimeFormat): ParamField[] => [
-  TIME_FORMAT_OPTION,
+  getTimeOption(timeFormat),
   {
     id: 'hidePast',
     title: 'Hide past events',
     description: 'Scheduler will only show upcoming events',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'stopCycle',
     title: 'Stop cycling through event pages',
     description: 'Schedule will not auto-cycle through events',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'eventsPerPage',
     title: 'Events per page',
     description: 'Sets the number of events on the page, can cause overlow',
     type: 'number',
+    defaultValue: 7,
   },
 ];
 
-export const PUBLIC_OPTIONS: ParamField[] = [
+export const getPublicOptions = (timeFormat: TimeFormat): ParamField[] => [
-  TIME_FORMAT_OPTION,
+  getTimeOption(timeFormat),
   {
     id: 'hidePast',
     title: 'Hide past events',
     description: 'Scheduler will only show upcoming events',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'stopCycle',
     title: 'Stop cycling through event pages',
     description: 'Schedule will not auto-cycle through events',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'eventsPerPage',
     title: 'Events per page',
     description: 'Sets the number of events on the page, can cause overlow',
     type: 'number',
+    defaultValue: 7,
   },
 ];
-export const STUDIO_CLOCK_OPTIONS: ParamField[] = [
+export const getStudioClockOptions = (timeFormat: TimeFormat): ParamField[] => [
-  TIME_FORMAT_OPTION,
+  getTimeOption(timeFormat),
   {
     id: 'seconds',
     title: 'Show Seconds',
     description: 'Shows seconds in clock',
     type: 'boolean',
+    defaultValue: false,
   },
 ];
 
-export const getOperatorOptions = (userFields: UserFields): ParamField[] => {
+export const getOperatorOptions = (userFields: UserFields, timeFormat: TimeFormat): ParamField[] => {
   return [
-    TIME_FORMAT_OPTION,
+    getTimeOption(timeFormat),
     {
       id: 'showseconds',
       title: 'Show seconds',
       description: 'Schedule shows hh:mm:ss',
       type: 'boolean',
+      defaultValue: false,
     },
     {
       id: 'hidepast',
       title: 'Hide Past Events',
       description: 'Whether to events that have passed',
       type: 'boolean',
+      defaultValue: false,
     },
     {
       id: 'main',

apps/client/src/common/components/view-params-editor/types.ts

@@ -4,9 +4,13 @@ type BaseField = {
   description: string;
 };
 
-type OptionsField = { type: 'option'; values: Record<string, string> };
+type OptionsField = {
-type StringField = { type: 'string' };
+  type: 'option';
-type BooleanField = { type: 'boolean' };
+  values: Record<string, string>;
-type NumberField = { type: 'number' };
+  defaultValue?: string;
+};
+type StringField = { type: 'string'; defaultValue: string; prefix?: string };
+type NumberField = { type: 'number'; defaultValue: number; prefix?: string };
+type BooleanField = { type: 'boolean'; defaultValue: boolean };
 
 export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField);

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

@@ -11,6 +11,7 @@ import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useOperator } from '../../common/hooks/useSocket';
 import useProjectData from '../../common/hooks-query/useProjectData';
 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 { isStringBoolean } from '../../common/utils/viewUtils';
@@ -40,6 +41,7 @@ export default function Operator() {
 
   const featureData = useOperator();
   const [searchParams] = useSearchParams();
+  const { data: settings } = useSettings();
 
   const [showEditPrompt, setShowEditPrompt] = useState(false);
   const [editEvent, setEditEvent] = useState<PartialEdit | null>(null);
@@ -127,7 +129,7 @@ export default function Operator() {
   const subscribedAlias = subscribe ? userFields[subscribe] : '';
   const showSeconds = isStringBoolean(searchParams.get('showseconds'));
 
-  const operatorOptions = getOperatorOptions(userFields);
+  const operatorOptions = getOperatorOptions(userFields, settings?.timeFormat ?? '24');
   let isPast = Boolean(featureData.selectedEventId);
   const hidePast = isStringBoolean(searchParams.get('hidepast'));
 

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -1,10 +1,11 @@
 import { ComponentType, useMemo } from 'react';
 import { TimeManagerType } from 'common/models/TimeManager.type';
-import { Message, OntimeEvent, ProjectData, SupportedEvent, TimerMessage, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ProjectData, Settings, SupportedEvent, TimerMessage, ViewSettings } from 'ontime-types';
 import { useStore } from 'zustand';
 
 import useProjectData from '../../common/hooks-query/useProjectData';
 import useRundown from '../../common/hooks-query/useRundown';
+import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { runtime } from '../../common/stores/runtime';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
@@ -27,6 +28,7 @@ type WithDataProps = {
   nextId: string | null;
   general: ProjectData;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
   onAir: boolean;
 };
 
@@ -43,6 +45,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
     const { data: rundownData } = useRundown();
     const { data: project } = useProjectData();
     const { data: viewSettings } = useViewSettings();
+    const { data: settings } = useSettings();
 
     const publicEvents = useMemo(() => {
       if (Array.isArray(rundownData)) {
@@ -104,6 +107,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
         selectedId={selectedId}
         publicSelectedId={publicSelectedId}
         viewSettings={viewSettings}
+        settings={settings}
         nextId={nextId}
         general={project}
         onAir={onAir}

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Message, OntimeEvent, ProjectData, SupportedEvent, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ProjectData, Settings, SupportedEvent, ViewSettings } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
@@ -11,7 +11,7 @@ import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
 import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
 import TitleCard from '../../../common/components/title-card/TitleCard';
-import { BACKSTAGE_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import { getBackstageOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -37,10 +37,12 @@ interface BackstageProps {
   selectedId: string | null;
   general: ProjectData;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 export default function Backstage(props: BackstageProps) {
-  const { isMirrored, publ, eventNow, eventNext, time, backstageEvents, selectedId, general, viewSettings } = props;
+  const { isMirrored, publ, eventNow, eventNext, time, backstageEvents, selectedId, general, viewSettings, settings } =
+    props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
   const [blinkClass, setBlinkClass] = useState(false);
@@ -89,11 +91,12 @@ export default function Backstage(props: BackstageProps) {
   }
 
   const totalTime = (time.duration ?? 0) + (time.addedTime ?? 0);
+  const backstageOptions = getBackstageOptions(settings?.timeFormat ?? '24');
 
   return (
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
       <NavigationMenu />
-      <ViewParamsEditor paramFields={BACKSTAGE_OPTIONS} />
+      <ViewParamsEditor paramFields={backstageOptions} />
       <div className='project-header'>
         {general.title}
         <div className='clock-container'>

apps/client/src/features/viewers/clock/Clock.tsx

@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { ViewSettings } from 'ontime-types';
+import { Settings, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
-import { CLOCK_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import { getClockOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -18,6 +18,7 @@ interface ClockProps {
   isMirrored: boolean;
   time: TimeManagerType;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 const formatOptions = {
@@ -26,7 +27,7 @@ const formatOptions = {
 };
 
 export default function Clock(props: ClockProps) {
-  const { isMirrored, time, viewSettings } = props;
+  const { isMirrored, time, viewSettings, settings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [searchParams] = useSearchParams();
 
@@ -124,6 +125,8 @@ export default function Clock(props: ClockProps) {
   const clock = formatTime(time.clock, formatOptions);
   const clean = clock.replace('/:/g', '');
 
+  const clockOptions = getClockOptions(settings?.timeFormat ?? '24');
+
   return (
     <div
       className={`clock-view ${isMirrored ? 'mirror' : ''}`}
@@ -135,7 +138,7 @@ export default function Clock(props: ClockProps) {
       data-testid='clock-view'
     >
       <NavigationMenu />
-      <ViewParamsEditor paramFields={CLOCK_OPTIONS} />
+      <ViewParamsEditor paramFields={clockOptions} />
       <SuperscriptTime
         time={clock}
         className='clock'

apps/client/src/features/viewers/countdown/Countdown.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent, ViewSettings } from 'ontime-types';
+import { OntimeEvent, OntimeRundownEntry, Playback, Settings, SupportedEvent, ViewSettings } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
-import { TIME_FORMAT_OPTION } from '../../../common/components/view-params-editor/constants';
+import { getTimeOption } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -34,10 +34,11 @@ interface CountdownProps {
   time: TimeManagerType;
   selectedId: string | null;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 export default function Countdown(props: CountdownProps) {
-  const { isMirrored, backstageEvents, time, selectedId, viewSettings } = props;
+  const { isMirrored, backstageEvents, time, selectedId, viewSettings, settings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [searchParams] = useSearchParams();
   const { getLocalizedString } = useTranslation();
@@ -109,10 +110,12 @@ export default function Countdown(props: CountdownProps) {
           isSelected || runningMessage === TimerMessage.waiting,
         );
 
+  const timeOption = getTimeOption(settings?.timeFormat ?? '24');
+
   return (
     <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
       <NavigationMenu />
-      <ViewParamsEditor paramFields={[TIME_FORMAT_OPTION]} />
+      <ViewParamsEditor paramFields={[timeOption]} />
       {follow === null ? (
         <CountdownSelect events={backstageEvents} />
       ) : (

apps/client/src/features/viewers/public/Public.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import QRCode from 'react-qr-code';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Message, OntimeEvent, ProjectData, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ProjectData, Settings, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
@@ -9,7 +9,7 @@ import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
 import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
 import TitleCard from '../../../common/components/title-card/TitleCard';
-import { PUBLIC_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import { getPublicOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -35,11 +35,22 @@ interface BackstageProps {
   publicSelectedId: string | null;
   general: ProjectData;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 export default function Public(props: BackstageProps) {
-  const { isMirrored, publ, publicEventNow, publicEventNext, time, events, publicSelectedId, general, viewSettings } =
+  const {
-    props;
+    isMirrored,
+    publ,
+    publicEventNow,
+    publicEventNext,
+    time,
+    events,
+    publicSelectedId,
+    general,
+    viewSettings,
+    settings,
+  } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
 
@@ -56,10 +67,12 @@ export default function Public(props: BackstageProps) {
   const clock = formatTime(time.clock, formatOptions);
   const qrSize = Math.max(window.innerWidth / 15, 128);
 
+  const publicOptions = getPublicOptions(settings?.timeFormat ?? '24');
+
   return (
     <div className={`public-screen ${isMirrored ? 'mirror' : ''}`} data-testid='public-view'>
       <NavigationMenu />
-      <ViewParamsEditor paramFields={PUBLIC_OPTIONS} />
+      <ViewParamsEditor paramFields={publicOptions} />
       <div className='project-header'>
         {general.title}
         <div className='clock-container'>

apps/client/src/features/viewers/studio/StudioClock.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import type { OntimeEvent, OntimeRundown, ViewSettings } from 'ontime-types';
+import type { OntimeEvent, OntimeRundown, Settings, ViewSettings } from 'ontime-types';
 import { SupportedEvent } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
-import { STUDIO_CLOCK_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import { getStudioClockOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import useFitText from '../../../common/hooks/useFitText';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
@@ -32,10 +32,11 @@ interface StudioClockProps {
   nextId: string | null;
   onAir: boolean;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 export default function StudioClock(props: StudioClockProps) {
-  const { isMirrored, eventNext, time, backstageEvents, selectedId, nextId, onAir, viewSettings } = props;
+  const { isMirrored, eventNext, time, backstageEvents, selectedId, nextId, onAir, viewSettings, settings } = props;
 
   // deferring rendering seems to affect styling (font and useFitText)
   useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
@@ -75,10 +76,12 @@ export default function StudioClock(props: StudioClockProps) {
   const secondsNow = secondsInMillis(time.clock);
   const isNegative = (time.current ?? 0) < 0;
 
+  const studioClockOptions = getStudioClockOptions(settings?.timeFormat ?? '24');
+
   return (
     <div className={`studio-clock ${isMirrored ? 'mirror' : ''}`} data-testid='studio-view'>
       <NavigationMenu />
-      <ViewParamsEditor paramFields={STUDIO_CLOCK_OPTIONS} />
+      <ViewParamsEditor paramFields={studioClockOptions} />
       <div className='clock-container'>
         <div className={`studio-timer ${showSeconds ? 'studio-timer--with-seconds' : ''}`}>{clock}</div>
         <div

apps/client/src/features/viewers/timer/Timer.tsx

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Message, OntimeEvent, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, Playback, Settings, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import TitleCard from '../../../common/components/title-card/TitleCard';
-import { TIMER_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import { getTimerOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -48,10 +48,11 @@ interface TimerProps {
   eventNext: OntimeEvent | null;
   time: TimeManagerType;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 export default function Timer(props: TimerProps) {
-  const { isMirrored, pres, eventNow, eventNext, time, viewSettings, external } = props;
+  const { isMirrored, pres, eventNow, eventNext, time, viewSettings, external, settings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
   const [searchParams] = useSearchParams();
@@ -128,10 +129,12 @@ export default function Timer(props: TimerProps) {
   const timerContainerClasses = `timer-container ${showBlinking ? (showOverlay ? '' : 'blink') : ''}`;
   const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`;
 
+  const timerOptions = getTimerOptions(settings?.timeFormat ?? '24');
+
   return (
     <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
       <NavigationMenu />
-      <ViewParamsEditor paramFields={TIMER_OPTIONS} />
+      <ViewParamsEditor paramFields={timerOptions} />
       {!userOptions.hideMessage && (
         <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
           <div className={`message ${showBlinking ? 'blink' : ''}`}>{pres.text}</div>