refactor: extract options per view

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

@@ -15,7 +15,6 @@ import {
 import { overrideStylesURL } from '../../../common/api/constants';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
 import TitleCard from '../../../common/components/title-card/TitleCard';
-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 { useWindowTitle } from '../../../common/hooks/useWindowTitle';
@@ -25,6 +24,8 @@ import { useTranslation } from '../../../translation/TranslationProvider';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { getFormattedTimer, getPropertyValue, getTimerByType, isStringBoolean } from '../common/viewUtils';
 
+import { getTimerOptions } from './timer.options';
+
 import './Timer.scss';
 
 // motion
@@ -158,7 +159,7 @@ export default function Timer(props: TimerProps) {
 
   return (
     <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
-      <ViewParamsEditor paramFields={timerOptions} />
+      <ViewParamsEditor viewOptions={timerOptions} />
       <div className={showBlackout ? 'blackout blackout--active' : 'blackout'} />
       {!userOptions.hideMessage && (
         <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>

apps/client/src/features/viewers/timer/timer.options.ts

@@ -0,0 +1,74 @@
+import { CustomFields } from 'ontime-types';
+
+import {
+  getTimeOption,
+  hideTimerSeconds,
+  makeOptionsFromCustomFields,
+  showLeadingZeros,
+} from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+
+export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
+  const mainOptions = makeOptionsFromCustomFields(customFields, { title: 'Title' });
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
+  return [
+    { section: 'Clock Options' },
+    getTimeOption(timeFormat),
+    { section: 'Timer Options' },
+    hideTimerSeconds,
+    showLeadingZeros,
+    { section: 'Data sources' },
+    {
+      id: 'main',
+      title: 'Main text',
+      description: 'Select the data source for the main text',
+      type: 'option',
+      values: mainOptions,
+      defaultValue: 'Title',
+    },
+    {
+      id: 'secondary-src',
+      title: 'Secondary text',
+      description: 'Select the data source for the secondary text',
+      type: 'option',
+      values: secondaryOptions,
+      defaultValue: '',
+    },
+    { section: 'Element visibility' },
+    {
+      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,
+    },
+  ];
+};