refactor: extract options per view

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -2,7 +2,6 @@ import { useSearchParams } from 'react-router-dom';
 import { Playback, TimerPhase, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/constants';
-import { MINIMAL_TIMER_OPTIONS } 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';
@@ -11,6 +10,8 @@ import { OverridableOptions } from '../../../common/models/View.types';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import { getFormattedTimer, getTimerByType, isStringBoolean } from '../common/viewUtils';
 
+import { MINIMAL_TIMER_OPTIONS } from './minimalTimer.options';
+
 import './MinimalTimer.scss';
 
 interface MinimalTimerProps {
@@ -161,7 +162,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
       }}
       data-testid='minimal-timer'
     >
-      <ViewParamsEditor paramFields={MINIMAL_TIMER_OPTIONS} />
+      <ViewParamsEditor viewOptions={MINIMAL_TIMER_OPTIONS} />
       {showEndMessage ? (
         <div className='end-message'>{viewSettings.endMessage}</div>
       ) : (

apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts

@@ -0,0 +1,91 @@
+import { hideTimerSeconds } from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+
+export const MINIMAL_TIMER_OPTIONS: ViewOption[] = [
+  { section: 'Timer Options' },
+  hideTimerSeconds,
+  { section: 'Element visibility' },
+  {
+    id: 'hideovertime',
+    title: 'Hide Overtime',
+    description: 'Whether to suppress overtime styles (red borders and red text)',
+    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,
+  },
+  { section: 'View style override' },
+  {
+    id: 'key',
+    title: 'Key Colour',
+    description: 'Background colour in hexadecimal',
+    prefix: '#',
+    type: 'string',
+    placeholder: '00000000 (default)',
+  },
+  {
+    id: 'text',
+    title: 'Text Colour',
+    description: 'Text colour in hexadecimal',
+    prefix: '#',
+    type: 'string',
+    placeholder: 'fffff (default)',
+  },
+  {
+    id: 'textbg',
+    title: 'Text Background',
+    description: 'Colour of text background in hexadecimal',
+    prefix: '#',
+    type: 'string',
+    placeholder: '00000000 (default)',
+  },
+  {
+    id: 'font',
+    title: 'Font',
+    description: 'Font family, will use the fonts available in the system',
+    type: 'string',
+    placeholder: 'Arial Black (default)',
+  },
+  {
+    id: 'size',
+    title: 'Text Size',
+    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
+    type: 'number',
+    placeholder: '1 (default)',
+  },
+  {
+    id: 'alignx',
+    title: 'Align Horizontal',
+    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',
+    placeholder: '0 (default)',
+  },
+  {
+    id: 'aligny',
+    title: 'Align Vertical',
+    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',
+    placeholder: '0 (default)',
+  },
+];