refactor: review timer styles

apps/client/src/views/backstage/Backstage.tsx

@@ -35,9 +35,18 @@ interface BackstageProps {
   settings: Settings | undefined;
 }
 
-export default function Backstage(props: BackstageProps) {
-  const { events, customFields, eventNext, eventNow, general, time, isMirrored, runtime, selectedId, settings } = props;
-
+export default function Backstage({
+  events,
+  customFields,
+  eventNext,
+  eventNow,
+  general,
+  time,
+  isMirrored,
+  runtime,
+  selectedId,
+  settings,
+}: BackstageProps) {
   const { getLocalizedString } = useTranslation();
   const { secondarySource } = useBackstageOptions();
   const [blinkClass, setBlinkClass] = useState(false);

apps/client/src/views/studio/StudioTimers.tsx

@@ -38,7 +38,12 @@ export default function StudioTimers({
   const formattedSecondaryMessage = secondaryMessage || '-';
 
   // gather presentation styles
-  const timerColour = getTimerColour(viewSettings, time.phase === TimerPhase.Warning, time.phase === TimerPhase.Danger);
+  const timerColour = getTimerColour(
+    viewSettings,
+    undefined,
+    time.phase === TimerPhase.Warning,
+    time.phase === TimerPhase.Danger,
+  );
 
   return (
     <div className='studio__timers'>

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

@@ -101,7 +101,7 @@
     .timer {
       opacity: 1;
       font-family: var(--timer-font, var(--font-family-override, $viewer-font-family));
-      color: var(--timer-colour, var(--timer-color-override, var(--phase-color)));
+      color: var(--timer-colour, var(--timer-color-override, $ui-white));
       line-height: 0.9em;
       text-align: center;
       letter-spacing: 0.05em;
@@ -117,14 +117,14 @@
 
       // use a class instead of a phase, to allow suppressing overtime style
       &--finished {
-        color: var(--timer-overtime-color-override, $timer-finished-color);
+        color: var(--timer-colour, var(--timer-overtime-color-override, $timer-finished-color));
       }
 
       &[data-phase="warning"] {
-        color: var(--timer-warning-color-override, var(--phase-color));
+        color: var(--timer-colour, var(--timer-warning-color-override));
       }
       &[data-phase="danger"] {
-        color: var(--timer-danger-color-override, var(--phase-color));
+        color: var(--timer-colour, var(--timer-danger-color-override));
       }
     }
   }

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

@@ -68,7 +68,7 @@ export default function Timer({
     timerType,
     freezeOvertime,
     freezeMessage,
-    hideOvertime,
+    hidePhase,
     font,
     keyColour,
     textColour,
@@ -88,7 +88,7 @@ export default function Timer({
     time.phase,
     freezeOvertime,
     freezeMessage,
-    hideOvertime,
+    hidePhase,
   );
   const isPlaying = getIsPlaying(time.playback);
   const showClock = !hideClock && getShowClock(viewTimerType);
@@ -136,11 +136,11 @@ export default function Timer({
   );
 
   // gather presentation styles
-  const timerColour = getTimerColour(viewSettings, showWarning, showDanger);
+  const timerColour = getTimerColour(viewSettings, textColour, showWarning, showDanger);
   const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent);
   const userStyles = {
     ...(keyColour && { '--timer-bg': keyColour }),
-    ...(textColour && { '--timer-colour': textColour }),
+    ...(textColour && { '--timer-colour': timerColour }),
     ...(font && { '--timer-font': font }),
   };
 
@@ -183,10 +183,7 @@ export default function Timer({
         ) : (
           <div
             className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}
-            style={{
-              fontSize: `${timerFontSize}vw`,
-              '--phase-color': timerColour,
-            }}
+            style={{ fontSize: `${timerFontSize}vw` }}
             data-phase={time.phase}
           >
             {display}

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

@@ -65,9 +65,9 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           placeholder: 'e.g. Time is up!',
         },
         {
-          id: 'hideOvertime',
-          title: 'Hide Overtime',
-          description: 'Whether to suppress overtime styles (red borders and red text)',
+          id: 'hidePhase',
+          title: 'Hide progress styles',
+          description: 'Whether to suppress the progress styles (warning, danger and overtime)',
           type: 'boolean',
           defaultValue: false,
         },
@@ -187,7 +187,7 @@ type TimerOptions = {
   timerType?: TimerType;
   freezeOvertime: boolean;
   freezeMessage: string;
-  hideOvertime: boolean;
+  hidePhase: boolean;
   font?: string;
   keyColour?: string;
   textColour?: string;
@@ -217,7 +217,7 @@ function getOptionsFromParams(searchParams: URLSearchParams): TimerOptions {
     timerType: timerType === TimerType.None ? undefined : timerType,
     freezeOvertime: isStringBoolean(searchParams.get('freezeOvertime')),
     freezeMessage: searchParams.get('freezeMessage') ?? '',
-    hideOvertime: isStringBoolean(searchParams.get('hideOvertime')),
+    hidePhase: isStringBoolean(searchParams.get('hidePhase')),
 
     font: searchParams.get('font') ?? undefined,
     keyColour: makeColourString(searchParams.get('keyColour')),

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

@@ -83,15 +83,32 @@ export function getShowModifiers(
   phase: TimerPhase,
   freezeOvertime: boolean,
   freezeMessage: string,
-  hideOvertime: boolean,
+  hidePhase: boolean,
 ) {
+  if (hidePhase) {
+    return {
+      showEndMessage: false,
+      showFinished: false,
+      showWarning: false,
+      showDanger: false,
+    };
+  }
+
   const showModifiers = timerType === TimerType.CountDown || countToEnd;
-  const finished = phase === TimerPhase.Overtime;
+  if (!showModifiers) {
+    return {
+      showEndMessage: false,
+      showFinished: false,
+      showWarning: false,
+      showDanger: false,
+    };
+  }
+
   return {
-    showEndMessage: showModifiers && finished && freezeOvertime && freezeMessage !== '',
-    showFinished: showModifiers && !hideOvertime && finished,
-    showWarning: showModifiers && phase === TimerPhase.Warning,
-    showDanger: showModifiers && phase === TimerPhase.Danger,
+    showEndMessage: freezeOvertime && freezeMessage !== '',
+    showFinished: phase === TimerPhase.Overtime,
+    showWarning: phase === TimerPhase.Warning,
+    showDanger: phase === TimerPhase.Danger,
   };
 }
 

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

@@ -3,8 +3,13 @@ import { ViewSettings } from 'ontime-types';
 /**
  * Which colour should the timer have at a given moment
  */
-export function getTimerColour(viewSettings: ViewSettings, showWarning: boolean, showDanger: boolean) {
+export function getTimerColour(
+  viewSettings: ViewSettings,
+  timerColour: string | undefined,
+  showWarning: boolean,
+  showDanger: boolean,
+) {
   if (showWarning) return viewSettings.warningColor;
   if (showDanger) return viewSettings.dangerColor;
-  return viewSettings.normalColor;
+  return timerColour || viewSettings.normalColor;
 }