refactor: update timers (#729)

* refactor: remove duplication

* refactor: previous times

* refactor: event patching

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -4,22 +4,18 @@ import { millisToString } from 'ontime-utils';
 
 import { useEmitLog } from '../../../stores/logger';
 import { forgivingStringToMillis } from '../../../utils/dateConfig';
-import { TimeEntryField } from '../../../utils/timesManager';
 
 import style from './TimeInput.module.scss';
-interface TimeInputProps {
-  id?: TimeEntryField;
-  name: TimeEntryField;
-  submitHandler: (field: TimeEntryField, value: number) => void;
+interface TimeInputProps<T extends string> {
+  name: T;
+  submitHandler: (field: T, value: string) => void;
   time?: number;
-  delay?: number;
   placeholder: string;
-  previousEnd?: number;
   className?: string;
 }
 
-export default function TimeInput(props: TimeInputProps) {
-  const { id, name, submitHandler, time = 0, delay = 0, placeholder, previousEnd = 0, className } = props;
+export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
+  const { name, submitHandler, time = 0, placeholder, className } = props;
   const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
@@ -55,32 +51,20 @@ export default function TimeInput(props: TimeInputProps) {
         return false;
       }
 
-      let newValMillis = 0;
-
-      // check for known aliases
-      if (newValue === 'p' || newValue === 'prev' || newValue === 'previous') {
-        // string to pass should be the time of the end before
-        if (previousEnd != null) {
-          newValMillis = previousEnd;
-        }
-      } else if (newValue.startsWith('+') || newValue.startsWith('p+') || newValue.startsWith('p +')) {
-        // string to pass should add to the end before
-        const val = newValue.substring(1);
-        newValMillis = previousEnd + forgivingStringToMillis(val);
-      } else {
-        // convert entered value to milliseconds
-        newValMillis = forgivingStringToMillis(newValue);
+      // we dont know the values in the rundown, escalate to handler
+      if (newValue.startsWith('p') || newValue.startsWith('+')) {
+        submitHandler(name, newValue);
       }
 
-      // check if time is different from before
-      if (newValMillis === time) return false;
-
-      // update entry
-      submitHandler(name, newValMillis);
+      const valueInMillis = forgivingStringToMillis(newValue);
+      if (valueInMillis === time) {
+        return false;
+      }
 
+      submitHandler(name, newValue);
       return true;
     },
-    [name, previousEnd, submitHandler, time],
+    [name, submitHandler, time],
   );
 
   /**
@@ -90,15 +74,11 @@ export default function TimeInput(props: TimeInputProps) {
   const validateAndSubmit = useCallback(
     (newValue: string) => {
       const success = handleSubmit(newValue);
-      if (success) {
-        const ms = forgivingStringToMillis(newValue);
-        const delayed = name === 'timeEnd' ? Math.max(0, ms + delay) : Math.max(0, ms + delay);
-        setValue(millisToString(delayed));
-      } else {
+      if (!success) {
         resetValue();
       }
     },
-    [delay, handleSubmit, name, resetValue],
+    [handleSubmit, resetValue],
   );
 
   /**
@@ -144,7 +124,6 @@ export default function TimeInput(props: TimeInputProps) {
     <Input
       size='sm'
       ref={inputRef}
-      id={id}
       data-testid={`time-input-${name}`}
       className={timeInputClass}
       type='text'

apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss

@@ -1,11 +1,11 @@
 $input-font-size: 15px;
-$input-delayed-border-color: #E69056;
+$input-delayed-border-color: $ontime-delay-text;
 
 .timeInput {
-  width: fit-content !important;
+  width: fit-content;
 
-  .inputLeft {
-    max-width: fit-content;
+  &.delayed {
+    border: 1px solid $input-delayed-border-color;
   }
 
   .inputLeft,
@@ -20,16 +20,7 @@ $input-delayed-border-color: #E69056;
     padding: 0 0 0 2.6em;
   }
 
-  .warn {
-    &::after {
-      content: "*";
-      color: $warning-orange;
-    }
-  }
-
-  &.delayed {
-    .inputField {
-      border: 1px solid $input-delayed-border-color;
-    }
+  .inputButton {
+    border-radius: 2px 0 0 2px;
   }
 }

apps/client/src/common/components/input/time-input/TimeInputWithButton.tsx

@@ -1,83 +1,39 @@
-import { useMemo } from 'react';
 import { Button, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
 
 import { tooltipDelayFast } from '../../../../ontimeConfig';
 import { cx } from '../../../utils/styleUtils';
-import { TimeEntryField } from '../../../utils/timesManager';
 
 import TimeInput from './TimeInput';
 
 import style from './TimeInputWithButton.module.scss';
 
-interface TimeInputProps {
-  id?: TimeEntryField;
-  name: TimeEntryField;
-  submitHandler: (field: TimeEntryField, value: number) => void;
+interface TimeInputWithButtonProps<T extends string> {
+  name: T;
+  submitHandler: (field: T, value: string) => void;
   time?: number;
-  delay?: number;
+  hasDelay?: boolean;
   placeholder: string;
-  previousEnd?: number;
-  warning?: string;
 }
 
-function ButtonInitial(name: TimeEntryField) {
-  if (name === 'timeStart') return 'S';
-  if (name === 'timeEnd') return 'E';
-  if (name === 'durationOverride') return 'D';
-  if (name === 'timeWarning') return 'Wa';
-  if (name === 'timeDanger') return 'Da';
-  return '';
-}
+export default function TimeInputWithButton<T extends string>(props: TimeInputWithButtonProps<T>) {
+  const { name, submitHandler, time, hasDelay, placeholder } = props;
 
-function ButtonTooltip(name: TimeEntryField, warning?: string) {
-  if (name === 'timeStart') return `Start${warning ? `: ${warning}` : ''}`;
-  if (name === 'timeEnd') return `End${warning ? `: ${warning}` : ''}`;
-  if (name === 'durationOverride') return `Duration${warning ? `: ${warning}` : ''}`;
-  if (name === 'timeWarning') return `Warning${warning ? `: ${warning}` : ''}`;
-  if (name === 'timeDanger') return `Danger${warning ? `: ${warning}` : ''}`;
-  return '';
-}
-
-export default function TimeInputWithButton(props: TimeInputProps) {
-  const { id, name, submitHandler, time = 0, delay = 0, placeholder, previousEnd = 0, warning } = props;
-
-  const isDelayed = delay !== 0;
-  const inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
-  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null, warning ? style.warn : null]);
-
-  const TooltipLabel = useMemo(() => {
-    return ButtonTooltip(name, warning);
-  }, [name, warning]);
-
-  const ButtonText = useMemo(() => {
-    return ButtonInitial(name);
-  }, [name]);
+  const inputClasses = cx([style.timeInput, hasDelay ? style.delayed : null]);
 
   return (
     <InputGroup size='sm' className={inputClasses}>
       <InputLeftElement className={style.inputLeft}>
-        <Tooltip label={TooltipLabel} openDelay={tooltipDelayFast} variant='ontime-ondark'>
-          <Button
-            size='sm'
-            variant='ontime-subtle-white'
-            className={buttonClasses}
-            tabIndex={-1}
-            border={isDelayed ? '1px solid #E69056' : '1px solid transparent'}
-            borderRight='1px solid transparent'
-            borderRadius='2px 0 0 2px'
-          >
-            {ButtonText}
+        <Tooltip label={placeholder} openDelay={tooltipDelayFast} variant='ontime-ondark'>
+          <Button size='sm' variant='ontime-subtle-white' className={style.inputButton} tabIndex={-1}>
+            {placeholder.charAt(0)}
           </Button>
         </Tooltip>
       </InputLeftElement>
-      <TimeInput
-        id={id}
+      <TimeInput<T>
         name={name}
         submitHandler={submitHandler}
         time={time}
-        delay={delay}
         placeholder={placeholder}
-        previousEnd={previousEnd}
         className={style.inputField}
       />
     </InputGroup>

apps/client/src/common/components/navigation-menu/rename-client-modal/RenameClientModal.tsx

@@ -30,7 +30,7 @@ export default function RenameClientModal({ isOpen, onClose }: RenameClientModal
 
   const handleRename = async () => {
     if (newName) {
-      await setClientName(newName);
+      setClientName(newName);
       persistName(newName);
       onClose();
     }

apps/client/src/common/hooks/useEventAction.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { GetRundownCached, isOntimeEvent, OntimeRundownEntry } from 'ontime-types';
-import { getCueCandidate, swapOntimeEvents } from 'ontime-utils';
+import { getPreviousEvent, swapOntimeEvents } from 'ontime-utils';
 
 import { RUNDOWN } from '../api/apiConstants';
 import { logAxiosError } from '../api/apiUtils';
@@ -18,6 +18,7 @@ import {
   SwapEntry,
 } from '../api/eventsApi';
 import { useEditorSettings } from '../stores/editorSettings';
+import { forgivingStringToMillis } from '../utils/dateConfig';
 
 /**
  * @description Set of utilities for events
@@ -70,19 +71,9 @@ export const useEventAction = () => {
 
         const rundown = queryClient.getQueryData<GetRundownCached>(RUNDOWN)?.rundown ?? [];
 
-        if (newEvent?.cue === undefined) {
-          newEvent.cue = getCueCandidate(rundown, options?.after);
-        }
-
-        // hard coding duration value to be as expected for now
-        // this until timeOptions gets implemented
-        if (newEvent?.timeStart !== undefined && newEvent.timeEnd !== undefined) {
-          newEvent.duration = Math.max(0, newEvent?.timeEnd - newEvent?.timeStart) || 0;
-        }
-
         if (applicationOptions.startTimeIsLastEnd && applicationOptions?.lastEventId) {
           const previousEvent = rundown.find((event) => event.id === applicationOptions.lastEventId);
-          if (previousEvent !== undefined && previousEvent.type === 'event') {
+          if (isOntimeEvent(previousEvent)) {
             newEvent.timeStart = previousEvent.timeEnd;
             newEvent.timeEnd = previousEvent.timeEnd;
           }
@@ -120,7 +111,6 @@ export const useEventAction = () => {
       await queryClient.cancelQueries({ queryKey: RUNDOWN });
 
       // Snapshot the previous value
-
       const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);
 
       if (previousData) {
@@ -164,6 +154,50 @@ export const useEventAction = () => {
     [_updateEventMutation],
   );
 
+  type TimeField = 'timeStart' | 'timeEnd' | 'duration';
+  /**
+   * Updates time of existing event
+   */
+  const updateTimer = useCallback(
+    async (eventId: string, field: TimeField, value: string) => {
+      const getPreviousEnd = (): number => {
+        const rundown = queryClient.getQueryData<GetRundownCached>(RUNDOWN)?.rundown ?? [];
+        if (rundown) {
+          const { previousEvent } = getPreviousEvent(rundown, eventId);
+          if (previousEvent) {
+            return previousEvent.timeEnd;
+          }
+        }
+        return 0;
+      };
+
+      let newValMillis = 0;
+
+      // check for previous keyword
+      if (value === 'p' || value === 'prev' || value === 'previous') {
+        newValMillis = getPreviousEnd();
+
+        // check for adding time keyword
+      } else if (value.startsWith('+') || value.startsWith('p+') || value.startsWith('p +')) {
+        const remainingString = value.substring(1);
+        newValMillis = getPreviousEnd() + forgivingStringToMillis(remainingString);
+      } else {
+        newValMillis = forgivingStringToMillis(value);
+      }
+
+      const newEvent = {
+        id: eventId,
+        [field]: newValMillis,
+      };
+      try {
+        await _updateEventMutation.mutateAsync(newEvent);
+      } catch (error) {
+        logAxiosError('Error updating event', error);
+      }
+    },
+    [_updateEventMutation, queryClient],
+  );
+
   /**
    * Calls mutation to edit multiple events
    * @private
@@ -392,9 +426,9 @@ export const useEventAction = () => {
     async (eventId: string, from: number, to: number) => {
       try {
         const reorderObject: ReorderEntry = {
-          eventId: eventId,
-          from: from,
-          to: to,
+          eventId,
+          from,
+          to,
         };
         await _reorderEventMutation.mutateAsync(reorderObject);
       } catch (error) {
@@ -461,12 +495,13 @@ export const useEventAction = () => {
 
   return {
     addEvent,
-    updateEvent,
+    applyDelay,
+    batchUpdateEvents,
     deleteEvent,
     deleteAllEvents,
-    applyDelay,
     reorderEvent,
     swapEvents,
-    batchUpdateEvents,
+    updateEvent,
+    updateTimer,
   };
 };

apps/client/src/common/utils/eventsManager.ts

@@ -8,13 +8,12 @@ import { OntimeEvent, SupportedEvent } from 'ontime-types';
  */
 type ClonedEvent = Omit<
   OntimeEvent,
-  'id' | 'user0' | 'user1' | 'user2' | 'user3' | 'user4' | 'user5' | 'user6' | 'user7' | 'user8' | 'user9'
+  'id' | 'cue' | 'user0' | 'user1' | 'user2' | 'user3' | 'user4' | 'user5' | 'user6' | 'user7' | 'user8' | 'user9'
 >;
 export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
   return {
     type: SupportedEvent.Event,
     title: event.title,
-    cue: event.cue,
     subtitle: event.subtitle,
     presenter: event.presenter,
     note: event.note,
@@ -26,7 +25,7 @@ export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
     isPublic: event.isPublic,
     skip: event.skip,
     colour: event.colour,
-    after: after,
+    after,
     revision: 0,
     timeWarning: event.timeWarning,
     timeDanger: event.timeDanger,

apps/client/src/common/utils/timesManager.ts

@@ -1,44 +0,0 @@
-export type TimeEntryField = 'timeStart' | 'timeEnd' | 'durationOverride' | 'timeWarning' | 'timeDanger';
-
-/**
- * @description Checks which field the value relates to
- */
-export const handleTimeEntry = (
-  field: TimeEntryField,
-  val: number,
-  timeStart: number,
-  timeEnd: number,
-): { start: number; end: number; durationOverride: boolean } => {
-  let start = timeStart;
-  let end = timeEnd;
-  let durationOverride = false;
-
-  if (field === 'timeStart') {
-    start = val;
-  } else if (field === 'timeEnd') {
-    end = val;
-  } else {
-    durationOverride = field === 'durationOverride';
-  }
-  return { start, end, durationOverride };
-};
-
-/**
- * @description Validates time entry
- */
-export const validateEntry = (
-  field: TimeEntryField,
-  value: number,
-  timeStart: number,
-  timeEnd: number,
-): { value: boolean; warnings: { start?: string; end?: string; duration?: string } } => {
-  const validate = { value: true, warnings: { start: '', end: '', duration: '' } };
-
-  const { start, end } = handleTimeEntry(field, value, timeStart, timeEnd);
-
-  if (end < start) {
-    validate.warnings.start = 'Start time later than end time';
-  }
-
-  return validate;
-};

apps/client/src/features/rundown/Rundown.module.scss

@@ -2,7 +2,6 @@
   height: calc(100% - 1.5rem);
   overflow: hidden;
   padding-top: 0.5rem;
-  flex: 1;
 }
 
 .eventContainer {

apps/client/src/features/rundown/Rundown.tsx

@@ -1,7 +1,7 @@
 import { Fragment, lazy, useCallback, useEffect, useRef, useState } from 'react';
 import { closestCenter, DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { OntimeRundown, Playback, SupportedEvent } from 'ontime-types';
+import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, Playback, SupportedEvent } from 'ontime-types';
 import { getFirst, getNext, getPrevious } from 'ontime-utils';
 
 import { useEventAction } from '../../common/hooks/useEventAction';
@@ -38,7 +38,7 @@ export default function Rundown(props: RundownProps) {
   const viewFollowsCursor = appMode === AppMode.Run;
   const cursorRef = useRef<HTMLDivElement | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
-  useFollowComponent({ followRef: cursorRef, scrollRef: scrollRef, doFollow: true });
+  useFollowComponent({ followRef: cursorRef, scrollRef, doFollow: true });
 
   // DND KIT
   const sensors = useSensors(useSensor(PointerSensor));
@@ -66,8 +66,8 @@ export default function Rundown(props: RundownProps) {
           type: SupportedEvent.Event,
         };
         const options = {
-          defaultPublic: defaultPublic,
-          startTimeIsLastEnd: startTimeIsLastEnd,
+          defaultPublic,
+          startTimeIsLastEnd,
           lastEventId: cursor,
           after: cursor,
         };
@@ -197,7 +197,7 @@ export default function Rundown(props: RundownProps) {
     return <RundownEmpty handleAddNew={() => insertAtCursor(SupportedEvent.Event, null)} />;
   }
 
-  let previousEnd = 0;
+  let previousEnd: null | number = null;
   let thisEnd = 0;
   let previousEventId: string | undefined;
   let eventIndex = 0;
@@ -213,10 +213,13 @@ export default function Rundown(props: RundownProps) {
                 eventIndex = 0;
               }
               let isFirstEvent = false;
-              if (entry.type === SupportedEvent.Event) {
+              if (isOntimeEvent(entry)) {
                 isFirstEvent = eventIndex === 0;
+                // event indexes are 1 based in frontend
                 eventIndex++;
-                previousEnd = thisEnd;
+                if (!isFirstEvent) {
+                  previousEnd = thisEnd;
+                }
                 thisEnd = entry.timeEnd;
                 previousEventId = entry.id;
               }
@@ -236,7 +239,6 @@ export default function Rundown(props: RundownProps) {
                       <RundownEntry
                         type={entry.type}
                         isPast={isPast}
-                        isFirstEvent={isFirstEvent}
                         eventIndex={eventIndex}
                         data={entry}
                         selected={isSelected}
@@ -255,8 +257,8 @@ export default function Rundown(props: RundownProps) {
                       showKbd={hasCursor}
                       eventId={entry.id}
                       previousEventId={previousEventId}
-                      disableAddDelay={entry.type === SupportedEvent.Delay}
-                      disableAddBlock={entry.type === SupportedEvent.Block}
+                      disableAddDelay={isOntimeDelay(entry)}
+                      disableAddBlock={isOntimeBlock(entry)}
                     />
                   )}
                 </Fragment>

apps/client/src/features/rundown/RundownEntry.tsx

@@ -2,12 +2,12 @@ import { useCallback } from 'react';
 import {
   GetRundownCached,
   isOntimeEvent,
+  MaybeNumber,
   OntimeEvent,
   OntimeRundownEntry,
   Playback,
   SupportedEvent,
 } from 'ontime-types';
-import { calculateDuration, getCueCandidate } from 'ontime-utils';
 
 import { RUNDOWN } from '../../common/api/apiConstants';
 import { useEventAction } from '../../common/hooks/useEventAction';
@@ -28,17 +28,16 @@ export type EventItemActions = 'set-cursor' | 'event' | 'delay' | 'block' | 'del
 interface RundownEntryProps {
   type: SupportedEvent;
   isPast: boolean;
-  isFirstEvent: boolean;
   data: OntimeRundownEntry;
   selected: boolean;
   eventIndex: number;
   hasCursor: boolean;
   next: boolean;
-  previousEnd: number;
+  previousEnd: MaybeNumber;
   previousEventId?: string;
   playback?: Playback; // we only care about this if this event is playing
   isRolling: boolean; // we need to know even if not related to this event
-  disableEdit: boolean; // we disable edit when the window is extracted
+  disableEdit: boolean;
 }
 
 export default function RundownEntry(props: RundownEntryProps) {
@@ -53,7 +52,6 @@ export default function RundownEntry(props: RundownEntryProps) {
     playback,
     isRolling,
     disableEdit,
-    isFirstEvent,
     eventIndex,
   } = props;
   const { emitError } = useEmitLog();
@@ -111,9 +109,7 @@ export default function RundownEntry(props: RundownEntryProps) {
       }
       case 'clone': {
         const newEvent = cloneEvent(data as OntimeEvent, data.id);
-        const rundown = ontimeQueryClient.getQueryData<GetRundownCached>(RUNDOWN)?.rundown ?? [];
-        newEvent.cue = getCueCandidate(rundown, data.id);
-        addEvent(newEvent);
+        addEvent(newEvent, { after: data.id });
         break;
       }
       case 'update': {
@@ -139,26 +135,6 @@ export default function RundownEntry(props: RundownEntryProps) {
           batchUpdateEvents(changes, eventIds);
           return clearSelectedEvents();
         }
-
-        if (field === 'durationOverride' && data.type === SupportedEvent.Event) {
-          // duration defines timeEnd
-          newData.duration = value as number;
-          newData.timeEnd = data.timeStart + (value as number);
-          return updateEvent(newData);
-        }
-
-        if (field === 'timeStart' && data.type === SupportedEvent.Event) {
-          newData.duration = calculateDuration(value as number, data.timeEnd);
-          newData.timeStart = value as number;
-          return updateEvent(newData);
-        }
-
-        if (field === 'timeEnd' && data.type === SupportedEvent.Event) {
-          newData.duration = calculateDuration(data.timeStart, value as number);
-          newData.timeEnd = value as number;
-          return updateEvent(newData);
-        }
-
         if (field in data) {
           // @ts-expect-error not sure how to type this
           newData[field] = value;
@@ -186,7 +162,7 @@ export default function RundownEntry(props: RundownEntryProps) {
         timerType={data.timerType}
         title={data.title}
         note={data.note}
-        delay={data.delay || 0}
+        delay={data.delay ?? 0}
         previousEnd={previousEnd}
         colour={data.colour}
         isPast={isPast}
@@ -198,7 +174,6 @@ export default function RundownEntry(props: RundownEntryProps) {
         isRolling={isRolling}
         actionHandler={actionHandler}
         disableEdit={disableEdit}
-        isFirstEvent={isFirstEvent}
       />
     );
   } else if (data.type === SupportedEvent.Block) {

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -10,7 +10,7 @@ $skip-opacity: 0.1;
   grid-template-areas:
     'binder ...        ...     ...'
     'binder pb-actions times   actions'
-    'binder pb-actions title   next-ind'
+    'binder pb-actions title   next'
     'binder pb-actions estatus estatus'
     'binder ...        ...     ...';
 
@@ -53,7 +53,7 @@ $skip-opacity: 0.1;
 
   /* we stop the eventActions from having opacity to fix issue with dropdown drawing order */
   &.past:not(.skip) {
-    .delayNote,
+    .timerNote,
     .statusElements,
     .eventTitle,
     .eventNote,
@@ -68,7 +68,7 @@ $skip-opacity: 0.1;
   &.skip {
     border: 1px solid $white-3;
 
-    .delayNote,
+    .timerNote,
     .eventTitle,
     .eventNote,
     .binder,
@@ -127,10 +127,12 @@ $skip-opacity: 0.1;
   gap: $block-clearance;
   height: 100%;
 
-  .delayNote {
-    font-size: 0.75rem;
-    line-height: 0.8rem;
-    color: $ontime-delay-text;
+  .timerNote {
+    display: grid;
+    place-content: center;
+    color: $blue-500;
+    margin-right: 0.5em;
+    font-size: 1.5em;
   }
 }
 
@@ -189,7 +191,7 @@ $skip-opacity: 0.1;
 }
 
 .nextTag {
-  grid-area: next-ind;
+  grid-area: next;
   font-size: 1rem;
   color: $orange-500;
   letter-spacing: 0.03px;
@@ -197,31 +199,6 @@ $skip-opacity: 0.1;
   text-align: right;
 }
 
-.indicators {
-  grid-area: next-ind;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 0.5rem;
-
-  .indicator {
-    background-color: transparent;
-    margin: 0.4rem;
-    margin-right: 0;
-    border-radius: 0.7rem;
-    width: 0.7rem;
-    height: 0.7rem;
-  }
-  .indicator.delay {
-    background-color: $ontime-delay;
-  }
-  .indicator.nextDay,
-  .indicator.overlap,
-  .indicator.spacing {
-    background-color: $gray-600;
-  }
-}
-
 .eventStatus {
   grid-area: status;
   display: flex;

apps/client/src/features/rundown/event-block/EventBlock.tsx

@@ -7,7 +7,7 @@ import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
 import { IoPeopleOutline } from '@react-icons/all-files/io5/IoPeopleOutline';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
 import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
-import { EndAction, OntimeEvent, Playback, TimerType } from 'ontime-types';
+import { EndAction, MaybeNumber, OntimeEvent, Playback, TimerType } from 'ontime-types';
 
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import useRundown from '../../../common/hooks-query/useRundown';
@@ -19,6 +19,7 @@ import { useEventIdSwapping } from '../useEventIdSwapping';
 import { EditMode, useEventSelection } from '../useEventSelection';
 
 import EventBlockInner from './EventBlockInner';
+import RundownIndicators from './RundownIndicators';
 
 import style from './EventBlock.module.scss';
 
@@ -47,7 +48,7 @@ interface EventBlockProps {
   title: string;
   note: string;
   delay: number;
-  previousEnd: number;
+  previousEnd: MaybeNumber;
   colour: string;
   isPast: boolean;
   next: boolean;
@@ -66,7 +67,6 @@ interface EventBlockProps {
         },
   ) => void;
   disableEdit: boolean;
-  isFirstEvent: boolean;
 }
 
 export default function EventBlock(props: EventBlockProps) {
@@ -94,7 +94,6 @@ export default function EventBlock(props: EventBlockProps) {
     isRolling,
     actionHandler,
     disableEdit,
-    isFirstEvent,
   } = props;
   const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
   const { selectedEvents, setSelectedEvents } = useEventSelection();
@@ -253,12 +252,15 @@ export default function EventBlock(props: EventBlockProps) {
       onContextMenu={onContextMenu}
       id='event-block'
     >
+      <RundownIndicators timeStart={timeStart} previousEnd={previousEnd} delay={delay} />
+
       <div className={style.binder} style={{ ...binderColours }} tabIndex={-1}>
         <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
           <IoReorderTwo />
         </span>
         <span className={style.cue}>{cue}</span>
       </div>
+
       {isVisible && (
         <EventBlockInner
           timeStart={timeStart}
@@ -272,7 +274,6 @@ export default function EventBlock(props: EventBlockProps) {
           title={title}
           note={note}
           delay={delay}
-          previousEnd={previousEnd}
           next={next}
           skip={skip}
           selected={selected}
@@ -280,7 +281,6 @@ export default function EventBlock(props: EventBlockProps) {
           isRolling={isRolling}
           actionHandler={actionHandler}
           disableEdit={disableEdit}
-          isFirstEvent={isFirstEvent}
         />
       )}
     </div>

apps/client/src/features/rundown/event-block/EventBlockInner.tsx

@@ -11,10 +11,8 @@ import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward'
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { IoTime } from '@react-icons/all-files/io5/IoTime';
 import { EndAction, Playback, TimerType } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
 
 import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
-import { millisToDelayString } from '../../../common/utils/dateConfig';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import EditableBlockTitle from '../common/EditableBlockTitle';
 import { EventItemActions } from '../RundownEntry';
@@ -47,7 +45,6 @@ interface EventBlockInnerProps {
   title: string;
   note: string;
   delay: number;
-  previousEnd: number;
   next: boolean;
   skip: boolean;
   selected: boolean;
@@ -55,7 +52,6 @@ interface EventBlockInnerProps {
   isRolling: boolean;
   actionHandler: (action: EventItemActions, payload?: any) => void;
   disableEdit: boolean;
-  isFirstEvent: boolean;
 }
 
 const EventBlockInner = (props: EventBlockInnerProps) => {
@@ -70,7 +66,6 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
     title,
     note,
     delay,
-    previousEnd,
     next,
     skip = false,
     selected,
@@ -78,7 +73,6 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
     isRolling,
     actionHandler,
     disableEdit,
-    isFirstEvent,
   } = props;
 
   const [renderInner, setRenderInner] = useState(false);
@@ -111,59 +105,14 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
     playBtnStyles._hover = {};
   }
 
-  const delayedStart = Math.max(0, timeStart + delay);
-  const newTime = millisToString(delayedStart);
-  const delayTime = delay !== 0 ? millisToDelayString(delay) : null;
-
-  const overlap = previousEnd - timeStart;
-  const overlapTime = !isFirstEvent
-    ? overlap > 0
-      ? `Overlapping ${millisToDelayString(overlap)}`
-      : overlap < 0
-      ? `Spacing ${millisToDelayString(overlap)}`
-      : null
-    : null;
-
   return !renderInner ? null : (
     <>
-      <EventBlockTimers
-        eventId={eventId}
-        timeStart={timeStart}
-        timeEnd={timeEnd}
-        duration={duration}
-        delay={delay}
-        previousEnd={previousEnd}
-      />
+      <EventBlockTimers eventId={eventId} timeStart={timeStart} timeEnd={timeEnd} duration={duration} delay={delay} />
       <EditableBlockTitle title={title} eventId={eventId} placeholder='Event title' className={style.eventTitle} />
-      {next ? (
+      {next && (
         <Tooltip label='Next event' {...tooltipProps}>
           <span className={style.nextTag}>UP NEXT</span>
         </Tooltip>
-      ) : (
-        <span className={style.indicators}>
-          {delayTime && (
-            <Tooltip
-              label={
-                <div>
-                  {delayTime} <br />
-                  New Time: {newTime}
-                </div>
-              }
-            >
-              <div className={`${style.indicator} ${style.delay}`} />
-            </Tooltip>
-          )}
-          {overlapTime && (
-            <Tooltip label={overlapTime}>
-              <div className={`${style.indicator} ${overlap > 0 ? style.overlap : style.spacing}`} />
-            </Tooltip>
-          )}
-          {timeStart > timeEnd && (
-            <Tooltip label='Start time is later than end'>
-              <div className={`${style.indicator} ${style.nextDay}`} />
-            </Tooltip>
-          )}
-        </span>
       )}
       <EventBlockPlayback
         eventId={eventId}

apps/client/src/features/rundown/event-block/RundownIndicators.module.scss

@@ -0,0 +1,25 @@
+.indicators {
+  font-size: calc(1rem - 5px);
+  position: absolute;
+  top: -1em;
+  z-index: 2;
+  margin: 0 20%;
+  width: 60%;
+
+  display: flex;
+  gap: 0.5rem;
+}
+
+@mixin indicator($bg-colour) {
+  padding: 0 0.5rem;
+  border-radius: 2px;
+  background-color: $bg-colour;
+}
+
+.delay {
+  @include indicator($ontime-delay);
+}
+
+.gap {
+  @include indicator($blue-500);
+}

apps/client/src/features/rundown/event-block/RundownIndicators.tsx

@@ -0,0 +1,42 @@
+import { millisToString, removeLeadingZero, removeTrailingZero } from 'ontime-utils';
+
+import style from './RundownIndicators.module.scss';
+
+interface RundownIndicatorProps {
+  timeStart: number;
+  previousEnd: number | null;
+  delay: number;
+}
+
+function formatDelay(timeStart: number, delay: number): string | undefined {
+  if (!delay) return;
+
+  const delayedStart = Math.max(0, timeStart + delay);
+  const timeTag = removeTrailingZero(millisToString(delayedStart));
+  return `New start: ${timeTag}`;
+}
+
+function formatOverlap(previousEnd: number | null, timeStart: number): string | undefined {
+  if (previousEnd === null) return;
+
+  const overlap = previousEnd - timeStart;
+  if (overlap === 0) return;
+
+  const overlapString = removeLeadingZero(millisToString(Math.abs(overlap)));
+
+  return `${overlap > 0 ? 'Overlap' : 'Gap'}: ${overlapString}`;
+}
+
+export default function RundownIndicators(props: RundownIndicatorProps) {
+  const { timeStart, previousEnd, delay } = props;
+
+  const hasOverlap = formatOverlap(previousEnd, timeStart);
+  const hasDelay = formatDelay(timeStart, delay);
+
+  return (
+    <div className={style.indicators}>
+      {hasDelay && <div className={style.delay}>{hasDelay}</div>}
+      {hasOverlap && <div className={style.gap}>{hasOverlap}</div>}
+    </div>
+  );
+}

apps/client/src/features/rundown/event-block/composite/EventBlockTimers.tsx

@@ -1,10 +1,12 @@
 import { memo } from 'react';
+import { Tooltip } from '@chakra-ui/react';
+import { IoAlertCircleOutline } from '@react-icons/all-files/io5/IoAlertCircleOutline';
 import { OntimeEvent } from 'ontime-types';
-import { calculateDuration, millisToString } from 'ontime-utils';
 
 import TimeInputWithButton from '../../../../common/components/input/time-input/TimeInputWithButton';
 import { useEventAction } from '../../../../common/hooks/useEventAction';
-import { millisToDelayString } from '../../../../common/utils/dateConfig';
+import { forgivingStringToMillis } from '../../../../common/utils/dateConfig';
+import { tooltipDelayFast } from '../../../../ontimeConfig';
 
 import style from '../EventBlock.module.scss';
 
@@ -14,73 +16,64 @@ interface EventBlockTimerProps {
   timeEnd: number;
   duration: number;
   delay: number;
-  previousEnd: number;
 }
 
-type TimeActions = 'timeStart' | 'timeEnd' | 'durationOverride' | 'timeWarning' | 'timeDanger';
+type TimeActions = 'timeStart' | 'timeEnd' | 'durationOverride'; // we call it durationOverride to stop from passing as a duration value
 
 const EventBlockTimers = (props: EventBlockTimerProps) => {
-  const { eventId, timeStart, timeEnd, duration, delay, previousEnd } = props;
-  const { updateEvent } = useEventAction();
+  const { eventId, timeStart, timeEnd, duration, delay } = props;
+  const { updateEvent, updateTimer } = useEventAction();
 
-  const handleSubmit = (field: TimeActions, value: number) => {
-    const newEventData: Partial<OntimeEvent> = { id: eventId };
-    switch (field) {
-      case 'durationOverride': {
-        // duration defines timeEnd
-        newEventData.duration = value;
-        newEventData.timeEnd = timeStart + value;
-        break;
-      }
-      case 'timeStart': {
-        newEventData.duration = calculateDuration(value, timeEnd);
-        newEventData.timeStart = value;
-        break;
-      }
-      case 'timeEnd': {
-        newEventData.duration = calculateDuration(timeStart, value);
-        newEventData.timeEnd = value;
-        break;
-      }
+  // In sync with EventEditorTimes
+  const handleSubmit = (field: TimeActions, value: string) => {
+    if (field === 'timeStart' || field === 'timeEnd') {
+      updateTimer(eventId, field, value);
+      return;
+    }
+
+    if (field === 'durationOverride') {
+      const timeInMillis = forgivingStringToMillis(value);
+      const newEventData: Partial<OntimeEvent> = { id: eventId, timeEnd: timeStart + timeInMillis };
+      updateEvent(newEventData);
+      return;
     }
-    updateEvent(newEventData);
   };
 
-  const delayedStart = Math.max(0, timeStart + delay);
-  const newTime = millisToString(delayedStart);
-  const delayTime = delay !== 0 ? millisToDelayString(delay) : null;
+  const overMidnight = timeStart > timeEnd;
+  const hasDelay = delay !== 0;
 
   return (
     <div className={style.eventTimers}>
-      <TimeInputWithButton
+      <TimeInputWithButton<TimeActions>
         name='timeStart'
         submitHandler={handleSubmit}
         time={timeStart}
-        delay={delay}
+        hasDelay={hasDelay}
         placeholder='Start'
-        previousEnd={previousEnd}
       />
-      <TimeInputWithButton
+      <TimeInputWithButton<TimeActions>
         name='timeEnd'
         submitHandler={handleSubmit}
         time={timeEnd}
-        delay={delay}
+        hasDelay={hasDelay}
         placeholder='End'
-        previousEnd={previousEnd}
       />
-      <TimeInputWithButton
+      <TimeInputWithButton<TimeActions>
         name='durationOverride'
         submitHandler={handleSubmit}
         time={duration}
-        delay={0}
         placeholder='Duration'
-        previousEnd={previousEnd}
       />
-      {delayTime && (
-        <div className={style.delayNote}>
-          {delayTime}
-          <br />
-          {`New start: ${newTime}`}
+      {overMidnight && (
+        <div className={style.timerNote}>
+          <Tooltip
+            label='End timer before start'
+            openDelay={tooltipDelayFast}
+            variant='ontime-ondark'
+            shouldWrapChildren
+          >
+            <IoAlertCircleOutline />
+          </Tooltip>
         </div>
       )}
     </div>

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

@@ -61,7 +61,7 @@ export default function EventEditor() {
   );
 
   if (!event) {
-    return <span>Loading...</span>;
+    return <span data-testid='editor-container'>Loading...</span>;
   }
 
   // Compositing user fields by hand
@@ -80,7 +80,7 @@ export default function EventEditor() {
   };
 
   return (
-    <div className={style.eventEditor}>
+    <div className={style.eventEditor} data-testid='editor-container'>
       <div>HEADER ACTIONS?</div>
       <div className={style.content}>
         <EventEditorTimes

apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx

@@ -1,12 +1,12 @@
 import { memo } from 'react';
 import { Select, Switch } from '@chakra-ui/react';
 import { EndAction, OntimeEvent, TimerType } from 'ontime-types';
-import { calculateDuration, millisToString } from 'ontime-utils';
+import { millisToString } from 'ontime-utils';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
 import TimeInputWithButton from '../../../../common/components/input/time-input/TimeInputWithButton';
 import { useEventAction } from '../../../../common/hooks/useEventAction';
-import { millisToDelayString } from '../../../../common/utils/dateConfig';
+import { forgivingStringToMillis, millisToDelayString } from '../../../../common/utils/dateConfig';
 import { cx } from '../../../../common/utils/styleUtils';
 
 import style from '../EventEditor.module.scss';
@@ -24,60 +24,52 @@ interface EventEditorTimesProps {
   timeDanger: number;
 }
 
-type TimeActions =
-  | 'timeStart'
-  | 'timeEnd'
-  | 'durationOverride'
-  | 'timerType'
-  | 'endAction'
-  | 'isPublic'
-  | 'timeWarning'
-  | 'timeDanger';
+type HandledActions = 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';
+type TimeActions = 'timeStart' | 'timeEnd' | 'durationOverride'; // we call it durationOverride to stop from passing as a duration value
 
 const EventEditorTimes = (props: EventEditorTimesProps) => {
   const { eventId, timeStart, timeEnd, duration, delay, isPublic, endAction, timerType, timeWarning, timeDanger } =
     props;
-  const { updateEvent } = useEventAction();
+  const { updateEvent, updateTimer } = useEventAction();
 
-  const handleSubmit = (field: TimeActions, value: number | string | boolean) => {
-    const newEventData: Partial<OntimeEvent> = { id: eventId };
-    switch (field) {
-      case 'durationOverride': {
-        // duration defines timeEnd
-        newEventData.duration = value as number;
-        newEventData.timeEnd = timeStart + (value as number);
-        break;
-      }
-      case 'timeStart': {
-        newEventData.duration = calculateDuration(value as number, timeEnd);
-        newEventData.timeStart = value as number;
-        break;
-      }
-      case 'timeEnd': {
-        newEventData.duration = calculateDuration(timeStart, value as number);
-        newEventData.timeEnd = value as number;
-        break;
-      }
-      case 'isPublic': {
-        updateEvent({ id: eventId, isPublic: !(value as boolean) });
-        break;
-      }
-      default: {
-        if (field === 'timerType' || field === 'endAction' || field === 'timeWarning' || field === 'timeDanger') {
-          // @ts-expect-error -- not sure how to typecheck here
-          newEventData[field as keyof OntimeEvent] = value as string;
-        } else {
-          return;
-        }
-      }
+  // In sync with EventBlockTimers
+  const handleTimeSubmit = (field: TimeActions, value: string) => {
+    if (field === 'timeStart' || field === 'timeEnd') {
+      updateTimer(eventId, field, value);
+      return;
+    }
+
+    if (field === 'durationOverride') {
+      const timeInMillis = forgivingStringToMillis(value);
+      const newEventData: Partial<OntimeEvent> = { id: eventId, timeEnd: timeStart + timeInMillis };
+      updateEvent(newEventData);
+      return;
     }
-    updateEvent(newEventData);
   };
 
-  const delayTime = delay !== 0 ? millisToDelayString(delay) : null;
-  const startLabel = delayTime ? `New start ${millisToString(timeStart + delay)}` : 'Start time';
-  const endLabel = delayTime ? `New end ${millisToString(timeEnd + delay)}` : 'End time';
-  const inputTimeLabels = cx([style.inputLabel, delayTime ? style.delayLabel : null]);
+  const handleSubmit = (field: HandledActions, value: string | boolean) => {
+    if (field === 'isPublic') {
+      updateEvent({ id: eventId, isPublic: !(value as boolean) });
+      return;
+    }
+
+    if (field === 'timeWarning' || field === 'timeDanger') {
+      const newTime = forgivingStringToMillis(value as string);
+      updateEvent({ id: eventId, [field]: newTime });
+      return;
+    }
+
+    if (field === 'timerType' || field === 'endAction') {
+      updateEvent({ id: eventId, [field]: value });
+      return;
+    }
+  };
+
+  const hasDelay = delay !== 0;
+  const delayTime = hasDelay ? millisToDelayString(delay) : null;
+  const startLabel = delayTime ? `New Start ${millisToString(timeStart + delay)}` : 'Start time';
+  const endLabel = delayTime ? `New End ${millisToString(timeEnd + delay)}` : 'End time';
+  const inputTimeLabels = cx([style.inputLabel, hasDelay ? style.delayLabel : null]);
 
   return (
     <div className={style.column}>
@@ -87,11 +79,10 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
             {startLabel}
           </label>
           <TimeInputWithButton
-            id='timeStart'
             name='timeStart'
-            submitHandler={handleSubmit}
+            submitHandler={handleTimeSubmit}
             time={timeStart}
-            delay={delay}
+            hasDelay={hasDelay}
             placeholder='Start'
           />
         </div>
@@ -100,11 +91,10 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
             {endLabel}
           </label>
           <TimeInputWithButton
-            id='timeEnd'
             name='timeEnd'
-            submitHandler={handleSubmit}
+            submitHandler={handleTimeSubmit}
             time={timeEnd}
-            delay={delay}
+            hasDelay={hasDelay}
             placeholder='End'
           />
         </div>
@@ -113,9 +103,8 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
             Duration
           </label>
           <TimeInputWithButton
-            id='durationOverride'
             name='durationOverride'
-            submitHandler={handleSubmit}
+            submitHandler={handleTimeSubmit}
             time={duration}
             placeholder='Duration'
           />
@@ -123,18 +112,14 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
       </div>
 
       <div className={style.splitTwo}>
-        <label className={style.inputLabel} htmlFor='timeWarning'>
-          Warning Time
-          <TimeInput
-            id='timeWarning'
-            name='timeWarning'
-            submitHandler={handleSubmit}
-            time={timeWarning}
-            placeholder='Duration'
-          />
-        </label>
-        <label className={style.inputLabel}>
-          Timer Type
+        <div>
+          <label className={style.inputLabel} htmlFor='timeWarning'>
+            Warning Time
+          </label>
+          <TimeInput name='timeWarning' submitHandler={handleSubmit} time={timeWarning} placeholder='Duration' />
+        </div>
+        <div>
+          <label className={style.inputLabel}>Timer Type</label>
           <Select
             size='sm'
             name='timerType'
@@ -147,19 +132,15 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
             <option value={TimerType.TimeToEnd}>Time to end</option>
             <option value={TimerType.Clock}>Clock</option>
           </Select>
-        </label>
-        <label className={style.inputLabel} htmlFor='timeDanger'>
-          Danger Time
-          <TimeInput
-            id='timeDanger'
-            name='timeDanger'
-            submitHandler={handleSubmit}
-            time={timeDanger}
-            placeholder='Duration'
-          />
-        </label>
-        <label className={style.inputLabel}>
-          End Action
+        </div>
+        <div>
+          <label className={style.inputLabel} htmlFor='timeDanger'>
+            Danger Time
+          </label>
+          <TimeInput name='timeDanger' submitHandler={handleSubmit} time={timeDanger} placeholder='Duration' />
+        </div>
+        <div>
+          <label className={style.inputLabel}>End Action</label>
           <Select
             size='sm'
             name='endAction'
@@ -172,11 +153,11 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
             <option value={EndAction.LoadNext}>Load Next</option>
             <option value={EndAction.PlayNext}>Play Next</option>
           </Select>
-        </label>
+        </div>
       </div>
 
       <div>
-        <span className={style.inputLabel}>Event visibility</span>
+        <span className={style.inputLabel}>Event Visibility</span>
         <label className={style.switchLabel}>
           <Switch isChecked={isPublic} onChange={() => handleSubmit('isPublic', isPublic)} variant='ontime' />
           {isPublic ? 'Public' : 'Private'}

apps/client/src/features/rundown/event-editor/composite/EventEditorTitles.tsx

@@ -31,8 +31,10 @@ const EventEditorTitles = (props: EventEditorLeftProps) => {
   return (
     <div className={style.column}>
       <div className={style.splitTwo}>
-        <label className={style.inputLabel} htmlFor='eventId'>
-          Event ID (read only)
+        <div>
+          <label className={style.inputLabel} htmlFor='eventId'>
+            Event ID (read only)
+          </label>
           <Input
             id='eventId'
             size='sm'
@@ -41,7 +43,7 @@ const EventEditorTitles = (props: EventEditorLeftProps) => {
             value={eventId}
             readOnly
           />
-        </label>
+        </div>
         <EventTextInput field='cue' label='Cue' initialValue={cue} submitHandler={cueSubmitHandler} maxLength={10} />
       </div>
       <EventTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />

apps/client/src/features/viewers/countdown/CountdownSelect.tsx

@@ -24,7 +24,7 @@ export default function CountdownSelect(props: CountdownSelectProps) {
   ) as OntimeEvent[];
 
   return (
-    <div className='event-select' data-testid='countdown-select'>
+    <div className='event-select' data-testid='countdown__select'>
       <span className='event-select__title'>{getLocalizedString('countdown.select_event')}</span>
       <ul className='event-select__events'>
         {!events.length ? (

apps/server/src/services/rundown-service/RundownService.ts

@@ -1,4 +1,4 @@
-import { LogOrigin, OntimeBaseEvent, OntimeBlock, OntimeDelay, OntimeEvent, SupportedEvent } from 'ontime-types';
+import { LogOrigin, OntimeBaseEvent, OntimeBlock, OntimeDelay, OntimeEvent, SupportedEvent, isOntimeEvent } from 'ontime-types';
 import { generateId, getCueCandidate } from 'ontime-utils';
 import { DataProvider } from '../../classes/data-provider/DataProvider.js';
 import { block as blockDef, delay as delayDef } from '../../models/eventsDefinition.js';
@@ -18,7 +18,7 @@ import {
   delayedRundownCacheKey,
 } from './delayedRundown.utils.js';
 import { logger } from '../../classes/Logger.js';
-import { validateEvent } from '../../utils/parser.js';
+import { createEvent } from '../../utils/parser.js';
 import { stateMutations } from '../../state.js';
 import { runtimeService } from '../runtime-service/RuntimeService.js';
 
@@ -56,7 +56,7 @@ export async function addEvent(eventData: Partial<OntimeEvent> | Partial<OntimeD
 
   switch (eventData.type) {
     case SupportedEvent.Event: {
-      newEvent = validateEvent(eventData, getCueCandidate(DataProvider.getRundown(), eventData?.after)) as OntimeEvent;
+      newEvent = createEvent(eventData, getCueCandidate(DataProvider.getRundown(), eventData?.after)) as OntimeEvent;
       break;
     }
     case SupportedEvent.Delay:
@@ -80,7 +80,7 @@ export async function addEvent(eventData: Partial<OntimeEvent> | Partial<OntimeD
 }
 
 export async function editEvent(eventData: Partial<OntimeEvent> | Partial<OntimeBlock> | Partial<OntimeDelay>) {
-  if (eventData.type === SupportedEvent.Event && eventData?.cue === '') {
+  if (isOntimeEvent(eventData) && eventData?.cue === '') {
     throw new Error('Cue value invalid');
   }
 

apps/server/src/services/rundown-service/delayedRundown.utils.ts

@@ -16,6 +16,7 @@ import { getCached, runtimeCacheStore } from '../../stores/cachingStore.js';
 import { isProduction } from '../../setup.js';
 import { deleteAtIndex, insertAtIndex, reorderArray } from '../../utils/arrayUtils.js';
 import { _applyDelay } from '../delayUtils.js';
+import { createPatch } from '../../utils/parser.js';
 
 /**
  * Keep incremental revision number of rundown for runtime
@@ -109,6 +110,16 @@ export async function cachedEdit(
   eventId: string,
   patchObject: Partial<OntimeEvent> | Partial<OntimeBlock> | Partial<OntimeDelay>,
 ) {
+  const makeEvent = (eventFromRundown: OntimeRundownEntry): OntimeRundownEntry => {
+    if (isOntimeEvent(eventFromRundown)) {
+      const newEvent = createPatch(eventFromRundown, patchObject as OntimeEvent);
+      newEvent.revision++;
+      return newEvent;
+    }
+
+    return { ...eventFromRundown, ...patchObject } as OntimeRundownEntry;
+  };
+
   const indexInMemory = DataProvider.getIndexOf(eventId);
   if (indexInMemory < 0) {
     throw new Error('No event with ID found');
@@ -125,10 +136,7 @@ export async function cachedEdit(
     return eventFromRundown;
   }
 
-  const newEvent = { ...eventFromRundown, ...patchObject } as OntimeRundownEntry;
-  if (isOntimeEvent(newEvent)) {
-    newEvent.revision++;
-  }
+  const newEvent = makeEvent(eventFromRundown);
   updatedRundown[indexInMemory] = newEvent;
 
   let newDelayedRundown = getDelayedRundown();

apps/server/src/utils/__tests__/parser.test.ts

@@ -4,7 +4,7 @@ import { vi } from 'vitest';
 import { EndAction, OntimeEvent, TimerType } from 'ontime-types';
 
 import { dbModel } from '../../models/dataModel.js';
-import { parseExcel, parseJson, validateEvent } from '../parser.js';
+import { parseExcel, parseJson, createEvent } from '../parser.js';
 import { makeString } from '../parserUtils.js';
 import { parseAliases, parseUserFields, parseViewSettings } from '../parserFunctions.js';
 
@@ -340,7 +340,7 @@ describe('test parser edge cases', () => {
     };
 
     const parseResponse = await parseJson(testData);
-    expect(console.log).toHaveBeenCalledWith('ERROR: undefined event type, skipping');
+    expect(console.log).toHaveBeenCalledWith('ERROR: unkown event type, skipping');
     expect(parseResponse?.rundown.length).toBe(0);
   });
 
@@ -464,7 +464,7 @@ describe('test event validator', () => {
     const event = {
       title: 'test',
     };
-    const validated = validateEvent(event, 'test');
+    const validated = createEvent(event, 'test');
 
     expect(validated).toEqual(
       expect.objectContaining({
@@ -497,7 +497,7 @@ describe('test event validator', () => {
 
   it('fails an empty object', () => {
     const event = {};
-    const validated = validateEvent(event, 'none');
+    const validated = createEvent(event, 'none');
     expect(validated).toEqual(null);
   });
 
@@ -509,7 +509,7 @@ describe('test event validator', () => {
       note: '1899-12-30T08:00:10.000Z',
     };
     // @ts-expect-error -- we know this is wrong, testing imports outside domain
-    const validated = validateEvent(event, 'not-used');
+    const validated = createEvent(event, 'not-used');
     expect(typeof validated.title).toEqual('string');
     expect(typeof validated.subtitle).toEqual('string');
     expect(typeof validated.presenter).toEqual('string');
@@ -522,7 +522,7 @@ describe('test event validator', () => {
       timeEnd: '2',
     };
     // @ts-expect-error -- we know this is wrong, testing imports outside domain
-    const validated = validateEvent(event);
+    const validated = createEvent(event);
     expect(typeof validated.timeStart).toEqual('number');
     expect(validated.timeStart).toEqual(0);
     expect(typeof validated.timeEnd).toEqual('number');
@@ -534,7 +534,7 @@ describe('test event validator', () => {
       title: {},
     };
     // @ts-expect-error -- we know this is wrong, testing imports outside domain
-    const validated = validateEvent(event);
+    const validated = createEvent(event);
     expect(typeof validated.title).toEqual('string');
   });
 });

apps/server/src/utils/parser.ts

@@ -43,20 +43,25 @@ import { coerceBoolean } from './coerceType.js';
 export const EXCEL_MIME = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
 export const JSON_MIME = 'application/json';
 
+type ExcelData = Pick<DatabaseModel, 'rundown' | 'project' | 'userFields'> & {
+  projectMetadata: Record<string, { row: number; col: number }>;
+  rundownMetadata: Record<string, { row: number; col: number }>;
+};
+
 /**
  * @description Excel array parser
  * @param {array} excelData - array with excel sheet
  * @param {ExcelImportOptions} options - an object that contains the import map
  * @returns {object} - parsed object
  */
-export const parseExcel = (excelData: unknown[][], options?: Partial<ExcelImportMap>) => {
+export const parseExcel = (excelData: unknown[][], options?: Partial<ExcelImportMap>): ExcelData => {
   const projectMetadata = {};
   const rundownMetadata = {};
   const importMap: ExcelImportMap = { ...defaultExcelImportMap, ...options };
   for (const [key, value] of Object.entries(importMap)) {
     importMap[key] = value.toLocaleLowerCase();
   }
-  const projectData: Partial<ProjectData> = {
+  const projectData: ProjectData = {
     title: '',
     description: '',
     publicUrl: '',
@@ -64,7 +69,7 @@ export const parseExcel = (excelData: unknown[][], options?: Partial<ExcelImport
     backstageUrl: '',
     backstageInfo: '',
   };
-  const customUserFields: Partial<UserFields> = {
+  const customUserFields: UserFields = {
     user0: importMap.user0,
     user1: importMap.user1,
     user2: importMap.user2,
@@ -350,10 +355,6 @@ export const parseExcel = (excelData: unknown[][], options?: Partial<ExcelImport
   return {
     rundown,
     project: projectData,
-    settings: {
-      app: 'ontime',
-      version: '2.0.0',
-    },
     userFields: customUserFields,
     projectMetadata,
     rundownMetadata,
@@ -393,61 +394,66 @@ export const parseJson = async (jsonData): Promise<DatabaseModel | null> => {
   return returnData as DatabaseModel;
 };
 
+export function createPatch(originalEvent: OntimeEvent, patchEvent: Partial<OntimeEvent>): OntimeEvent {
+  if (Object.keys(patchEvent).length === 0) {
+    return originalEvent;
+  }
+
+  const { timeStart, timeEnd, duration } = validateTimes(
+    patchEvent?.timeStart ?? originalEvent.timeStart,
+    patchEvent?.timeEnd ?? originalEvent.timeEnd,
+    patchEvent?.duration ?? originalEvent.duration,
+  );
+
+  return {
+    id: originalEvent.id,
+    type: SupportedEvent.Event,
+    title: makeString(patchEvent.title, originalEvent.title),
+    subtitle: makeString(patchEvent.subtitle, originalEvent.subtitle),
+    presenter: makeString(patchEvent.presenter, originalEvent.presenter),
+    timeStart,
+    timeEnd,
+    duration,
+    endAction: validateEndAction(patchEvent.endAction, EndAction.None),
+    timerType: validateTimerType(patchEvent.timerType, TimerType.CountDown),
+    isPublic: typeof patchEvent.isPublic === 'boolean' ? patchEvent.isPublic : originalEvent.isPublic,
+    skip: typeof patchEvent.skip === 'boolean' ? patchEvent.skip : originalEvent.skip,
+    note: makeString(patchEvent.note, originalEvent.note),
+    user0: makeString(patchEvent.user0, originalEvent.user0),
+    user1: makeString(patchEvent.user1, originalEvent.user1),
+    user2: makeString(patchEvent.user2, originalEvent.user2),
+    user3: makeString(patchEvent.user3, originalEvent.user3),
+    user4: makeString(patchEvent.user4, originalEvent.user4),
+    user5: makeString(patchEvent.user5, originalEvent.user5),
+    user6: makeString(patchEvent.user6, originalEvent.user6),
+    user7: makeString(patchEvent.user7, originalEvent.user7),
+    user8: makeString(patchEvent.user8, originalEvent.user8),
+    user9: makeString(patchEvent.user9, originalEvent.user9),
+    colour: makeString(patchEvent.colour, originalEvent.colour),
+    cue: makeString(patchEvent.cue, originalEvent.cue),
+    revision: originalEvent.revision,
+    timeWarning: patchEvent.timeWarning,
+    timeDanger: patchEvent.timeDanger,
+  };
+}
+
 /**
  * @description Enforces formatting for events
  * @param {object} eventArgs - attributes of event
  * @param cueFallback
  * @returns {object|null} - formatted object or null in case is invalid
  */
-
-export const validateEvent = (eventArgs: Partial<OntimeEvent>, cueFallback: string) => {
-  // ensure id is defined and unique
-  const id = eventArgs.id || generateId();
-
-  let event = null;
-
-  // return if object is empty
-  if (Object.keys(eventArgs).length > 0) {
-    // make sure all properties exits
-    // dont load any extra properties than the ones known
-
-    const e = eventArgs;
-    const d = eventDef;
-
-    const { timeStart, timeEnd, duration } = validateTimes(e.timeStart, e.timeEnd, e.duration);
-
-    event = {
-      ...d,
-      title: makeString(e.title, d.title),
-      subtitle: makeString(e.subtitle, d.subtitle),
-      presenter: makeString(e.presenter, d.presenter),
-      timeStart,
-      timeEnd,
-      duration,
-      endAction: validateEndAction(e.endAction, EndAction.None),
-      timerType: validateTimerType(e.timerType, TimerType.CountDown),
-      isPublic: typeof e.isPublic === 'boolean' ? e.isPublic : d.isPublic,
-      skip: typeof e.skip === 'boolean' ? e.skip : d.skip,
-      note: makeString(e.note, d.note),
-      user0: makeString(e.user0, d.user0),
-      user1: makeString(e.user1, d.user1),
-      user2: makeString(e.user2, d.user2),
-      user3: makeString(e.user3, d.user3),
-      user4: makeString(e.user4, d.user4),
-      user5: makeString(e.user5, d.user5),
-      user6: makeString(e.user6, d.user6),
-      user7: makeString(e.user7, d.user7),
-      user8: makeString(e.user8, d.user8),
-      user9: makeString(e.user9, d.user9),
-      colour: makeString(e.colour, d.colour),
-      cue: makeString(e.cue, cueFallback),
-      id,
-      type: 'event',
-      timeWarning: e.timeWarning,
-      timeDanger: e.timeDanger,
-    };
+export const createEvent = (eventArgs: Partial<OntimeEvent>, cueFallback: string): OntimeEvent | null => {
+  if (Object.keys(eventArgs).length === 0) {
+    return null;
   }
 
+  const baseEvent = {
+    id: eventArgs?.id ?? generateId(),
+    cue: cueFallback,
+    ...eventDef,
+  };
+  const event = createPatch(baseEvent, eventArgs);
   return event;
 };
 
@@ -497,7 +503,6 @@ export const fileHandler = async (file: string, options: ExcelImportOptions): Pr
   }
 
   if (file.endsWith('.json')) {
-    // if json check version
     const rawdata = fs.readFileSync(file).toString();
     let uploadedJson = null;
 

apps/server/src/utils/parserFunctions.ts

@@ -13,11 +13,15 @@ import {
   HttpSubscription,
   OscSubscriptionOptions,
   HttpSubscriptionOptions,
+  DatabaseModel,
+  isOntimeEvent,
+  isOntimeDelay,
+  isOntimeBlock,
 } from 'ontime-types';
 
 import { block as blockDef, delay as delayDef } from '../models/eventsDefinition.js';
 import { dbModel } from '../models/dataModel.js';
-import { validateEvent } from './parser.js';
+import { createEvent } from './parser.js';
 import { MAX_EVENTS } from '../settings.js';
 
 /**
@@ -25,7 +29,7 @@ import { MAX_EVENTS } from '../settings.js';
  * @param {object} data - data object
  * @returns {object} - event object data
  */
-export const parseRundown = (data): OntimeRundown => {
+export const parseRundown = (data: Partial<DatabaseModel>): OntimeRundown => {
   let newRundown: OntimeRundown = [];
   if ('rundown' in data) {
     console.log('Found rundown definition, importing...');
@@ -33,7 +37,7 @@ export const parseRundown = (data): OntimeRundown => {
     try {
       let eventIndex = 0;
       const ids = [];
-      for (const e of data.rundown) {
+      for (const event of data.rundown) {
         // cap number of events
         if (rundown.length >= MAX_EVENTS) {
           console.log(`ERROR: Reached limit number of ${MAX_EVENTS} events`);
@@ -41,28 +45,28 @@ export const parseRundown = (data): OntimeRundown => {
         }
 
         // double check unique ids
-        if (ids.includes(e?.id)) {
+        if (ids.includes(event?.id)) {
           console.log('ERROR: ID collision on import, skipping');
           continue;
         }
 
-        if (e.type === 'event') {
+        if (isOntimeEvent(event)) {
           eventIndex += 1;
-          const event = validateEvent(e, eventIndex.toString());
+          const parsedEvent = createEvent(event, eventIndex.toString());
           if (event != null) {
-            rundown.push(event);
-            ids.push(event.id);
+            rundown.push(parsedEvent);
+            ids.push(parsedEvent.id);
           }
-        } else if (e.type === 'delay') {
+        } else if (isOntimeDelay(event)) {
           rundown.push({
             ...delayDef,
-            duration: e.duration,
-            id: e.id || generateId(),
+            duration: event.duration,
+            id: event.id || generateId(),
           });
-        } else if (e.type === 'block') {
-          rundown.push({ ...blockDef, title: e.title, id: e.id || generateId() });
+        } else if (isOntimeBlock(event)) {
+          rundown.push({ ...blockDef, title: event.title, id: event.id || generateId() });
         } else {
-          console.log('ERROR: undefined event type, skipping');
+          console.log('ERROR: unkown event type, skipping');
         }
       }
     } catch (error) {
@@ -112,16 +116,16 @@ export const parseSettings = (data): Settings => {
     const s = data.settings;
 
     // skip if file definition is missing
-    if (s.app == null || s.version == null) {
+    if (s?.app !== 'ontime' || s?.version == null) {
       console.log('ERROR: unknown app version, skipping');
     } else {
       const settings = {
         version: dbModel.settings.version,
-        serverPort: s.serverPort || dbModel.settings.serverPort,
-        editorKey: s.editorKey || null,
-        operatorKey: s.operatorKey || null,
-        timeFormat: s.timeFormat || '24',
-        language: s.language || 'en',
+        serverPort: s.serverPort ?? dbModel.settings.serverPort,
+        editorKey: s.editorKey ?? null,
+        operatorKey: s.operatorKey ?? null,
+        timeFormat: s.timeFormat ?? '24',
+        language: s.language ?? 'en',
       };
 
       // write to db
@@ -287,15 +291,15 @@ export const parseAliases = (data): Alias[] => {
   if ('aliases' in data) {
     console.log('Found Aliases definition, importing...');
     try {
-      for (const a of data.aliases) {
+      for (const alias of data.aliases) {
         const newAlias = {
-          enabled: a.enabled || false,
-          alias: a.alias || '',
-          pathAndParams: a.pathAndParams || '',
+          enabled: alias.enabled ?? false,
+          alias: alias.alias ?? '',
+          pathAndParams: alias.pathAndParams ?? '',
         };
         newAliases.push(newAlias);
       }
-      console.log(`Uploaded ${newAliases?.length || 0} alias(es)`);
+      console.log(`Uploaded ${newAliases.length} alias(es)`);
     } catch (error) {
       console.log(`Error: ${error}`);
     }
@@ -328,4 +332,4 @@ export const parseUserFields = (data): UserFields => {
     }
   }
   return { ...newUserFields };
-};
+};

e2e/tests/000-smoke-tests.spec.ts

@@ -8,8 +8,7 @@ test.describe('pages routes are available', () => {
       await page.goto('http://localhost:4001/editor');
 
       await expect(page).toHaveTitle(/ontime/);
-      // TODO (v3): not ready yet
-      // await expect(page.getByTestId('editor-container')).toBeVisible();
+      await expect(page.getByTestId('editor-container')).toBeVisible();
       await expect(page.getByTestId('panel-rundown')).toBeVisible();
       await expect(page.getByTestId('panel-timer-control')).toBeVisible();
       await expect(page.getByTestId('panel-messages-control')).toBeVisible();

e2e/tests/002-upload-showfile.spec.ts

@@ -25,12 +25,7 @@ test('test project file upload', async ({ page }) => {
   await page.getByPlaceholder('Start').first().click();
   await page.getByText('First test event').click();
   await page.getByTestId('delay-input').click();
-  await page
-    .locator('div')
-    .filter({ hasText: /^SED\+10 minNew start: 10:10:00$/ })
-    .getByPlaceholder('Start')
-    .click();
-  await page.getByText('+10 minNew start: 10:10:00').click();
+  await page.getByText('New start: 10:10').click();
   await page.getByText('Second test event').click();
   await page.getByText('Lunch').click();
   await page.getByText('Third test event').click();

e2e/tests/features/203-delay-block.spec.ts

@@ -25,11 +25,11 @@ test('delay blocks add time to events', async ({ page }) => {
   await page.getByTestId('delay-input').click();
   await page.getByTestId('delay-input').fill('2m');
   await page.getByTestId('delay-input').press('Enter');
-  await page.getByText('+2 minNew start: 00:12:00').click();
+  await page.getByText('New start: 00:12').click();
 
   // make negative delay
   await page.getByText('Subtract time').click();
-  await page.getByText('-2 minNew start: 00:08:00').click();
+  await page.getByText('New start: 00:08').click();
 
   // apply delay
   await page.getByRole('button', { name: 'Apply' }).click();
@@ -42,12 +42,12 @@ test('delay blocks add time to events', async ({ page }) => {
   await page.getByTestId('delay-input').click();
   await page.getByTestId('delay-input').fill('10m');
   await page.getByTestId('delay-input').press('Enter');
-  await page.getByText('+10 minNew start: 00:18:00').click();
+  await page.getByText('New start: 00:18').click();
 
   // cancel delay
   await page.getByRole('button', { name: 'Cancel' }).click();
   await expect(page.getByTestId('rundown').getByTestId('time-input-timeStart')).toHaveValue('00:08:00');
-  await expect(page.getByText('+10 minNew start: 00:18:00')).toHaveCount(0);
+  await expect(page.getByText('New start: 00:18')).toHaveCount(0);
 });
 
 test('delays are show correctly', async ({ page }) => {
@@ -79,7 +79,7 @@ test('delays are show correctly', async ({ page }) => {
   await page.getByTestId('delay-input').press('Enter');
 
   // delay is shown in the editor
-  await page.getByText('+1 minNew start: 00:11:00').click();
+  await page.getByText('New start: 00:11').click();
 
   // delay is shown in the cuesheet
   await page.goto('http://localhost:4001/cuesheet');

e2e/tests/features/206-alias.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
 
 test('test aliases feature, it should redirect to given alias', async ({ page }) => {
   await page.goto('http://localhost:4001/editor');
@@ -17,5 +17,5 @@ test('test aliases feature, it should redirect to given alias', async ({ page })
 
   // make sure alias works
   await page.goto('http://localhost:4001/testing');
-  await page.getByText('Select an event to follow').click();
+  await page.getByTestId('countdown__select').click();
 });

packages/utils/index.ts

@@ -8,7 +8,7 @@ export { calculateDuration } from './src/validate-events/validateEvent.js';
 export { sanitiseCue } from './src/cue-utils/cueUtils.js';
 export { getCueCandidate } from './src/cue-utils/cueUtils.js';
 export { generateId } from './src/generate-id/generateId.js';
-export { swapOntimeEvents } from './src/rundown-utils/rundownUtils.js';
+export { getPreviousEvent, swapOntimeEvents } from './src/rundown-utils/rundownUtils.js';
 
 // format utils
 export {
@@ -20,7 +20,13 @@ export {
   millisToSeconds,
 } from './src/date-utils/conversionUtils.js';
 export { isTimeString } from './src/date-utils/isTimeString.js';
-export { formatFromMillis, millisToString, removeLeadingZero, removeSeconds } from './src/date-utils/timeFormatting.js';
+export {
+  formatFromMillis,
+  millisToString,
+  removeLeadingZero,
+  removeSeconds,
+  removeTrailingZero,
+} from './src/date-utils/timeFormatting.js';
 export { isColourHex } from './src/regex-utils/isColourHex.js';
 
 // time utils

packages/utils/src/date-utils/timeFormatting.ts

@@ -52,6 +52,17 @@ export function removeLeadingZero(timer: string): string {
   return timer;
 }
 
+/**
+ * Receives a string such as 00:10:10 and removes the seconds field if it is 00
+ * @param timer
+ */
+export function removeTrailingZero(timer: string): string {
+  if (timer.endsWith(':00')) {
+    return timer.slice(0, -3);
+  }
+  return timer;
+}
+
 /**
  * Receives a string such as 00:10:10 and removes the seconds field
  * @param timer

packages/utils/src/validate-events/validateEvent.ts

@@ -7,7 +7,7 @@ import { dayInMs } from '../timeConstants.js';
  * @param {EndAction} maybeAction
  * @param {EndAction} [fallback]
  */
-export function validateEndAction(maybeAction: unknown, fallback = EndAction.None) {
+export function validateEndAction(maybeAction: unknown, fallback = EndAction.None): EndAction {
   return Object.values(EndAction).includes(maybeAction as EndAction) ? (maybeAction as EndAction) : fallback;
 }
 
@@ -16,7 +16,7 @@ export function validateEndAction(maybeAction: unknown, fallback = EndAction.Non
  * @param {TimerType} maybeTimerType
  * @param {TimerType} [fallback]
  */
-export function validateTimerType(maybeTimerType: unknown, fallback = TimerType.CountDown) {
+export function validateTimerType(maybeTimerType: unknown, fallback = TimerType.CountDown): TimerType {
   return Object.values(TimerType).includes(maybeTimerType as TimerType) ? (maybeTimerType as TimerType) : fallback;
 }
 
@@ -51,7 +51,11 @@ function convertToInteger(value: unknown): number {
  * @param _end
  * @param _duration
  */
-export function validateTimes(_start?: unknown, _end?: unknown, _duration?: unknown) {
+export function validateTimes(
+  _start?: unknown,
+  _end?: unknown,
+  _duration?: unknown,
+): { timeStart: number; duration: number; timeEnd: number } {
   const timeStart = convertToInteger(_start);
   const timeEnd = convertToInteger(_end);
   const duration = convertToInteger(_duration);