refactor: UI for linking events (#763)

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

@@ -125,12 +125,6 @@ $skip-opacity: 0.1;
   display: flex;
   gap: $block-clearance;
   height: 100%;
-
-  .timerNote {
-    color: $blue-500;
-    margin-right: $block-clearance;
-    font-size: 1.5em;
-  }
 }
 
 .eventTitle {
@@ -143,6 +137,7 @@ $skip-opacity: 0.1;
 .eventActions {
   grid-area: actions;
   height: 100%;
+  text-align: end;
 }
 
 .progressBg {

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, MaybeNumber, OntimeEvent, Playback, TimerType } from 'ontime-types';
+import { EndAction, MaybeNumber, MaybeString, OntimeEvent, Playback, TimerType, TimeStrategy } from 'ontime-types';
 
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import copyToClipboard from '../../../common/utils/copyToClipboard';
@@ -26,6 +26,8 @@ interface EventBlockProps {
   timeStart: number;
   timeEnd: number;
   duration: number;
+  timeStrategy: TimeStrategy;
+  linkStart: MaybeString;
   eventId: string;
   eventIndex: number;
   isPublic: boolean;
@@ -61,6 +63,8 @@ export default function EventBlock(props: EventBlockProps) {
     timeStart,
     timeEnd,
     duration,
+    timeStrategy,
+    linkStart,
     isPublic = true,
     eventIndex,
     endAction,
@@ -251,6 +255,8 @@ export default function EventBlock(props: EventBlockProps) {
           timeStart={timeStart}
           timeEnd={timeEnd}
           duration={duration}
+          linkStart={linkStart}
+          timeStrategy={timeStrategy}
           eventId={eventId}
           eventIndex={eventIndex}
           isPublic={isPublic}

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

@@ -9,16 +9,16 @@ import { IoPlayForward } from '@react-icons/all-files/io5/IoPlayForward';
 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 { EndAction, MaybeString, Playback, TimerType, TimeStrategy } from 'ontime-types';
 
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import EditableBlockTitle from '../common/EditableBlockTitle';
 import { EventItemActions } from '../RundownEntry';
+import TimeInputFlow from '../time-input-flow/TimeInputFlow';
 
 import BlockActionMenu from './composite/BlockActionMenu';
 import EventBlockPlayback from './composite/EventBlockPlayback';
 import EventBlockProgressBar from './composite/EventBlockProgressBar';
-import EventBlockTimers from './composite/EventBlockTimers';
 
 import style from './EventBlock.module.scss';
 
@@ -30,6 +30,8 @@ interface EventBlockInnerProps {
   timeStart: number;
   timeEnd: number;
   duration: number;
+  timeStrategy: TimeStrategy;
+  linkStart: MaybeString;
   eventId: string;
   eventIndex: number;
   isPublic: boolean;
@@ -51,6 +53,8 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
     timeStart,
     timeEnd,
     duration,
+    timeStrategy,
+    linkStart,
     eventId,
     isPublic = true,
     endAction,
@@ -84,7 +88,17 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
 
   return !renderInner ? null : (
     <>
-      <EventBlockTimers eventId={eventId} timeStart={timeStart} timeEnd={timeEnd} duration={duration} delay={delay} />
+      <div className={style.eventTimers}>
+        <TimeInputFlow
+          eventId={eventId}
+          timeStart={timeStart}
+          timeEnd={timeEnd}
+          duration={duration}
+          delay={delay}
+          timeStrategy={timeStrategy}
+          linkStart={linkStart}
+        />
+      </div>
       <EditableBlockTitle title={title} eventId={eventId} placeholder='Event title' className={style.eventTitle} />
       {next && (
         <Tooltip label='Next event' {...tooltipProps}>
@@ -99,7 +113,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
         selected={selected}
         disablePlayback={skip || isRolling}
       />
-      <div className={style.statusElements}>
+      <div className={style.statusElements} id='block-status' data-ispublic={isPublic}>
         <span className={style.eventNote}>{note}</span>
         <div className={selected ? style.progressBg : `${style.progressBg} ${style.hidden}`}>
           {selected && <EventBlockProgressBar playback={playback} />}
@@ -117,10 +131,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
           </Tooltip>
           <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
             <span>
-              <IoPeople
-                className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`}
-                data-ispublic={isPublic}
-              />
+              <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`} />
             </span>
           </Tooltip>
         </div>

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

@@ -13,7 +13,7 @@ function formatDelay(timeStart: number, delay: number): string | undefined {
 
   const delayedStart = Math.max(0, timeStart + delay);
   const timeTag = removeTrailingZero(millisToString(delayedStart));
-  return `New start: ${timeTag}`;
+  return `New start ${timeTag}`;
 }
 
 function formatOverlap(previousEnd: number | null, timeStart: number): string | undefined {

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

@@ -1,83 +0,0 @@
-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 TimeInputWithButton from '../../../../common/components/input/time-input/TimeInputWithButton';
-import { useEventAction } from '../../../../common/hooks/useEventAction';
-import { forgivingStringToMillis } from '../../../../common/utils/dateConfig';
-import { tooltipDelayFast } from '../../../../ontimeConfig';
-
-import style from '../EventBlock.module.scss';
-
-interface EventBlockTimerProps {
-  eventId: string;
-  timeStart: number;
-  timeEnd: number;
-  duration: number;
-  delay: number;
-}
-
-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 } = props;
-  const { updateEvent, updateTimer } = useEventAction();
-
-  // 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;
-    }
-  };
-
-  const overMidnight = timeStart > timeEnd;
-  const hasDelay = delay !== 0;
-
-  return (
-    <div className={style.eventTimers}>
-      <TimeInputWithButton<TimeActions>
-        name='timeStart'
-        submitHandler={handleSubmit}
-        time={timeStart}
-        hasDelay={hasDelay}
-        placeholder='Start'
-      />
-      <TimeInputWithButton<TimeActions>
-        name='timeEnd'
-        submitHandler={handleSubmit}
-        time={timeEnd}
-        hasDelay={hasDelay}
-        placeholder='End'
-      />
-      <TimeInputWithButton<TimeActions>
-        name='durationOverride'
-        submitHandler={handleSubmit}
-        time={duration}
-        placeholder='Duration'
-      />
-      {overMidnight && (
-        <div className={style.timerNote}>
-          <Tooltip
-            label='End timer before start'
-            openDelay={tooltipDelayFast}
-            variant='ontime-ondark'
-            shouldWrapChildren
-          >
-            <IoAlertCircleOutline />
-          </Tooltip>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default memo(EventBlockTimers);