refactor: timer design review

2026-08-09 01:13:55 +00:00 · 2025-07-12 11:55:49 +02:00
parent 2aac4cb06d
commit 05d01e0863
9 changed files with 131 additions and 33 deletions
@@ -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' },
    ]);
  });

@@ -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,
  };
@@ -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;
 }

 /**
@@ -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';

@@ -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
@@ -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;
@@ -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 (
    <div
-      className={cx(['stage-timer', isMirrored && 'mirror', showFinished && 'stage-timer--finished'])}
      data-testid='timer-view'
+      className={cx(['stage-timer', isMirrored && 'mirror', showFinished && 'stage-timer--finished'])}
+      style={userStyles}
    >
-      {general?.logo && <ViewLogo name={general.logo} className='logo' />}
+      {!hideLogo && general?.logo && <ViewLogo name={general.logo} className='logo' />}

      <ViewParamsEditor viewOptions={timerOptions} />

@@ -155,7 +178,7 @@ export default function Timer(props: TimerProps) {
      <div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
        {showEndMessage ? (
          <FitText mode='multi' min={64} max={256} className='end-message'>
-            {viewSettings.endMessage}
+            {freezeMessage}
          </FitText>
        ) : (
          <div
@@ -12,7 +12,7 @@ import {
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
-import { isStringBoolean } from '../../features/viewers/common/viewUtils';
+import { isStringBoolean, makeColourString } from '../../features/viewers/common/viewUtils';

 // manually match the properties of TimerType excluding the None
 const timerDisplayOptions: SelectOption[] = [
@@ -48,6 +48,29 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
          values: timerDisplayOptions,
          defaultValue: 'no-overrides',
        },
+        {
+          id: 'freezeOvertime',
+          title: 'Freeze Overtime',
+          description: 'If active, the timer will not count into negative numbers',
+          type: 'boolean',
+          defaultValue: false,
+        },
+        {
+          id: 'freezeMessage',
+          title: 'Freeze Message',
+          description:
+            'An optional message to show when the timer is in overtime (must be set in combination with Freeze Overtime)',
+          type: 'string',
+          defaultValue: '',
+          placeholder: 'e.g. Time is up!',
+        },
+        {
+          id: 'hideOvertime',
+          title: 'Hide Overtime',
+          description: 'Whether to suppress overtime styles (red borders and red text)',
+          type: 'boolean',
+          defaultValue: false,
+        },
      ],
    },
    {
@@ -72,7 +95,6 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
        },
      ],
    },
-
    {
      title: OptionTitle.ElementVisibility,
      collapsible: true,
@@ -112,6 +134,40 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
          type: 'boolean',
          defaultValue: false,
        },
+        {
+          id: 'hideLogo',
+          title: 'Hide the project logo',
+          description: 'Prevents the screen from displaying the given project logo',
+          type: 'boolean',
+          defaultValue: false,
+        },
+      ],
+    },
+    {
+      title: OptionTitle.StyleOverride,
+      collapsible: true,
+      options: [
+        {
+          id: 'font',
+          title: 'Font',
+          description: 'Font family, will use the fonts available in the system',
+          type: 'string',
+          placeholder: 'Open Sans (default)',
+        },
+        {
+          id: 'keyColour',
+          title: 'Key Colour',
+          description: 'Background or key colour for entire view. Default: #101010',
+          type: 'colour',
+          defaultValue: '101010',
+        },
+        {
+          id: 'textColour',
+          title: 'Text Colour',
+          description: 'Text colour. Default: #f6f6f6',
+          type: 'colour',
+          defaultValue: 'f6f6f6',
+        },
      ],
    },
  ];
@@ -123,11 +179,18 @@ type TimerOptions = {
  hideProgress: boolean;
  hideMessage: boolean;
  hideSecondary: boolean;
+  hideLogo: boolean;
  hideTimerSeconds: boolean;
  removeLeadingZeros: boolean;
  mainSource: keyof OntimeEvent | null;
  secondarySource: keyof OntimeEvent | null;
  timerType?: TimerType;
+  freezeOvertime: boolean;
+  freezeMessage: string;
+  hideOvertime: boolean;
+  font?: string;
+  keyColour?: string;
+  textColour?: string;
 };

 /**
@@ -143,6 +206,7 @@ function getOptionsFromParams(searchParams: URLSearchParams): TimerOptions {
    hideProgress: isStringBoolean(searchParams.get('hideProgress')),
    hideMessage: isStringBoolean(searchParams.get('hideMessage')),
    hideSecondary: isStringBoolean(searchParams.get('hideSecondary')),
+    hideLogo: isStringBoolean(searchParams.get('hideLogo')),
    hideTimerSeconds: isStringBoolean(searchParams.get('hideTimerSeconds')),
    removeLeadingZeros: !isStringBoolean(searchParams.get('showLeadingZeros')),

@@ -151,6 +215,13 @@ function getOptionsFromParams(searchParams: URLSearchParams): TimerOptions {

    // none doesnt make sense as a configuration of the view
    timerType: timerType === TimerType.None ? undefined : timerType,
+    freezeOvertime: isStringBoolean(searchParams.get('freezeOvertime')),
+    freezeMessage: searchParams.get('freezeMessage') ?? '',
+    hideOvertime: isStringBoolean(searchParams.get('hideOvertime')),
+
+    font: searchParams.get('font') ?? undefined,
+    keyColour: makeColourString(searchParams.get('keyColour')),
+    textColour: makeColourString(searchParams.get('textColour')),
  };
 }

@@ -1,13 +1,4 @@
-import {
-  MaybeNumber,
-  MessageState,
-  OntimeEvent,
-  Playback,
-  TimerMessage,
-  TimerPhase,
-  TimerType,
-  ViewSettings,
-} from 'ontime-types';
+import { MaybeNumber, MessageState, OntimeEvent, Playback, TimerMessage, TimerPhase, TimerType } from 'ontime-types';
 import { isPlaybackActive } from 'ontime-utils';

 import { getFormattedTimer, getPropertyValue } from '../../features/viewers/common/viewUtils';
@@ -90,13 +81,15 @@ export function getShowModifiers(
  timerType: TimerType,
  countToEnd: boolean,
  phase: TimerPhase,
-  viewSettings: ViewSettings,
+  freezeOvertime: boolean,
+  freezeMessage: string,
+  hideOvertime: boolean,
 ) {
  const showModifiers = timerType === TimerType.CountDown || countToEnd;
  const finished = phase === TimerPhase.Overtime;
  return {
-    showEndMessage: showModifiers && finished && viewSettings.endMessage,
-    showFinished: showModifiers && finished, // ????
+    showEndMessage: showModifiers && finished && freezeOvertime && freezeMessage !== '',
+    showFinished: showModifiers && !hideOvertime && finished,
    showWarning: showModifiers && phase === TimerPhase.Warning,
    showDanger: showModifiers && phase === TimerPhase.Danger,
  };