refactor: timer design review

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' },
     ]);
   });
 

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',
+    title: 'Clock time format, defaults to value from the Settings',
-    description: 'Format for auxiliar time fields (not the running), eg. HH:mm:ss or hh:mm:ss a, see docs for help',
+    description: 'Format for the Time Now field, eg. HH:mm:ss or hh:mm:ss a, see docs for help',
     type: 'string',
     placeholder,
   };

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;
 }
 
 /**

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';
 

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

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);
+      font-family: var(--timer-font, var(--font-family-override, $viewer-font-family));
-      color: var(--timer-color-override, var(--phase-color));
+      color: var(--timer-colour, var(--timer-color-override, var(--phase-color)));
       line-height: 0.9em;
       text-align: center;
       letter-spacing: 0.05em;

apps/client/src/views/timer/Timer.tsx

@@ -42,21 +42,36 @@ interface TimerProps {
   viewSettings: ViewSettings;
 }
 
-export default function Timer(props: TimerProps) {
+export default function Timer({
-  const { customFields, eventNow, eventNext, general, isMirrored, message, settings, time, viewSettings } = props;
+  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

apps/client/src/views/timer/timer.options.ts

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

apps/client/src/views/timer/timer.utils.ts

@@ -1,13 +1,4 @@
-import {
+import { MaybeNumber, MessageState, OntimeEvent, Playback, TimerMessage, TimerPhase, TimerType } from 'ontime-types';
-  MaybeNumber,
-  MessageState,
-  OntimeEvent,
-  Playback,
-  TimerMessage,
-  TimerPhase,
-  TimerType,
-  ViewSettings,
-} 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,
+    showEndMessage: showModifiers && finished && freezeOvertime && freezeMessage !== '',
-    showFinished: showModifiers && finished, // ????
+    showFinished: showModifiers && !hideOvertime && finished,
     showWarning: showModifiers && phase === TimerPhase.Warning,
     showDanger: showModifiers && phase === TimerPhase.Danger,
   };