Feat/countdown style

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

@@ -3,7 +3,6 @@
 .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;

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

@@ -5,7 +5,7 @@ import { formatDisplay, millisToSeconds } from '../../utils/dateConfig';
 import './TimerDisplay.scss';
 
 interface TimerDisplayProps {
-  time?: number | null;
+  time?: string | number | null;
   small?: boolean;
   hideZeroHours?: boolean;
   className?: string;
@@ -19,12 +19,18 @@ interface TimerDisplayProps {
 const TimerDisplay = (props: TimerDisplayProps) => {
   const { time, small, hideZeroHours, className = '' } = props;
 
-  const display =
-    (time === null || typeof time === 'undefined' || isNaN(time))
-      ? '-- : -- : --'
-      : formatDisplay(millisToSeconds(time), hideZeroHours);
+  let display = '';
+
+  if (typeof time === 'string') {
+    display = time;
+  } else if (time === null || typeof time === 'undefined' || isNaN(time)) {
+    display = '-- : -- : --';
+  } else {
+    display = formatDisplay(millisToSeconds(time), hideZeroHours);
+  }
 
   const isNegative = (time ?? 0) < 0;
+
   const classes = `timer ${small ? 'timer--small' : ''} ${isNegative ? 'timer--finished' : ''} ${className}`;
 
   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;

apps/client/src/features/event-editor/EventEditor.tsx

@@ -2,7 +2,7 @@ import { useCallback, useContext, useEffect, useState } from 'react';
 import { Button, Select, Switch } from '@chakra-ui/react';
 import { IoBan } from '@react-icons/all-files/io5/IoBan';
 import { useAtom } from 'jotai';
-import { OntimeEvent } from 'ontime-types';
+import { OntimeEvent, TimerType } from 'ontime-types';
 
 import { editorEventId } from '../../common/atoms/LocalEventSettings';
 import CopyTag from '../../common/components/copy-tag/CopyTag';
@@ -84,7 +84,8 @@ export default function EventEditor() {
     [emitError, event, updateEvent],
   );
 
-  const timerValidationHandler = useCallback((entry: TimeEntryField, val: number) => {
+  const timerValidationHandler = useCallback(
+    (entry: TimeEntryField, val: number) => {
       if (!event) {
         return;
       }
@@ -97,7 +98,15 @@ export default function EventEditor() {
     [event, emitWarning],
   );
 
-  const togglePublic = useCallback((currentValue: boolean) => {
+  const handleChange = useCallback(
+    (field: string, value: string) => {
+      updateEvent({ id: event.id, [field]: value });
+    },
+    [event, updateEvent],
+  );
+
+  const togglePublic = useCallback(
+    (currentValue: boolean) => {
       if (!event) {
         return;
       }
@@ -111,9 +120,7 @@ export default function EventEditor() {
   }
 
   const delayed = delay !== 0;
-  const addedTime = delayed
-    ? `${delay >= 0 ? '+' : '-'} ${millisToMinutes(Math.abs(delay))} minutes`
-    : null;
+  const addedTime = delayed ? `${delay >= 0 ? '+' : '-'} ${millisToMinutes(Math.abs(delay))} minutes` : null;
   const newStart = delayed ? `New start ${stringFromMillis(event.timeStart + delay)}` : null;
   const newEnd = delayed ? `New end ${stringFromMillis(event.timeEnd + delay)}` : null;
 
@@ -162,26 +169,32 @@ export default function EventEditor() {
           />
         </div>
         <div className={style.timeSettings}>
-          <label className={style.inputLabel}>Timer type</label>
-          <Select size='sm' variant='ontime'>
-            <option value='option1'>Start to end</option>
-            <option value='option2'>Duration</option>
-            <option value='option3'>Follow previous</option>
-            <option value='option3'>Start only</option>
+          <label className={style.inputLabel}>Timer Behaviour</label>
+          <Select
+            size='sm'
+            name='timerBehaviour'
+            value={event.timerBehaviour}
+            onChange={(event) => handleChange('timerBehaviour', event.target.value)}
+          >
+            <option value='start-end'>Start to end</option>
+            <option value='duration'>Duration</option>
+            <option value='follow-previous'>Follow previous</option>
+            <option value='start-only'>Start only</option>
           </Select>
-          <label className={style.inputLabel}>Countdown style</label>
-          <Select size='sm' variant='ontime'>
-            <option value='option1'>Count down</option>
-            <option value='option2'>Count up</option>
-            <option value='option3'>Clock</option>
+          <label className={style.inputLabel}>Timer Type</label>
+          <Select
+            size='sm'
+            name='timerType'
+            value={event.timerType}
+            onChange={(event) => handleChange('timerType', event.target.value)}
+          >
+            <option value={TimerType.CountDown}>Count down</option>
+            <option value={TimerType.CountUp}>Count up</option>
+            <option value={TimerType.Clock}>Clock</option>
           </Select>
           <span className={style.spacer} />
           <label className={`${style.inputLabel} ${style.publicToggle}`}>
-            <Switch
-              isChecked={event.isPublic}
-              onChange={() => togglePublic(event.isPublic)}
-              variant='ontime'
-            />
+            <Switch isChecked={event.isPublic} onChange={() => togglePublic(event.isPublic)} variant='ontime' />
             Event is public
           </label>
         </div>
@@ -194,11 +207,7 @@ export default function EventEditor() {
           </div>
           <div className={style.column}>
             <label className={style.inputLabel}>Presenter</label>
-            <TextInput
-              field='presenter'
-              initialText={event.presenter}
-              submitHandler={handleSubmit}
-            />
+            <TextInput field='presenter' initialText={event.presenter} submitHandler={handleSubmit} />
           </div>
           <div className={style.column}>
             <label className={style.inputLabel}>Subtitle</label>
@@ -209,30 +218,15 @@ export default function EventEditor() {
           <div className={style.column}>
             <label className={style.inputLabel}>Colour</label>
             <div className={style.inline}>
-              <ColourInput
-                name="colour"
-                value={event?.colour}
-                handleChange={handleSubmit}
-              />
-              <Button
-                leftIcon={<IoBan />}
-                onClick={() => handleSubmit('colour', '')}
-                variant='ontime-subtle'
-                size='sm'
-              >
+              <ColourInput name='colour' value={event?.colour} handleChange={handleSubmit} />
+              <Button leftIcon={<IoBan />} onClick={() => handleSubmit('colour', '')} variant='ontime-subtle' size='sm'>
                 Clear colour
               </Button>
             </div>
           </div>
           <div className={`${style.column} ${style.fullHeight}`}>
             <label className={style.inputLabel}>Note</label>
-            <TextInput
-              field='note'
-              initialText={event.note}
-              submitHandler={handleSubmit}
-              isTextArea
-              isFullHeight
-            />
+            <TextInput field='note' initialText={event.note} submitHandler={handleSubmit} isTextArea isFullHeight />
           </div>
         </div>
       </div>

apps/client/src/features/viewers/common/viewerUtils.ts

@@ -0,0 +1,28 @@
+import { TimerType } from 'ontime-types';
+
+import { TimeManagerType } from '../../../common/models/TimeManager.type';
+import { formatTime } from '../../../common/utils/time';
+
+const formatOptions = {
+  showSeconds: true,
+  format: 'hh:mm:ss a',
+};
+
+type TimerTypeParams = Pick<TimeManagerType, 'timerType' | 'current' | 'elapsed' | 'clock'>;
+
+export function getTimerByType(timerObject?: TimerTypeParams): string | number | null {
+  let timer = null;
+  if (!timerObject) {
+    return timer;
+  }
+
+  if (timerObject.timerType === TimerType.CountDown) {
+    timer = timerObject.current;
+  } else if (timerObject.timerType === TimerType.CountUp) {
+    timer = timerObject?.elapsed ?? 0;
+  } else if (timerObject.timerType === TimerType.Clock) {
+    timer = formatTime(timerObject.clock, formatOptions);
+  }
+
+  return timer;
+}

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useAtom } from 'jotai';
-import { EventData, Message, ViewSettings } from 'ontime-types';
+import { EventData, Message, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
@@ -10,6 +10,7 @@ import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import { OverridableOptions } from '../../../common/models/View.types';
 import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig';
+import { getTimerByType } from '../common/viewerUtils';
 
 import './MinimalTimer.scss';
 
@@ -128,22 +129,30 @@ export default function MinimalTimer(props: MinimalTimerProps) {
 
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playback !== 'pause';
-  const isNegative = (time.current ?? 0) < 0;
-  const showFinished = isNegative && !userOptions?.hideOvertime;
+  const isNegative =
+    (time.current ?? 0) < 0 && time.timerType !== TimerType.Clock && time.timerType !== TimerType.CountUp;
   const showEndMessage = time.current < 0 && general.endMessage && !hideEndMessage;
+  const showFinished = time.finished && !userOptions?.hideOvertime && (time.timerType !== TimerType.Clock || showEndMessage);
 
-  const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`;
+  const stageTimer = getTimerByType(time);
+
+  let display = '';
 
-  let stageTimer;
-  if (time.current === null) {
-    stageTimer = '- - : - -';
+  if (typeof stageTimer === 'string') {
+    display = stageTimer;
+  } else if (stageTimer === null || typeof stageTimer === 'undefined' || isNaN(stageTimer)) {
+    display = '-- : -- : --';
   } else {
-    stageTimer = formatDisplay(Math.abs(millisToSeconds(time.current)), true);
-    if (time.current < 0) {
-      stageTimer = `-${stageTimer}`;
-    }
+    display = formatDisplay(millisToSeconds(stageTimer), true);
+  }
+
+  if (isNegative) {
+    display = `-${display}`;
   }
-  const stageTimerCharacters = stageTimer.replace('/:/g', '').length;
+
+  const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`;
+
+  const stageTimerCharacters = display.replace('/:/g', '').length;
 
   return (
     <div
@@ -175,7 +184,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
             backgroundColor: userOptions.textBackground,
           }}
         >
-          {stageTimer}
+          {display}
         </div>
       )}
     </div>

apps/client/src/features/viewers/timer/Timer.scss

@@ -35,6 +35,7 @@
     grid-area: clock;
     margin-left: auto;
     font-weight: 600;
+    transition: opacity $viewer-transition-time;
 
     .label {
       font-size: clamp(16px, 1.5vw, 24px);
@@ -69,6 +70,7 @@
 
   .timer-container {
     grid-area: timer;
+    font-size: 20vw;
     justify-self: center;
     align-self: center;
     color: var(--timer-color-override, $timer-color);
@@ -84,6 +86,16 @@
 
     .timer {
       opacity: 1;
+      font-family: var(--font-family-override, $viewer-font-family);
+      color: var(--timer-color-override, $timer-color);
+      line-height: 0.9em;
+      text-align: center;
+      letter-spacing: 0.05em;
+      font-weight: 600;
+
+      &--finished {
+      color: $timer-finished-color;
+  }
     }
   }