feat: add time type none

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>

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>
   );

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} />;

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>

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;

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}

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',
 }