Feat/countdown style (#290)

* feat: Countdown Style

---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>
Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com>
Co-authored-by: Fabian Posenau <19673098+kellhogs@users.noreply.github.com>

apps/client/src/common/components/timer-display/TimerDisplay.scss

@@ -3,18 +3,12 @@
 .timer {
   font-family: var(--font-family-override, $viewer-font-family);
   color: var(--timer-color-override, $timer-color);
-  font-size: 20vw;
   line-height: 0.9em;
   text-align: center;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.1em;
   font-weight: 600;
-
-  &--small {
-    font-size: 3.75em;
-    text-align: center;
-    letter-spacing: 0.1em;
-  }
-
+  font-size: 3.75em;
+  
   &--finished {
     color: $timer-finished-color;
   }

apps/client/src/common/components/timer-display/TimerDisplay.tsx

@@ -6,9 +6,6 @@ import './TimerDisplay.scss';
 
 interface TimerDisplayProps {
   time?: number | null;
-  small?: boolean;
-  hideZeroHours?: boolean;
-  className?: string;
 }
 
 /**
@@ -17,15 +14,19 @@ interface TimerDisplayProps {
  * @constructor
  */
 const TimerDisplay = (props: TimerDisplayProps) => {
-  const { time, small, hideZeroHours, className = '' } = props;
+  const { time } = props;
 
-  const display =
-    (time === null || typeof time === 'undefined' || isNaN(time))
-      ? '-- : -- : --'
-      : formatDisplay(millisToSeconds(time), hideZeroHours);
+  let display = '';
+
+  if (time === null || typeof time === 'undefined' || isNaN(time)) {
+    display = '-- : -- : --';
+  } else {
+    display = formatDisplay(millisToSeconds(time));
+  }
 
   const isNegative = (time ?? 0) < 0;
-  const classes = `timer ${small ? 'timer--small' : ''} ${isNegative ? 'timer--finished' : ''} ${className}`;
+
+  const classes = `timer ${isNegative ? 'timer--finished' : ''}`;
 
   return <div className={classes}>{display}</div>;
 };

apps/client/src/common/models/TimeManager.type.ts

@@ -1,9 +1,12 @@
-import { Playback } from 'ontime-types';
+import { Playback, TimerType } from 'ontime-types';
 
 export type TimeManagerType = {
   clock: number;
   current: null | number;
   elapsed: null | number;
+  duration: null | number;
+  timerBehaviour?: string;
+  timerType: TimerType;
   expectedFinish: null | number;
   addedTime: number;
   startedAt: null | number;