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/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,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';
@@ -9,7 +9,7 @@ import NavigationMenu from '../../../common/components/navigation-menu/Navigatio
 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,23 +128,24 @@ 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 stageTimer = getTimerByType(time);
+  let display = formatTimerDisplay(stageTimer);
+  if (isNegative) {
+    display = `-${display}`;
+  }
+  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' : ''}`;
 
-  let stageTimer;
-  if (time.current === null) {
-    stageTimer = '- - : - -';
-  } else {
-    stageTimer = formatDisplay(Math.abs(millisToSeconds(time.current)), true);
-    if (time.current < 0) {
-      stageTimer = `-${stageTimer}`;
-    }
-  }
-  const stageTimerCharacters = stageTimer.replace('/:/g', '').length;
-
   return (
     <div
       className={showFinished ? `${baseClasses} minimal-timer--finished` : baseClasses}
@@ -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>

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);
@@ -47,6 +48,10 @@
       color: var(--secondary-color-override, $viewer-secondary-color);
       letter-spacing: 0.05em;
     }
+
+    &--hidden {
+      opacity: 0;
+    }
   }
 
   /* =================== TITLES ===================*/
@@ -71,7 +76,6 @@
     grid-area: timer;
     justify-self: center;
     align-self: center;
-    color: var(--timer-color-override, $timer-color);
 
     .end-message {
       text-align: center;
@@ -84,6 +88,22 @@
 
     .timer {
       opacity: 1;
+      font-size: 20vw;
+      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;
+
+      &--paused {
+        opacity: $viewer-opacity-disabled;
+        transition: $viewer-transition-time;
+      }
+
+      &--finished {
+        color: $timer-finished-color;
+      }
     }
   }
 
@@ -93,13 +113,12 @@
     margin: 0 auto;
     opacity: 1;
     transition: $viewer-transition-time;
-  }
 
-  .timer--paused,
-  .progress-container--paused {
+  &--paused {
     opacity: $viewer-opacity-disabled;
     transition: $viewer-transition-time;
   }
+}
 
 
   /* =================== OVERLAY ===================*/

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

@@ -1,16 +1,17 @@
 import { useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useAtom } from 'jotai';
+import { TimerType } from 'ontime-types';
 import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import ProgressBar from '../../../common/components/progress-bar/ProgressBar';
-import TimerDisplay from '../../../common/components/timer-display/TimerDisplay';
 import TitleCard from '../../../common/components/title-card/TitleCard';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { formatTime } from '../../../common/utils/time';
+import { formatTimerDisplay, getTimerByType } from '../common/viewerUtils';
 
 import './Timer.scss';
 
@@ -61,29 +62,49 @@ export default function Timer(props) {
   const clock = formatTime(time.clock, formatOptions);
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playback !== 'pause';
-  const normalisedTime = time.current === null ? null : Math.max(time.current, 0);
+  const isNegative =
+    (time.current ?? 0) < 0 && time.timerType !== TimerType.Clock && time.timerType !== TimerType.CountUp;
+
+  const showEndMessage = time.current < 0 && general.endMessage;
   const showProgress = time.playback !== 'stop';
+  const showFinished = time.finished && (time.timerType !== TimerType.Clock || showEndMessage);
+  const showClock = time.timerType !== TimerType.Clock;
   const baseClasses = `stage-timer ${isMirrored ? 'mirror' : ''}`;
 
+  const stageTimer = getTimerByType(time);
+  let display = formatTimerDisplay(stageTimer);
+  const stageTimerCharacters = display.replace('/:/g', '').length;
+  if (isNegative) {
+    display = `-${display}`;
+  }
+
+  const timerFontSize = 100 / stageTimerCharacters;
+  const timerClasseNames = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`;
+
   return (
-    <div className={time.finished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
+    <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
       <NavigationMenu />
       <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
         <div className='message'>{pres.text}</div>
       </div>
 
-      <div className='clock-container'>
+      <div className={`clock-container ${showClock ? '' : 'clock-container--hidden'}`}>
         <div className='label'>Time Now</div>
         <div className='clock'>{clock}</div>
       </div>
 
       <div className='timer-container'>
-        {time.finished ? (
-          <div className='end-message'>
-            {!general.endMessage ? <TimerDisplay time={time.current} hideZeroHours /> : general.endMessage}
-          </div>
+        {showEndMessage ? (
+          <div className='end-message'>{general.endMessage}</div>
         ) : (
-          <TimerDisplay time={normalisedTime} hideZeroHours className={isPlaying ? 'timer' : 'timer--paused'} />
+          <div
+            className={timerClasseNames}
+            style={{
+              fontSize: `${timerFontSize}vw`,
+            }}
+          >
+            {display}
+          </div>
         )}
       </div>