More rundown metadata (#1429)

* add dayOffset to OntimeEvent

* refactor: isNewLatest

* calculate totalDays

* refactor: getTimeFromPrevious

* add gap as dataset in OntimeEvent

* use in ui

* format overlap is just a simple text formatting, big test is not needed

* add new fields where needed

* update apply delay

* show nex day eaven if there is no gap

* create test

* use buildin day offset in timeline

* remove todo

* consistent naming

* make a calculateDayOffset util for rundownCache

* refactor: checkIsNextDay to use dayOffset

* spelling

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

* remove unneeded test

* remove todo

* update test db

* use data-testid

* spelling

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

* update comments

* remove null option

---------

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

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

@@ -25,6 +25,8 @@ export const cloneEvent = (event: OntimeEvent): ClonedEvent => {
     colour: event.colour,
     revision: 0,
     delay: 0,
+    dayOffset: 0,
+    gap: 0,
     timeWarning: event.timeWarning,
     timeDanger: event.timeDanger,
     custom: {},

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

@@ -13,6 +13,7 @@ import {
   SupportedEvent,
 } from 'ontime-types';
 import {
+  checkIsNextDay,
   getFirstNormal,
   getLastNormal,
   getNextBlockNormal,
@@ -267,7 +268,7 @@ export default function Rundown({ data }: RundownProps) {
   let eventIndex = 0;
   // all events before the current selected are in the past
   let isPast = Boolean(featureData?.selectedEventId);
-
+  let isNextDay = false;
   const isEditMode = appMode === AppMode.Edit;
 
   return (
@@ -286,6 +287,7 @@ export default function Rundown({ data }: RundownProps) {
               if (index === 0) {
                 eventIndex = 0;
               }
+              isNextDay = false;
               previousEntryId = thisId;
               thisId = entryId;
               if (isOntimeEvent(entry)) {
@@ -294,8 +296,9 @@ export default function Rundown({ data }: RundownProps) {
                 lastEvent = thisEvent;
 
                 if (isPlayableEvent(entry)) {
-                  // populate previous entry
-                  if (isNewLatest(entry.timeStart, entry.timeEnd, lastEvent?.timeStart, lastEvent?.timeEnd)) {
+                  isNextDay = checkIsNextDay(entry, lastEvent);
+                  if (isNewLatest(entry, lastEvent)) {
+                    // populate previous entry
                     thisEvent = entry;
                   }
                 }
@@ -323,12 +326,11 @@ export default function Rundown({ data }: RundownProps) {
                         loaded={isLoaded}
                         hasCursor={hasCursor}
                         isNext={isNext}
-                        previousStart={lastEvent?.timeStart}
-                        previousEnd={lastEvent?.timeEnd}
                         previousEntryId={previousEntryId}
                         previousEventId={lastEvent?.id}
                         playback={isLoaded ? featureData.playback : undefined}
                         isRolling={featureData.playback === Playback.Roll}
+                        isNextDay={isNextDay}
                       />
                     </div>
                   </div>

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

@@ -32,8 +32,7 @@ interface RundownEntryProps {
   eventIndex: number;
   hasCursor: boolean;
   isNext: boolean;
-  previousStart?: number;
-  previousEnd?: number;
+  isNextDay: boolean;
   previousEntryId?: string;
   previousEventId?: string;
   playback?: Playback; // we only care about this if this event is playing
@@ -47,13 +46,12 @@ export default function RundownEntry(props: RundownEntryProps) {
     loaded,
     hasCursor,
     isNext,
-    previousStart,
-    previousEnd,
     previousEntryId,
     previousEventId,
     playback,
     isRolling,
     eventIndex,
+    isNextDay,
   } = props;
   const { emitError } = useEmitLog();
   const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
@@ -165,8 +163,6 @@ export default function RundownEntry(props: RundownEntryProps) {
         title={data.title}
         note={data.note}
         delay={data.delay ?? 0}
-        previousStart={previousStart}
-        previousEnd={previousEnd}
         colour={data.colour}
         isPast={isPast}
         isNext={isNext}
@@ -175,6 +171,8 @@ export default function RundownEntry(props: RundownEntryProps) {
         hasCursor={hasCursor}
         playback={playback}
         isRolling={isRolling}
+        gap={data.gap}
+        isNextDay={isNextDay}
         actionHandler={actionHandler}
       />
     );

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

@@ -39,8 +39,6 @@ interface EventBlockProps {
   title: string;
   note: string;
   delay: number;
-  previousStart?: number;
-  previousEnd?: number;
   colour: string;
   isPast: boolean;
   isNext: boolean;
@@ -49,6 +47,8 @@ interface EventBlockProps {
   hasCursor: boolean;
   playback?: Playback;
   isRolling: boolean;
+  gap: number;
+  isNextDay: boolean;
   actionHandler: (
     action: EventItemActions,
     payload?:
@@ -77,8 +77,6 @@ export default function EventBlock(props: EventBlockProps) {
     title,
     note,
     delay,
-    previousStart,
-    previousEnd,
     colour,
     isPast,
     isNext,
@@ -87,6 +85,8 @@ export default function EventBlock(props: EventBlockProps) {
     hasCursor,
     playback,
     isRolling,
+    gap,
+    isNextDay,
     actionHandler,
   } = props;
   const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
@@ -273,7 +273,7 @@ export default function EventBlock(props: EventBlockProps) {
       onContextMenu={onContextMenu}
       id='event-block'
     >
-      <RundownIndicators timeStart={timeStart} previousStart={previousStart} previousEnd={previousEnd} delay={delay} />
+      <RundownIndicators timeStart={timeStart} delay={delay} gap={gap} isNextDay={isNextDay} />
 
       <div className={style.binder} style={{ ...binderColours }} tabIndex={-1}>
         <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>

apps/client/src/features/rundown/event-block/EventBlock.utils.ts

@@ -1,11 +1,4 @@
-import {
-  calculateDuration,
-  checkIsNextDay,
-  dayInMs,
-  getTimeFromPrevious,
-  millisToString,
-  removeTrailingZero,
-} from 'ontime-utils';
+import { millisToString, removeTrailingZero } from 'ontime-utils';
 
 import { formatDuration } from '../../../common/utils/time';
 
@@ -17,25 +10,15 @@ export function formatDelay(timeStart: number, delay: number): string | undefine
   const timeTag = removeTrailingZero(millisToString(delayedStart));
   return `New start ${timeTag}`;
 }
-
-export function formatOverlap(timeStart: number, previousStart?: number, previousEnd?: number): string | undefined {
-  const noPreviousElement = previousEnd === undefined || previousStart === undefined;
-  if (noPreviousElement) return;
-
-  const normalisedDuration = calculateDuration(previousStart, previousEnd);
-  const timeFromPrevious = getTimeFromPrevious(timeStart, previousStart, previousEnd, normalisedDuration);
-  if (timeFromPrevious === 0) return;
-
-  if (checkIsNextDay(previousStart, timeStart, normalisedDuration)) {
-    const previousCrossMidnight = previousStart > previousEnd;
-    const normalisedPreviousEnd = previousCrossMidnight ? previousEnd + dayInMs : previousEnd;
-
-    const gap = dayInMs - normalisedPreviousEnd + timeStart;
-    if (gap === 0) return;
-    const gapString = formatDuration(Math.abs(gap), false);
-    return `Gap ${gapString} (next day)`;
+export function formatGap(gap: number, isNextDay: boolean) {
+  if (gap === 0) {
+    if (isNextDay) {
+      // We show a next day warning even if there is no gap
+      return '(next day)';
+    }
+    return;
   }
 
-  const overlapString = formatDuration(Math.abs(timeFromPrevious), false);
-  return `${timeFromPrevious < 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
+  const gapString = formatDuration(Math.abs(gap), false);
+  return `${gap < 0 ? 'Overlap' : 'Gap'} ${gapString}${isNextDay ? ' (next day)' : ''}`;
 }

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

@@ -1,24 +1,24 @@
-import { formatDelay, formatOverlap } from './EventBlock.utils';
+import { formatDelay, formatGap } from './EventBlock.utils';
 
 import style from './RundownIndicators.module.scss';
 
 interface RundownIndicatorProps {
   timeStart: number;
-  previousStart?: number;
-  previousEnd?: number;
+  isNextDay: boolean;
   delay: number;
+  gap: number;
 }
 
 export default function RundownIndicators(props: RundownIndicatorProps) {
-  const { timeStart, previousStart, previousEnd, delay } = props;
+  const { timeStart, delay, gap, isNextDay } = props;
 
-  const hasOverlap = formatOverlap(timeStart, previousStart, previousEnd);
+  const hasGap = formatGap(gap, isNextDay);
   const hasDelay = formatDelay(timeStart, delay);
 
   return (
     <div className={style.indicators}>
       {hasDelay && <div className={style.delay}>{hasDelay}</div>}
-      {hasOverlap && <div className={style.gap}>{hasOverlap}</div>}
+      {hasGap && <div className={style.gap}>{hasGap}</div>}
     </div>
   );
 }

apps/client/src/features/rundown/event-block/__tests__/EventBlock.utils.test.ts

@@ -1,6 +1,4 @@
-import { MILLIS_PER_HOUR } from 'ontime-utils';
-
-import { formatDelay, formatOverlap } from '../EventBlock.utils';
+import { formatDelay } from '../EventBlock.utils';
 
 describe('formatDelay()', () => {
   it('adds a given delay to the start time', () => {
@@ -10,69 +8,3 @@ describe('formatDelay()', () => {
     expect(result).toEqual('New start 00:02');
   });
 });
-
-describe('formatOverlap()', () => {
-  it('recognises an overlap between two times', () => {
-    const previousStart = 0;
-    const previousEnd = 60000; // 1 min
-    const timeStart = 30000; // 30 sec
-    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toEqual('Overlap 30s');
-  });
-
-  it('bug #949 recognises an overlap between two times', () => {
-    const previousStart = 46800000; // 13:00:00
-    const previousEnd = 48600000; // 13:30:00
-    const timeStart = 48300000; // 13:25:00
-    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toEqual('Overlap 5m');
-  });
-
-  it('handles events the day after, without overlap', () => {
-    const previousStart = 11 * MILLIS_PER_HOUR;
-    const previousEnd = 12 * MILLIS_PER_HOUR;
-    const timeStart = 6 * MILLIS_PER_HOUR;
-    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toBe('Gap 18h (next day)');
-  });
-
-  it('handles events the day after, with gap', () => {
-    const previousStart = 17 * MILLIS_PER_HOUR;
-    const previousEnd = 23 * MILLIS_PER_HOUR;
-    const timeStart = 9 * MILLIS_PER_HOUR;
-    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toBe('Gap 10h (next day)');
-  });
-
-  it('handles events the day after, with previous ending at midnight', () => {
-    const previousStart = 23 * MILLIS_PER_HOUR; // 23:00:00
-    const previousEnd = 0; // 00:00:00
-    const timeStart = 1 * MILLIS_PER_HOUR; // 01:00:00
-    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toBe('Gap 1h (next day)');
-  });
-
-  it('handles sequential events the day after, with previous ending over midnight', () => {
-    const previousStart = 23 * MILLIS_PER_HOUR;
-    const previousEnd = 1 * MILLIS_PER_HOUR;
-    const timeStart = 1 * MILLIS_PER_HOUR;
-    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toBeUndefined();
-  });
-
-  it('handles events the day after, with previous ending over midnight with overlap', () => {
-    const previousStart = 23 * MILLIS_PER_HOUR;
-    const previousEnd = 2 * MILLIS_PER_HOUR;
-    const timeStart = 1 * MILLIS_PER_HOUR;
-    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toBe('Overlap 1h');
-  });
-
-  it('handles events the day after, with previous ending over midnight with gap', () => {
-    const previousStart = 23 * MILLIS_PER_HOUR;
-    const previousEnd = 1 * MILLIS_PER_HOUR;
-    const timeStart = 2 * MILLIS_PER_HOUR;
-    const result = formatOverlap(timeStart, previousStart, previousEnd);
-    expect(result).toBe('Gap 1h');
-  });
-});

apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx

@@ -6,6 +6,7 @@ import { IoLockClosed } from '@react-icons/all-files/io5/IoLockClosed';
 import { IoLockOpenOutline } from '@react-icons/all-files/io5/IoLockOpenOutline';
 import { IoUnlink } from '@react-icons/all-files/io5/IoUnlink';
 import { MaybeString, TimeField, TimeStrategy } from 'ontime-types';
+import { dayInMs } from 'ontime-utils';
 
 import TimeInputWithButton from '../../../common/components/input/time-input/TimeInputWithButton';
 import { useEventAction } from '../../../common/hooks/useEventAction';
@@ -45,7 +46,7 @@ function TimeInputFlow(props: EventBlockTimerProps) {
   };
 
   const warnings = [];
-  if (timeStart > timeEnd) {
+  if (timeStart + duration > dayInMs) {
     warnings.push('Over midnight');
   }
 
@@ -129,7 +130,7 @@ function TimeInputFlow(props: EventBlockTimerProps) {
       </div>
 
       {warnings.length > 0 && (
-        <div className={style.timerNote}>
+        <div className={style.timerNote} data-testid='event-warning'>
           <Tooltip label={warnings.join(' - ')} openDelay={tooltipDelayFast} variant='ontime-ondark' shouldWrapChildren>
             <IoAlertCircleOutline />
           </Tooltip>

apps/client/src/views/timeline/Timeline.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { useViewportSize } from '@mantine/hooks';
-import { isOntimeEvent, isPlayableEvent, MaybeNumber, OntimeRundown } from 'ontime-types';
-import { checkIsNextDay, dayInMs, getLastEvent, MILLIS_PER_HOUR } from 'ontime-utils';
+import { isOntimeEvent, isPlayableEvent, OntimeRundown } from 'ontime-types';
+import { dayInMs, getLastEvent, MILLIS_PER_HOUR } from 'ontime-utils';
 
 import TimelineMarkers from './timeline-markers/TimelineMarkers';
 import { getElementPosition, getEndHour, getStartHour } from './timeline.utils';
@@ -30,10 +30,8 @@ function Timeline(props: TimelineProps) {
   const startHour = getStartHour(firstStart);
   const endHour = getEndHour(firstStart + totalDuration + (lastEvent?.delay ?? 0));
 
-  let previousEventStartTime: MaybeNumber = null;
   // we use selectedEventId as a signifier on whether the timeline is live
   let eventStatus: ProgressStatus = selectedEventId ? 'done' : 'future';
-  let elapsedDays = 0;
 
   return (
     <div className={style.timeline}>
@@ -52,14 +50,7 @@ function Timeline(props: TimelineProps) {
           eventStatus = 'live';
         }
 
-        // we only need to check for next day if we have a previous event
-        if (
-          previousEventStartTime !== null &&
-          checkIsNextDay(previousEventStartTime, event.timeStart, event.duration)
-        ) {
-          elapsedDays++;
-        }
-        const normalisedStart = event.timeStart + elapsedDays * dayInMs;
+        const normalisedStart = event.timeStart + event.dayOffset * dayInMs;
 
         const { left: elementLeftPosition, width: elementWidth } = getElementPosition(
           startHour * MILLIS_PER_HOUR,
@@ -69,9 +60,6 @@ function Timeline(props: TimelineProps) {
           screenWidth,
         );
 
-        // prepare values for next iteration
-        previousEventStartTime = normalisedStart;
-
         return (
           <TimelineEntry
             key={event.id}

apps/client/src/views/timeline/timeline.utils.ts

@@ -110,7 +110,7 @@ export function useScopedRundown(rundown: OntimeRundown, selectedEventId: MaybeS
     let selectedIndex = selectedEventId ? Infinity : -1;
     let firstStart = null;
     let totalDuration = 0;
-    let lastEntry: PlayableEvent | null = null;
+    let lastEntry: PlayableEvent | undefined;
 
     for (let i = 0; i < rundown.length; i++) {
       const currentEntry = rundown[i];
@@ -142,12 +142,7 @@ export function useScopedRundown(rundown: OntimeRundown, selectedEventId: MaybeS
           firstStart = currentEntry.timeStart;
         }
 
-        const timeFromPrevious: number = getTimeFromPrevious(
-          currentEntry.timeStart,
-          lastEntry?.timeStart,
-          lastEntry?.timeEnd,
-          lastEntry?.duration,
-        );
+        const timeFromPrevious: number = getTimeFromPrevious(currentEntry, lastEntry);
 
         if (timeFromPrevious === 0) {
           totalDuration += currentEntry.duration;
@@ -156,7 +151,7 @@ export function useScopedRundown(rundown: OntimeRundown, selectedEventId: MaybeS
         } else if (timeFromPrevious < 0) {
           totalDuration += Math.max(currentEntry.duration + timeFromPrevious, 0);
         }
-        if (isNewLatest(currentEntry.timeStart, currentEntry.timeEnd, lastEntry?.timeStart, lastEntry?.timeEnd)) {
+        if (isNewLatest(currentEntry, lastEntry)) {
           lastEntry = currentEntry;
         }
       }