Feat/countdown style

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;

apps/client/src/features/control/playback/PlaybackTimer.tsx

@@ -44,7 +44,7 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
         </Tooltip>
       </div>
       <div className={style.timer}>
-        <TimerDisplay time={isWaiting ? timerData.secondaryTimer : timerData.current} small />
+        <TimerDisplay time={isWaiting ? timerData.secondaryTimer : timerData.current} />
       </div>
       {isWaiting ? (
         <div className={style.roll}>

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,44 @@
+import { TimerType } from 'ontime-types';
+
+import { TimeManagerType } from '../../../common/models/TimeManager.type';
+import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig';
+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) {
+    //todo: fix counting down issue in backend later
+    timer = (timerObject.elapsed ?? 0) < 0 ? 0 : timerObject.elapsed;
+  } else if (timerObject.timerType === TimerType.Clock) {
+    timer = formatTime(timerObject.clock, formatOptions);
+  }
+
+  return timer;
+}
+
+export function formatTimerDisplay(timer?: string | number | null): string {
+  let display = '';
+
+  if (typeof timer === 'string') {
+    display = timer;
+  } else if (timer === null || typeof timer === 'undefined' || isNaN(timer)) {
+    display = '-- : -- : --';
+  } else {
+    display = formatDisplay(millisToSeconds(timer), true);
+  }
+
+  return display;
+}

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

@@ -1,15 +1,15 @@
 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';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 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 { formatTimerDisplay, getTimerByType } from '../common/viewerUtils';
 
 import './MinimalTimer.scss';
 
@@ -128,22 +128,23 @@ 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' : ''}`;
-
-  let stageTimer;
-  if (time.current === null) {
-    stageTimer = '- - : - -';
-  } else {
-    stageTimer = formatDisplay(Math.abs(millisToSeconds(time.current)), true);
-    if (time.current < 0) {
-      stageTimer = `-${stageTimer}`;
-    }
+  const stageTimer = getTimerByType(time);
+  let display = formatTimerDisplay(stageTimer);
+  if (isNegative) {
+    display = `-${display}`;
   }
-  const stageTimerCharacters = stageTimer.replace('/:/g', '').length;
+  const stageTimerCharacters = display.replace('/:/g', '').length;
+
+  const timerFontSize = (89 / (stageTimerCharacters - 1)) * (userOptions.size || 1);
+  const timerClasseNames = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`;
+
+  const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`;
 
   return (
     <div
@@ -165,17 +166,17 @@ export default function MinimalTimer(props: MinimalTimerProps) {
         <div className='end-message'>{general.endMessage}</div>
       ) : (
         <div
-          className={`timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`}
+          className={timerClasseNames}
           style={{
             color: userOptions.textColour,
-            fontSize: `${(89 / (stageTimerCharacters - 1)) * (userOptions.size || 1)}vw`,
+            fontSize: `${timerFontSize}vw`,
             fontFamily: userOptions.font,
             top: userOptions.top,
             left: userOptions.left,
             backgroundColor: userOptions.textBackground,
           }}
         >
-          {stageTimer}
+          {display}
         </div>
       )}
     </div>