diff --git a/apps/client/src/common/components/view-params-editor/constants.ts b/apps/client/src/common/components/view-params-editor/constants.ts index 626b824ee8..a527180f87 100644 --- a/apps/client/src/common/components/view-params-editor/constants.ts +++ b/apps/client/src/common/components/view-params-editor/constants.ts @@ -38,3 +38,14 @@ export const showLeadingZeros: ParamField = { type: 'boolean', defaultValue: false, }; + +export enum OptionTitle { + ClockOptions = 'Clock Options', + TimerOptions = 'Timer Options', + DataSources = 'Data sources', + ElementVisibility = 'Element visibility', + BehaviourOptions = 'View behaviour', + StyleOverride = 'View style override', + Animation = 'View animation', + Schedule = 'Schedule options', +} diff --git a/apps/client/src/common/components/view-params-editor/types.ts b/apps/client/src/common/components/view-params-editor/types.ts index 18d5310ec4..4e7853350a 100644 --- a/apps/client/src/common/components/view-params-editor/types.ts +++ b/apps/client/src/common/components/view-params-editor/types.ts @@ -1,3 +1,5 @@ +import { OptionTitle } from './constants'; + type BaseField = { id: string; title: string; @@ -26,7 +28,7 @@ export type ParamField = BaseField & (OptionsField | MultiOptionsField | StringField | NumberField | BooleanField | ColourField | PersistedField); export type ViewOption = { - title: string; + title: OptionTitle; options: ParamField[]; collapsible?: boolean; }; diff --git a/apps/client/src/features/operator/operator.options.tsx b/apps/client/src/features/operator/operator.options.tsx index 0e31e28b19..f60ff377f2 100644 --- a/apps/client/src/features/operator/operator.options.tsx +++ b/apps/client/src/features/operator/operator.options.tsx @@ -1,6 +1,10 @@ import { CustomFields } from 'ontime-types'; -import { getTimeOption, makeOptionsFromCustomFields } from '../../common/components/view-params-editor/constants'; +import { + getTimeOption, + makeOptionsFromCustomFields, + OptionTitle, +} from '../../common/components/view-params-editor/constants'; import { ViewOption } from '../../common/components/view-params-editor/types'; export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => { @@ -14,47 +18,55 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin }, {}); return [ - { section: 'Clock Options' }, - getTimeOption(timeFormat), - { section: 'Data sources' }, - - { - id: 'main', - title: 'Main data field', - description: 'Field to be shown in the first line of text', - type: 'option', - values: fieldOptions, - defaultValue: 'title', - }, - { - id: 'secondary', - title: 'Secondary data field', - description: 'Field to be shown in the second line of text', - type: 'option', - values: fieldOptions, - defaultValue: '', - }, - { - id: 'subscribe', - title: 'Highlight Field', - description: 'Choose a custom field to highlight', - type: 'multi-option', - values: customFieldSelect, - }, - { section: 'Element visibility' }, + { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] }, { - id: 'hidepast', - title: 'Hide Past Events', - description: 'Whether to hide events that have passed', - type: 'boolean', - defaultValue: false, + title: OptionTitle.DataSources, + collapsible: true, + options: [ + { + id: 'main', + title: 'Main data field', + description: 'Field to be shown in the first line of text', + type: 'option', + values: fieldOptions, + defaultValue: 'title', + }, + { + id: 'secondary', + title: 'Secondary data field', + description: 'Field to be shown in the second line of text', + type: 'option', + values: fieldOptions, + defaultValue: '', + }, + { + id: 'subscribe', + title: 'Highlight Field', + description: 'Choose a custom field to highlight', + type: 'multi-option', + values: customFieldSelect, + }, + ], }, { - id: 'shouldEdit', - title: 'Edit custom field', - description: 'Allows editing an events selected custom field by long pressing.', - type: 'boolean', - defaultValue: false, + title: OptionTitle.ElementVisibility, + collapsible: true, + options: [ + { + id: 'hidepast', + title: 'Hide Past Events', + description: 'Whether to hide events that have passed', + type: 'boolean', + defaultValue: false, + }, + { + id: 'shouldEdit', + title: 'Edit custom field', + description: 'Allows editing an events selected custom field by long pressing.', + type: 'boolean', + defaultValue: false, + }, + ], }, ]; }; diff --git a/apps/client/src/features/viewers/backstage/backstage.options.ts b/apps/client/src/features/viewers/backstage/backstage.options.ts index 77859bdfdd..be763604b8 100644 --- a/apps/client/src/features/viewers/backstage/backstage.options.ts +++ b/apps/client/src/features/viewers/backstage/backstage.options.ts @@ -1,44 +1,58 @@ import { CustomFields } from 'ontime-types'; -import { getTimeOption, makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants'; +import { + getTimeOption, + makeOptionsFromCustomFields, + OptionTitle, +} from '../../../common/components/view-params-editor/constants'; import { ViewOption } from '../../../common/components/view-params-editor/types'; export const getBackstageOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => { const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' }); return [ - { section: 'Clock Options' }, - getTimeOption(timeFormat), - { section: 'Data sources' }, + { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] }, { - id: 'secondary-src', - title: 'Event secondary text', - description: 'Select the data source for auxiliary text shown in now and next cards', - type: 'option', - values: secondaryOptions, - defaultValue: '', - }, - { section: 'Schedule options' }, - { - id: 'eventsPerPage', - title: 'Events per page', - description: 'Sets the number of events on the page, can cause overflow', - type: 'number', - placeholder: '8 (default)', - }, - { - id: 'hidePast', - title: 'Hide past events', - description: 'Scheduler will only show upcoming events', - type: 'boolean', - defaultValue: false, + title: OptionTitle.DataSources, + collapsible: true, + options: [ + { + id: 'secondary-src', + title: 'Event secondary text', + description: 'Select the data source for auxiliary text shown in now and next cards', + type: 'option', + values: secondaryOptions, + defaultValue: '', + }, + ], }, + { - id: 'stopCycle', - title: 'Stop cycling through event pages', - description: 'Schedule will not auto-cycle through events', - type: 'boolean', - defaultValue: false, + title: OptionTitle.Schedule, + collapsible: true, + options: [ + { + id: 'eventsPerPage', + title: 'Events per page', + description: 'Sets the number of events on the page, can cause overflow', + type: 'number', + placeholder: '8 (default)', + }, + { + 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, + }, + ], }, ]; }; diff --git a/apps/client/src/features/viewers/clock/clock.options.ts b/apps/client/src/features/viewers/clock/clock.options.ts index d26a0e4b70..a00d89e1d0 100644 --- a/apps/client/src/features/viewers/clock/clock.options.ts +++ b/apps/client/src/features/viewers/clock/clock.options.ts @@ -1,73 +1,77 @@ -import { getTimeOption } from '../../../common/components/view-params-editor/constants'; +import { getTimeOption, OptionTitle } from '../../../common/components/view-params-editor/constants'; import { ViewOption } from '../../../common/components/view-params-editor/types'; export const getClockOptions = (timeFormat: string): ViewOption[] => [ - { section: 'Clock Options' }, - getTimeOption(timeFormat), - { section: 'View style override' }, + { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] }, { - id: 'key', - title: 'Key Colour', - description: 'Background or key colour for entire view. Default: #000000', - type: 'colour', - defaultValue: '000000', - }, - { - id: 'text', - title: 'Text Colour', - description: 'Text colour. Default: #FFFFFF', - type: 'colour', - defaultValue: 'FFFFFF', - }, - { - id: 'textbg', - title: 'Text Background', - description: 'Background colour for timer text. Default: #FFF0 (transparent)', - type: 'colour', - defaultValue: 'FFF0', - }, - { - 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)', + title: OptionTitle.ClockOptions, + collapsible: true, + options: [ + { + id: 'key', + title: 'Key Colour', + description: 'Background or key colour for entire view. Default: #000000', + type: 'colour', + defaultValue: '000000', + }, + { + id: 'text', + title: 'Text Colour', + description: 'Text colour. Default: #FFFFFF', + type: 'colour', + defaultValue: 'FFFFFF', + }, + { + id: 'textbg', + title: 'Text Background', + description: 'Background colour for timer text. Default: #FFF0 (transparent)', + type: 'colour', + defaultValue: 'FFF0', + }, + { + 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)', + }, + ], }, ]; diff --git a/apps/client/src/features/viewers/countdown/countdown.options.ts b/apps/client/src/features/viewers/countdown/countdown.options.ts index 3afe965895..5c8c8b2d4f 100644 --- a/apps/client/src/features/viewers/countdown/countdown.options.ts +++ b/apps/client/src/features/viewers/countdown/countdown.options.ts @@ -1,7 +1,7 @@ -import { getTimeOption, hideTimerSeconds } from '../../../common/components/view-params-editor/constants'; -import { ViewOption } from '../../../common/components/view-params-editor/types'; +import { getTimeOption, hideTimerSeconds, OptionTitle } from '../../../common/components/view-params-editor/constants'; +import { ParamField, ViewOption } from '../../../common/components/view-params-editor/types'; -const makePersistedField = (id: string, value: string): ViewOption => { +const makePersistedField = (id: string, value: string): ParamField => { return { id, title: 'Used to keep the selection on submit', @@ -13,17 +13,20 @@ const makePersistedField = (id: string, value: string): ViewOption => { type Persisted = { id: string; value: string }; export const getCountdownOptions = (timeFormat: string, persisted?: Persisted): ViewOption[] => [ - { section: 'Clock Options' }, - getTimeOption(timeFormat), - { section: 'Timer Options' }, - hideTimerSeconds, - { section: 'View behaviour' }, + { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] }, + { title: OptionTitle.TimerOptions, collapsible: true, options: [hideTimerSeconds] }, { - id: 'showProjected', - title: 'Show projected time', - description: 'Show projected times for the event, as well as apply the runtime offset to the timer.', - type: 'boolean', - defaultValue: false, + title: OptionTitle.BehaviourOptions, + collapsible: true, + options: [ + { + id: 'showProjected', + title: 'Show projected time', + description: 'Show projected times for the event, as well as apply the runtime offset to the timer.', + type: 'boolean', + defaultValue: false, + }, + ...(persisted ? [makePersistedField(persisted.id, persisted.value)] : []), + ], }, - ...(persisted ? [makePersistedField(persisted.id, persisted.value)] : []), ]; diff --git a/apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts b/apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts index 070f75e52e..97bc5d0d06 100644 --- a/apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts +++ b/apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts @@ -1,6 +1,6 @@ import { CustomFields } from 'ontime-types'; -import { makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants'; +import { makeOptionsFromCustomFields, OptionTitle } from '../../../common/components/view-params-editor/constants'; import { ViewOption } from '../../../common/components/view-params-editor/types'; export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] => { @@ -16,102 +16,119 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] = }); return [ - { section: 'Data sources' }, { - id: 'top-src', - title: 'Top Text', - description: '', - type: 'option', - values: topSourceOptions, - defaultValue: 'title', - }, - { - id: 'bottom-src', - title: 'Bottom Text', - description: 'Select the data source for the bottom element', - type: 'option', - values: bottomSourceOptions, - defaultValue: 'none', - }, - { section: 'View animation' }, - { - id: 'transition', - title: 'Transition', - description: 'Transition in time in seconds (default 3)', - type: 'number', - placeholder: '3 (default)', - }, - { - id: 'delay', - title: 'Delay', - description: 'Delay between transition in and out in seconds (default 3)', - type: 'number', - placeholder: '3 (default)', - }, - { section: 'View style override' }, - { - id: 'top-size', - title: 'Top Text Size', - description: 'Font size of the top text', - type: 'string', - placeholder: '65px', - }, - { - id: 'bottom-size', - title: 'Bottom Text Size', - description: 'Font size of the bottom text', - type: 'string', - placeholder: '64px', - }, - { - id: 'width', - title: 'Minimum Width', - description: 'Minimum Width of the element', - type: 'number', - prefix: '%', - placeholder: '45 (default)', - }, - { - id: 'key', - title: 'Key Colour', - description: 'Colour of the background. Default: #FFF0 (transparent)', - type: 'colour', - defaultValue: 'FFF0', - }, - { - id: 'top-colour', - title: 'Top Text Colour', - description: 'Top text colour. Default: #000000', - type: 'colour', - defaultValue: '000000', - }, - { - id: 'bottom-colour', - title: 'Bottom Text Colour', - description: 'Bottom text colour. Default: #000000', - type: 'colour', - defaultValue: '000000', - }, - { - id: 'top-bg', - title: 'Top Background Colour', - description: 'Top text background colour. Default: #FFF0 (transparent)', - type: 'colour', - defaultValue: 'FFF0', + title: OptionTitle.DataSources, + collapsible: true, + options: [ + { + id: 'top-src', + title: 'Top Text', + description: '', + type: 'option', + values: topSourceOptions, + defaultValue: 'title', + }, + { + id: 'bottom-src', + title: 'Bottom Text', + description: 'Select the data source for the bottom element', + type: 'option', + values: bottomSourceOptions, + defaultValue: 'none', + }, + ], }, + { - id: 'bottom-bg', - title: 'Bottom Background Colour', - description: 'Bottom text background colour. Default: #FFF0 (transparent)', - type: 'colour', - defaultValue: 'FFF0', + title: OptionTitle.Animation, + collapsible: true, + options: [ + { + id: 'transition', + title: 'Transition', + description: 'Transition in time in seconds (default 3)', + type: 'number', + placeholder: '3 (default)', + }, + { + id: 'delay', + title: 'Delay', + description: 'Delay between transition in and out in seconds (default 3)', + type: 'number', + placeholder: '3 (default)', + }, + ], }, + { - id: 'line-colour', - title: 'Line Colour', - description: 'Colour of the line. Default: #FF0000', - type: 'colour', - defaultValue: 'FF0000', + title: OptionTitle.StyleOverride, + collapsible: true, + options: [ + { + id: 'top-size', + title: 'Top Text Size', + description: 'Font size of the top text', + type: 'string', + placeholder: '65px', + }, + { + id: 'bottom-size', + title: 'Bottom Text Size', + description: 'Font size of the bottom text', + type: 'string', + placeholder: '64px', + }, + { + id: 'width', + title: 'Minimum Width', + description: 'Minimum Width of the element', + type: 'number', + prefix: '%', + placeholder: '45 (default)', + }, + { + id: 'key', + title: 'Key Colour', + description: 'Colour of the background. Default: #FFF0 (transparent)', + type: 'colour', + defaultValue: 'FFF0', + }, + { + id: 'top-colour', + title: 'Top Text Colour', + description: 'Top text colour. Default: #000000', + type: 'colour', + defaultValue: '000000', + }, + { + id: 'bottom-colour', + title: 'Bottom Text Colour', + description: 'Bottom text colour. Default: #000000', + type: 'colour', + defaultValue: '000000', + }, + { + id: 'top-bg', + title: 'Top Background Colour', + description: 'Top text background colour. Default: #FFF0 (transparent)', + type: 'colour', + defaultValue: 'FFF0', + }, + { + id: 'bottom-bg', + title: 'Bottom Background Colour', + description: 'Bottom text background colour. Default: #FFF0 (transparent)', + type: 'colour', + defaultValue: 'FFF0', + }, + { + id: 'line-colour', + title: 'Line Colour', + description: 'Colour of the line. Default: #FF0000', + type: 'colour', + defaultValue: 'FF0000', + }, + ], }, ]; }; diff --git a/apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts b/apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts index 873625ee1a..70abdc102c 100644 --- a/apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts +++ b/apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts @@ -1,89 +1,101 @@ -import { hideTimerSeconds, showLeadingZeros } from '../../../common/components/view-params-editor/constants'; +import { + hideTimerSeconds, + OptionTitle, + showLeadingZeros, +} 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, - showLeadingZeros, - { 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 or key colour for entire view. Default: #000000', - type: 'colour', - defaultValue: '000000', - }, - { - id: 'text', - title: 'Text Colour', - description: 'Text colour. Default: #FFFFFF', - type: 'colour', - defaultValue: 'FFFFFF', - }, - { - id: 'textbg', - title: 'Text Background', - description: 'Background colour for timer text. Default: #FFF0 (transparent)', - type: 'colour', - defaultValue: 'FFF0', - }, - { - 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)', - }, + { title: OptionTitle.TimerOptions, collapsible: true, options: [hideTimerSeconds, showLeadingZeros] }, { - 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', + title: OptionTitle.ElementVisibility, + collapsible: true, + options: [ + { + 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, + }, + ], }, { - id: 'offsety', - title: 'Offset Vertical', - description: 'Offsets the timer vertical position by a given amount in pixels', - type: 'number', - placeholder: '0 (default)', + title: OptionTitle.StyleOverride, + collapsible: true, + options: [ + { + id: 'key', + title: 'Key Colour', + description: 'Background or key colour for entire view. Default: #000000', + type: 'colour', + defaultValue: '000000', + }, + { + id: 'text', + title: 'Text Colour', + description: 'Text colour. Default: #FFFFFF', + type: 'colour', + defaultValue: 'FFFFFF', + }, + { + id: 'textbg', + title: 'Text Background', + description: 'Background colour for timer text. Default: #FFF0 (transparent)', + type: 'colour', + defaultValue: 'FFF0', + }, + { + 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)', + }, + ], }, ]; diff --git a/apps/client/src/features/viewers/public/public.options.ts b/apps/client/src/features/viewers/public/public.options.ts index 9bd5c886e0..8173907629 100644 --- a/apps/client/src/features/viewers/public/public.options.ts +++ b/apps/client/src/features/viewers/public/public.options.ts @@ -1,44 +1,57 @@ import { CustomFields } from 'ontime-types'; -import { getTimeOption, makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants'; +import { + getTimeOption, + makeOptionsFromCustomFields, + OptionTitle, +} from '../../../common/components/view-params-editor/constants'; import { ViewOption } from '../../../common/components/view-params-editor/types'; export const getPublicOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => { const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' }); return [ - { section: 'Clock Options' }, - getTimeOption(timeFormat), - { section: 'Data sources' }, + { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] }, { - id: 'secondary-src', - title: 'Event secondary text', - description: 'Select the data source for auxiliary text shown in now and next cards', - type: 'option', - values: secondaryOptions, - defaultValue: '', + title: OptionTitle.DataSources, + collapsible: true, + options: [ + { + id: 'secondary-src', + title: 'Event secondary text', + description: 'Select the data source for auxiliary text shown in now and next cards', + type: 'option', + values: secondaryOptions, + defaultValue: '', + }, + ], }, - { section: 'Schedule options' }, { - id: 'eventsPerPage', - title: 'Events per page', - description: 'Sets the number of events on the page, can cause overflow', - type: 'number', - placeholder: '8 (default)', - }, - { - 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, + title: OptionTitle.Schedule, + collapsible: true, + options: [ + { + id: 'eventsPerPage', + title: 'Events per page', + description: 'Sets the number of events on the page, can cause overflow', + type: 'number', + placeholder: '8 (default)', + }, + { + 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, + }, + ], }, ]; }; diff --git a/apps/client/src/features/viewers/studio/studioClock.options.ts b/apps/client/src/features/viewers/studio/studioClock.options.ts index 89bb7170c6..c1353a91d7 100644 --- a/apps/client/src/features/viewers/studio/studioClock.options.ts +++ b/apps/client/src/features/viewers/studio/studioClock.options.ts @@ -1,17 +1,20 @@ -import { getTimeOption, hideTimerSeconds } from '../../../common/components/view-params-editor/constants'; +import { getTimeOption, hideTimerSeconds, OptionTitle } from '../../../common/components/view-params-editor/constants'; import type { ViewOption } from '../../../common/components/view-params-editor/types'; export const getStudioClockOptions = (timeFormat: string): ViewOption[] => [ - { section: 'Clock Options' }, - getTimeOption(timeFormat), - { section: 'Timer Options' }, - hideTimerSeconds, - { section: 'Element visibility' }, + { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] }, + { title: OptionTitle.TimerOptions, collapsible: true, options: [hideTimerSeconds] }, { - id: 'hideRight', - title: 'Hide right section', - description: 'Hides the right section with On Air indicator and the schedule', - type: 'boolean', - defaultValue: false, + title: OptionTitle.ElementVisibility, + collapsible: true, + options: [ + { + id: 'hideRight', + title: 'Hide right section', + description: 'Hides the right section with On Air indicator and the schedule', + type: 'boolean', + defaultValue: false, + }, + ], }, ]; diff --git a/apps/client/src/views/cuesheet/cuesheet.options.ts b/apps/client/src/views/cuesheet/cuesheet.options.ts index 0046f805d3..61e5309bdb 100644 --- a/apps/client/src/views/cuesheet/cuesheet.options.ts +++ b/apps/client/src/views/cuesheet/cuesheet.options.ts @@ -1,6 +1,7 @@ import { useMemo } from 'react'; import { useSearchParams } from 'react-router-dom'; +import { OptionTitle } from '../../common/components/view-params-editor/constants'; import { ViewOption } from '../../common/components/view-params-editor/types'; import { isStringBoolean } from '../../features/viewers/common/viewUtils'; @@ -9,56 +10,66 @@ import { isStringBoolean } from '../../features/viewers/common/viewUtils'; * we save the user preferences in the local storage */ export const cuesheetOptions: ViewOption[] = [ - { section: 'Table options' }, { - id: 'showActionMenu', - title: 'Show action menu', - description: 'Whether to show the action menu for every row in the table', - type: 'boolean', - defaultValue: false, + title: OptionTitle.ElementVisibility, + collapsible: true, + options: [ + { + id: 'showActionMenu', + title: 'Show action menu', + description: 'Whether to show the action menu for every row in the table', + type: 'boolean', + defaultValue: false, + }, + { + id: 'hideTableSeconds', + title: 'Hide seconds in table', + description: 'Whether to hide seconds in the time fields displayed in the table', + type: 'boolean', + defaultValue: false, + }, + { + id: 'followSelected', + title: 'Follow selected event', + description: 'Whether the view should automatically scroll to the selected event', + type: 'boolean', + defaultValue: false, + }, + { + id: 'hidePast', + title: 'Hide Past Events', + description: 'Whether to hide events that have passed', + type: 'boolean', + defaultValue: false, + }, + { + id: 'hideIndexColumn', + title: 'Hide index column', + description: 'Whether the hide the event indexes in the table', + type: 'boolean', + defaultValue: false, + }, + ], }, { - id: 'hideTableSeconds', - title: 'Hide seconds in table', - description: 'Whether to hide seconds in the time fields displayed in the table', - type: 'boolean', - defaultValue: false, - }, - { - id: 'followSelected', - title: 'Follow selected event', - description: 'Whether the view should automatically scroll to the selected event', - type: 'boolean', - defaultValue: false, - }, - { - id: 'hidePast', - title: 'Hide Past Events', - description: 'Whether to hide events that have passed', - type: 'boolean', - defaultValue: false, - }, - { - id: 'hideIndexColumn', - title: 'Hide index column', - description: 'Whether the hide the event indexes in the table', - type: 'boolean', - defaultValue: false, - }, - { section: 'Delay flow' }, - { - id: 'showDelayedTimes', - title: 'Show delayed times', - description: 'Whether the time fields should include delays', - type: 'boolean', - defaultValue: false, - }, - { - id: 'hideDelays', - title: 'Hide delays', - description: 'Whether to hide the rows containing scheduled delays', - type: 'boolean', - defaultValue: false, + title: OptionTitle.BehaviourOptions, + collapsible: true, + options: [ + { + id: 'showDelayedTimes', + title: 'Show delayed times', + description: 'Whether the time fields should include delays', + type: 'boolean', + defaultValue: false, + }, + { + id: 'hideDelays', + title: 'Hide delays', + description: 'Whether to hide the rows containing scheduled delays', + type: 'boolean', + defaultValue: false, + }, + ], }, ]; diff --git a/apps/client/src/views/project-info/projectInfo.options.ts b/apps/client/src/views/project-info/projectInfo.options.ts index 73b01220f3..2bbf97a854 100644 --- a/apps/client/src/views/project-info/projectInfo.options.ts +++ b/apps/client/src/views/project-info/projectInfo.options.ts @@ -1,19 +1,25 @@ +import { OptionTitle } from '../../common/components/view-params-editor/constants'; import { ViewOption } from '../../common/components/view-params-editor/types'; export const projectInfoOptions: ViewOption[] = [ - { section: 'Data visibility' }, { - id: 'showBackstage', - title: 'Show backstage Data', - description: 'Weather to show fields related to the backstage views', - type: 'boolean', - defaultValue: false, - }, - { - id: 'showPublic', - title: 'Show Public Data', - description: 'Weather to show fields related to the public views', - type: 'boolean', - defaultValue: false, + title: OptionTitle.BehaviourOptions, + collapsible: true, + options: [ + { + id: 'showBackstage', + title: 'Show backstage Data', + description: 'Weather to show fields related to the backstage views', + type: 'boolean', + defaultValue: false, + }, + { + id: 'showPublic', + title: 'Show Public Data', + description: 'Weather to show fields related to the public views', + type: 'boolean', + defaultValue: false, + }, + ], }, ]; diff --git a/apps/client/src/views/timeline/timeline.options.ts b/apps/client/src/views/timeline/timeline.options.ts index a1eabb4d8b..0dcfc6a4d4 100644 --- a/apps/client/src/views/timeline/timeline.options.ts +++ b/apps/client/src/views/timeline/timeline.options.ts @@ -1,22 +1,28 @@ -import { getTimeOption } from '../../common/components/view-params-editor/constants'; +import { getTimeOption, OptionTitle } from '../../common/components/view-params-editor/constants'; import { ViewOption } from '../../common/components/view-params-editor/types'; export const getTimelineOptions = (timeFormat: string): ViewOption[] => { return [ - getTimeOption(timeFormat), + { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] }, { - id: 'hidePast', - title: 'Hide Past Events', - description: 'Whether to hide events that have passed', - type: 'boolean', - defaultValue: false, - }, - { - id: 'hideBackstage', - title: 'Hide Private Events', - description: 'Whether to hide non-public events', - type: 'boolean', - defaultValue: false, + title: OptionTitle.ElementVisibility, + collapsible: true, + options: [ + { + id: 'hidePast', + title: 'Hide Past Events', + description: 'Whether to hide events that have passed', + type: 'boolean', + defaultValue: false, + }, + { + id: 'hideBackstage', + title: 'Hide Private Events', + description: 'Whether to hide non-public events', + type: 'boolean', + defaultValue: false, + }, + ], }, ]; }; diff --git a/apps/client/src/views/timer/timer.options.ts b/apps/client/src/views/timer/timer.options.ts index a8a33c8bc6..32023b236c 100644 --- a/apps/client/src/views/timer/timer.options.ts +++ b/apps/client/src/views/timer/timer.options.ts @@ -7,6 +7,7 @@ import { getTimeOption, hideTimerSeconds, makeOptionsFromCustomFields, + OptionTitle, showLeadingZeros, } from '../../common/components/view-params-editor/constants'; import { ViewOption } from '../../common/components/view-params-editor/types'; @@ -25,71 +26,86 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields): const secondaryOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' }); return [ - { section: 'Clock Options' }, - getTimeOption(timeFormat), - { section: 'Timer Options' }, - hideTimerSeconds, - showLeadingZeros, + { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] }, { - id: 'timerType', - title: 'Timer type', - description: 'Override the timer type', - type: 'option', - values: timerDisplayOptions, - defaultValue: 'no-overrides', + title: OptionTitle.TimerOptions, + collapsible: true, + options: [ + hideTimerSeconds, + showLeadingZeros, + { + id: 'timerType', + title: 'Timer type', + description: 'Override the timer type', + type: 'option', + values: timerDisplayOptions, + defaultValue: 'no-overrides', + }, + ], }, - { 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 Timer Message', - description: 'Prevents displaying fullscreen messages in the timer', - type: 'boolean', - defaultValue: false, + title: OptionTitle.DataSources, + collapsible: true, + options: [ + { + 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: '', + }, + ], }, + { - id: 'hideExternal', - title: 'Hide Auxiliary timer / External message', - description: 'Prevents the screen from displaying the secondary timer field', - type: 'boolean', - defaultValue: false, + title: OptionTitle.ElementVisibility, + collapsible: true, + options: [ + { + 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 Timer Message', + description: 'Prevents displaying fullscreen messages in the timer', + type: 'boolean', + defaultValue: false, + }, + { + id: 'hideExternal', + title: 'Hide Auxiliary timer / External message', + description: 'Prevents the screen from displaying the secondary timer field', + type: 'boolean', + defaultValue: false, + }, + ], }, ]; };