Time until (#1497)

* Timeuntil in UI (#1461)

* cherry pick EventBlockChip

* pull data down throug components

* add comment

* cleanup css

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

---------

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

* fix: account for running day

* refactor: improve composition

* add partial test

---------

Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk>

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

@@ -11,12 +11,14 @@ 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, MaybeString, Playback, TimerType, TimeStrategy } from 'ontime-types';
+import { dayInMs } from 'ontime-utils';
 
 import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import EditableBlockTitle from '../common/EditableBlockTitle';
 import TimeInputFlow from '../time-input-flow/TimeInputFlow';
 
+import EventBlockChip from './composite/EventBlockChip';
 import EventBlockPlayback from './composite/EventBlockPlayback';
 import EventBlockProgressBar from './composite/EventBlockProgressBar';
 
@@ -42,6 +44,9 @@ interface EventBlockInnerProps {
   loaded: boolean;
   playback?: Playback;
   isRolling: boolean;
+  dayOffset: number;
+  isPast: boolean;
+  totalGap: number;
 }
 
 function EventBlockInner(props: EventBlockInnerProps) {
@@ -64,6 +69,9 @@ function EventBlockInner(props: EventBlockInnerProps) {
     loaded,
     playback,
     isRolling,
+    dayOffset,
+    isPast,
+    totalGap,
   } = props;
 
   const [renderInner, setRenderInner] = useState(false);
@@ -108,6 +116,17 @@ function EventBlockInner(props: EventBlockInnerProps) {
         loaded={loaded}
         disablePlayback={skip || isRolling}
       />
+      {!skip && (
+        <EventBlockChip
+          className={style.chipSection}
+          id={eventId}
+          trueTimeStart={timeStart + dayOffset * dayInMs}
+          isPast={isPast}
+          isLoaded={loaded}
+          totalGap={totalGap}
+          isLinkedAndNext={isNext && linkStart !== null}
+        />
+      )}
       <div className={style.statusElements} id='block-status' data-ispublic={isPublic}>
         <span className={style.eventNote}>{note}</span>
         <div className={loaded ? style.progressBg : `${style.progressBg} ${style.hidden}`}>