From 0d8c186c779a65bbd64861af25169e2cfa8865e3 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Thu, 31 Oct 2024 17:31:26 +0100
Subject: [PATCH] feat: add time type none

---
 .../panel/interface-panel/EditorSettingsForm.tsx           | 1 +
 apps/client/src/features/control/message/TimerPreview.tsx  | 7 ++++++-
 .../src/features/rundown/event-block/EventBlockInner.tsx   | 4 ++++
 .../rundown/event-editor/composite/EventEditorTimes.tsx    | 1 +
 apps/client/src/features/viewers/common/viewUtils.ts       | 2 ++
 apps/client/src/features/viewers/timer/Timer.tsx           | 3 ++-
 packages/types/src/definitions/TimerType.type.ts           | 1 +
 7 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx b/apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx
index a32b6ad9d..e865ca67e 100644
--- a/apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx
+++ b/apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx
@@ -90,6 +90,7 @@ export default function EditorSettingsForm() {
                 <option value={TimerType.CountUp}>Count up</option>
                 <option value={TimerType.TimeToEnd}>Time to end</option>
                 <option value={TimerType.Clock}>Clock</option>
+                <option value={TimerType.None}>None</option>
               </Select>
             </Panel.ListItem>
             <Panel.ListItem>
diff --git a/apps/client/src/features/control/message/TimerPreview.tsx b/apps/client/src/features/control/message/TimerPreview.tsx
index 14c33f664..75bf04e04 100644
--- a/apps/client/src/features/control/message/TimerPreview.tsx
+++ b/apps/client/src/features/control/message/TimerPreview.tsx
@@ -1,6 +1,7 @@
 import { Tooltip } from '@chakra-ui/react';
 import { IoArrowDown } from '@react-icons/all-files/io5/IoArrowDown';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoBan } from '@react-icons/all-files/io5/IoBan';
 import { IoFlag } from '@react-icons/all-files/io5/IoFlag';
 import { IoTime } from '@react-icons/all-files/io5/IoTime';
 import { TimerPhase, TimerType } from 'ontime-types';
@@ -8,7 +9,7 @@ import { TimerPhase, TimerType } from 'ontime-types';
 import { useMessagePreview } from '../../../common/hooks/useSocket';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { handleLinks } from '../../../common/utils/linkUtils';
-import { cx } from '../../../common/utils/styleUtils';
+import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import { Corner } from '../../editors/editor-utils/EditorUtils';
 
@@ -26,6 +27,7 @@ export default function TimerPreview() {
     if (phase === TimerPhase.Pending) return 'Standby to start';
     if (phase === TimerPhase.Overtime && data.endMessage) return 'Custom end message';
     if (timerType === TimerType.TimeToEnd) return 'Time to end';
+    if (timerType === TimerType.None) return timerPlaceholder;
     return 'Timer';
   })();
 
@@ -74,6 +76,9 @@ export default function TimerPreview() {
         <Tooltip label='Time type: Time to end' openDelay={tooltipDelayMid} shouldWrapChildren>
           <IoFlag className={style.statusIcon} data-active={timerType === TimerType.TimeToEnd} />
         </Tooltip>
+        <Tooltip label='Time type: None' openDelay={tooltipDelayMid} shouldWrapChildren>
+          <IoBan className={style.statusIcon} data-active={timerType === TimerType.None} />
+        </Tooltip>
       </div>
     </div>
   );
diff --git a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
index 7347d887e..f0e3621ac 100644
--- a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
+++ b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
@@ -2,6 +2,7 @@ import { memo, useEffect, useState } from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import { IoArrowDown } from '@react-icons/all-files/io5/IoArrowDown';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoBan } from '@react-icons/all-files/io5/IoBan';
 import { IoFlag } from '@react-icons/all-files/io5/IoFlag';
 import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
@@ -158,6 +159,9 @@ function TimerIcon(props: { type: TimerType; className: string }) {
   if (type === TimerType.Clock) {
     return <IoTime className={className} />;
   }
+  if (type === TimerType.None) {
+    return <IoBan className={className} />;
+  }
   if (type === TimerType.TimeToEnd) {
     const classes = cx([style.active, className]);
     return <IoFlag className={classes} />;
diff --git a/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx b/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx
index 5d6dd0bfb..5090223aa 100644
--- a/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx
+++ b/apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx
@@ -108,6 +108,7 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
             <option value={TimerType.CountUp}>Count up</option>
             <option value={TimerType.TimeToEnd}>Time to end</option>
             <option value={TimerType.Clock}>Clock</option>
+            <option value={TimerType.None}>None</option>
           </Select>
         </div>
         <div>
diff --git a/apps/client/src/features/viewers/common/viewUtils.ts b/apps/client/src/features/viewers/common/viewUtils.ts
index 44289a254..32158f01c 100644
--- a/apps/client/src/features/viewers/common/viewUtils.ts
+++ b/apps/client/src/features/viewers/common/viewUtils.ts
@@ -23,6 +23,8 @@ export function getTimerByType(freezeEnd: boolean, timerObject?: TimerTypeParams
       return Math.abs(timerObject.elapsed ?? 0);
     case TimerType.Clock:
       return timerObject.clock;
+    case TimerType.None:
+      return null;
     default: {
       const exhaustiveCheck: never = timerObject.timerType;
       return exhaustiveCheck;
diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx
index d970e9837..dd448e648 100644
--- a/apps/client/src/features/viewers/timer/Timer.tsx
+++ b/apps/client/src/features/viewers/timer/Timer.tsx
@@ -160,6 +160,7 @@ export default function Timer(props: TimerProps) {
 
   const defaultFormat = getDefaultFormat(settings?.timeFormat);
   const timerOptions = getTimerOptions(defaultFormat, customFields);
+  const disableProgress = timerIsTimeOfDay || time.timerType === TimerType.None;
 
   return (
     <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
@@ -205,7 +206,7 @@ export default function Timer(props: TimerProps) {
       {!userOptions.hideProgress && (
         <MultiPartProgressBar
           className={isPlaying ? 'progress-container' : 'progress-container progress-container--paused'}
-          now={timerIsTimeOfDay ? null : time.current}
+          now={disableProgress ? null : time.current}
           complete={totalTime}
           normalColor={viewSettings.normalColor}
           warning={eventNow?.timeWarning}
diff --git a/packages/types/src/definitions/TimerType.type.ts b/packages/types/src/definitions/TimerType.type.ts
index eb8022109..e9bae59fb 100644
--- a/packages/types/src/definitions/TimerType.type.ts
+++ b/packages/types/src/definitions/TimerType.type.ts
@@ -3,4 +3,5 @@ export enum TimerType {
   CountUp = 'count-up',
   TimeToEnd = 'time-to-end',
   Clock = 'clock',
+  None = 'none',
 }