refactor: update timers (#729)

* refactor: remove duplication

* refactor: previous times

* refactor: event patching

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>