diff --git a/apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts b/apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts index 647aad619..3162c1fcc 100644 --- a/apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts +++ b/apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts @@ -26,10 +26,10 @@ describe('makeOptionsFromCustomFields()', () => { ]; const result = makeOptionsFromCustomFields(testCustomFields, additionalData); expect(result).toStrictEqual([ - { value: 'custom-field1', label: 'Custom: Field 1' }, - { value: 'custom-field2', label: 'Custom: Field 2' }, { value: 'test1', label: 'Test 1' }, { value: 'test2', label: 'Test 2' }, + { value: 'custom-field1', label: 'Custom: Field 1' }, + { value: 'custom-field2', label: 'Custom: Field 2' }, ]); }); diff --git a/apps/client/src/common/components/view-params-editor/common.options.ts b/apps/client/src/common/components/view-params-editor/common.options.ts index 6d1b72f6c..90af2968d 100644 --- a/apps/client/src/common/components/view-params-editor/common.options.ts +++ b/apps/client/src/common/components/view-params-editor/common.options.ts @@ -4,8 +4,8 @@ export const getTimeOption = (timeFormat: string): ParamField => { const placeholder = `${timeFormat} (default)`; return { id: 'timeformat', - title: 'Time format string, taken from the Application Settings', - description: 'Format for auxiliar time fields (not the running), eg. HH:mm:ss or hh:mm:ss a, see docs for help', + title: 'Clock time format, defaults to value from the Settings', + description: 'Format for the Time Now field, eg. HH:mm:ss or hh:mm:ss a, see docs for help', type: 'string', placeholder, }; diff --git a/apps/client/src/common/components/view-params-editor/viewParams.utils.ts b/apps/client/src/common/components/view-params-editor/viewParams.utils.ts index a59b7c3a2..93789451d 100644 --- a/apps/client/src/common/components/view-params-editor/viewParams.utils.ts +++ b/apps/client/src/common/components/view-params-editor/viewParams.utils.ts @@ -13,7 +13,7 @@ export function makeOptionsFromCustomFields( additionalOptions: SelectOption[] = [], filterImageType = true, ): SelectOption[] { - const options: SelectOption[] = []; + const options: SelectOption[] = [...additionalOptions]; // Add custom fields first for (const [key, value] of Object.entries(customFields)) { @@ -27,7 +27,7 @@ export function makeOptionsFromCustomFields( }); } - return options.concat(additionalOptions); + return options; } /** diff --git a/apps/client/src/features/app-settings/quick-start/QuickStart.tsx b/apps/client/src/features/app-settings/quick-start/QuickStart.tsx index 045842a3e..d6fb7109e 100644 --- a/apps/client/src/features/app-settings/quick-start/QuickStart.tsx +++ b/apps/client/src/features/app-settings/quick-start/QuickStart.tsx @@ -9,7 +9,6 @@ import Input from '../../../common/components/input/input/Input'; import TimeInput from '../../../common/components/input/time-input/TimeInput'; import Modal from '../../../common/components/modal/Modal'; import Select from '../../../common/components/select/Select'; -import Switch from '../../../common/components/switch/Switch'; import { editorSettingsDefaults, useEditorSettings } from '../../../common/stores/editorSettings'; import * as Panel from '../panel-utils/PanelUtils'; diff --git a/apps/client/src/features/viewers/common/viewUtils.ts b/apps/client/src/features/viewers/common/viewUtils.ts index 8df9bd273..7ce663658 100644 --- a/apps/client/src/features/viewers/common/viewUtils.ts +++ b/apps/client/src/features/viewers/common/viewUtils.ts @@ -55,6 +55,18 @@ export function isStringBoolean(text: string | null) { return text?.toLowerCase() === 'true' || text === '1'; } +/** + * Prepares a colour string for use in views + * Colours in params do not have the #prefix + */ +export function makeColourString(hex: string | null): string | undefined { + if (!hex) { + return undefined; + } + // ensure the hex starts with a # + return hex.startsWith('#') ? hex : `#${hex}`; +} + /** * Retrieves a dynamic property from an event * Considers custom fields diff --git a/apps/client/src/views/timer/Timer.scss b/apps/client/src/views/timer/Timer.scss index 0d8b1063d..11bb797a4 100644 --- a/apps/client/src/views/timer/Timer.scss +++ b/apps/client/src/views/timer/Timer.scss @@ -9,7 +9,7 @@ transition: opacity 0.5s ease-in-out; font-family: var(--font-family-override, $viewer-font-family); - background: var(--background-color-override, $viewer-background-color); + background: var(--timer-bg, var(--background-color-override, $viewer-background-color)); color: var(--color-override, $viewer-color); gap: $view-element-gap; padding: $view-outer-padding; @@ -100,8 +100,8 @@ .timer { opacity: 1; - font-family: var(--font-family-override, $viewer-font-family); - color: var(--timer-color-override, var(--phase-color)); + font-family: var(--timer-font, var(--font-family-override, $viewer-font-family)); + color: var(--timer-colour, var(--timer-color-override, var(--phase-color))); line-height: 0.9em; text-align: center; letter-spacing: 0.05em; diff --git a/apps/client/src/views/timer/Timer.tsx b/apps/client/src/views/timer/Timer.tsx index 8c1652200..762b40179 100644 --- a/apps/client/src/views/timer/Timer.tsx +++ b/apps/client/src/views/timer/Timer.tsx @@ -42,21 +42,36 @@ interface TimerProps { viewSettings: ViewSettings; } -export default function Timer(props: TimerProps) { - const { customFields, eventNow, eventNext, general, isMirrored, message, settings, time, viewSettings } = props; +export default function Timer({ + customFields, + eventNow, + eventNext, + general, + isMirrored, + message, + settings, + time, + viewSettings, +}: TimerProps) { const auxTimer = useAuxTimersTime(); - const { hideClock, hideCards, hideProgress, hideMessage, hideSecondary, + hideLogo, hideTimerSeconds, removeLeadingZeros, mainSource, secondarySource, timerType, + freezeOvertime, + freezeMessage, + hideOvertime, + font, + keyColour, + textColour, } = useTimerOptions(); const { getLocalizedString } = useTranslation(); @@ -71,7 +86,9 @@ export default function Timer(props: TimerProps) { time.timerType, time.countToEnd, time.phase, - viewSettings, + freezeOvertime, + freezeMessage, + hideOvertime, ); const isPlaying = getIsPlaying(time.playback); const showClock = !hideClock && getShowClock(viewTimerType); @@ -90,7 +107,7 @@ export default function Timer(props: TimerProps) { // gather timer data const totalTime = getTotalTime(time.duration, time.addedTime); const clock = formatTime(time.clock); - const stageTimer = getTimerByType(viewSettings.freezeEnd, time, timerType); + const stageTimer = getTimerByType(freezeOvertime, time, timerType); const display = getFormattedTimer(stageTimer, viewTimerType, localisedMinutes, { removeSeconds: hideTimerSeconds, removeLeadingZero: removeLeadingZeros, @@ -121,6 +138,11 @@ export default function Timer(props: TimerProps) { // gather presentation styles const timerColour = getTimerColour(viewSettings, showWarning, showDanger); const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent); + const userStyles = { + ...(keyColour && { '--timer-bg': keyColour }), + ...(textColour && { '--timer-colour': textColour }), + ...(font && { '--timer-font': font }), + }; // gather option data const defaultFormat = getDefaultFormat(settings?.timeFormat); @@ -128,10 +150,11 @@ export default function Timer(props: TimerProps) { return (