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>

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

@@ -250,3 +250,11 @@ export const useIsOnline = () => {
 
   return useRuntimeStore(featureSelector);
 };
+
+export const usePlayback = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    playback: state.timer.playback,
+  });
+
+  return useRuntimeStore(featureSelector);
+};

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

@@ -269,6 +269,7 @@ export default function Rundown({ data }: RundownProps) {
   // all events before the current selected are in the past
   let isPast = Boolean(featureData?.selectedEventId);
   let isNextDay = false;
+  let totalGap = 0;
   const isEditMode = appMode === AppMode.Edit;
 
   return (
@@ -297,6 +298,7 @@ export default function Rundown({ data }: RundownProps) {
 
                 if (isPlayableEvent(entry)) {
                   isNextDay = checkIsNextDay(entry, lastEvent);
+                  totalGap += !isPast ? entry.gap : 0;
                   if (isNewLatest(entry, lastEvent)) {
                     // populate previous entry
                     thisEvent = entry;
@@ -331,6 +333,7 @@ export default function Rundown({ data }: RundownProps) {
                         playback={isLoaded ? featureData.playback : undefined}
                         isRolling={featureData.playback === Playback.Roll}
                         isNextDay={isNextDay}
+                        totalGap={totalGap}
                       />
                     </div>
                   </div>

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

@@ -37,6 +37,7 @@ interface RundownEntryProps {
   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
+  totalGap: number;
 }
 
 export default function RundownEntry(props: RundownEntryProps) {
@@ -52,6 +53,7 @@ export default function RundownEntry(props: RundownEntryProps) {
     isRolling,
     eventIndex,
     isNextDay,
+    totalGap,
   } = props;
   const { emitError } = useEmitLog();
   const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
@@ -173,6 +175,8 @@ export default function RundownEntry(props: RundownEntryProps) {
         isRolling={isRolling}
         gap={data.gap}
         isNextDay={isNextDay}
+        dayOffset={data.dayOffset}
+        totalGap={totalGap}
         actionHandler={actionHandler}
       />
     );

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

@@ -9,7 +9,7 @@ $skip-opacity: 0.2;
   display: grid;
   grid-template-areas:
     'binder ...        ...     ...'
-    'binder pb-actions times   ...'
+    'binder pb-actions times   chip'
     'binder pb-actions title   title'
     'binder pb-actions estatus estatus'
     'binder ...        ...     ...';
@@ -131,6 +131,10 @@ $skip-opacity: 0.2;
   height: 100%;
 }
 
+.chipSection {
+  grid-area: chip;
+}
+
 .titleSection {
   grid-area: title;
   display: flex;

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

@@ -49,6 +49,8 @@ interface EventBlockProps {
   isRolling: boolean;
   gap: number;
   isNextDay: boolean;
+  dayOffset: number;
+  totalGap: number;
   actionHandler: (
     action: EventItemActions,
     payload?:
@@ -87,6 +89,8 @@ export default function EventBlock(props: EventBlockProps) {
     isRolling,
     gap,
     isNextDay,
+    dayOffset,
+    totalGap,
     actionHandler,
   } = props;
   const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
@@ -303,6 +307,9 @@ export default function EventBlock(props: EventBlockProps) {
           loaded={loaded}
           playback={playback}
           isRolling={isRolling}
+          dayOffset={dayOffset}
+          isPast={isPast}
+          totalGap={totalGap}
         />
       )}
     </div>

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}`}>

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

@@ -0,0 +1,21 @@
+.chip {
+  background-color: $gray-1100;
+  white-space: nowrap;
+
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+  padding: 0.125rem 0.5rem;
+  border-radius: 2px;
+
+  &.over {
+    color: $playback-negative;
+  }
+
+  &.under {
+    color: $playback-ahead;
+  }
+
+  &.due {
+    color: $warning-orange;
+  }
+}

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

@@ -0,0 +1,77 @@
+import { useMemo } from 'react';
+import { Tooltip } from '@chakra-ui/react';
+import { isPlaybackActive, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
+
+import { usePlayback, useTimelineStatus } from '../../../../common/hooks/useSocket';
+import { cx } from '../../../../common/utils/styleUtils';
+import { formatDuration } from '../../../../common/utils/time';
+import { tooltipDelayFast } from '../../../../ontimeConfig';
+
+import style from './EventBlockChip.module.scss';
+
+interface EventBlockChipProps {
+  id: string;
+  trueTimeStart: number;
+  isPast: boolean;
+  isLoaded: boolean;
+  className: string;
+  totalGap: number;
+  isLinkedAndNext: boolean;
+}
+
+export default function EventBlockChip(props: EventBlockChipProps) {
+  const { trueTimeStart, isPast, isLoaded, className, totalGap, isLinkedAndNext } = props;
+  const { playback } = usePlayback();
+
+  if (isLoaded) {
+    return null; //TODO: the is a small flash of 'DUE' on the loaded event as clock data arrives before isLoaded propagates
+  }
+
+  const playbackActive = isPlaybackActive(playback);
+
+  if (!playbackActive || isPast) {
+    return null; //TODO: Event report will go here
+  }
+
+  if (playbackActive) {
+    // we extracted the component to avoid unnecessary calculations and re-renders
+    return (
+      <EventUntil
+        className={className}
+        trueTimeStart={trueTimeStart}
+        totalGap={totalGap}
+        isLinkedAndNext={isLinkedAndNext}
+      />
+    );
+  }
+
+  return null;
+}
+
+interface EventUntilProps {
+  className: string;
+  trueTimeStart: number;
+  totalGap: number;
+  isLinkedAndNext: boolean;
+}
+
+function EventUntil(props: EventUntilProps) {
+  const { trueTimeStart, className, totalGap, isLinkedAndNext } = props;
+  const { clock, offset } = useTimelineStatus();
+
+  const [timeUntilString, isDue] = useMemo(() => {
+    const consumedOffset = isLinkedAndNext ? offset : Math.min(offset + totalGap, 0);
+    const offsetTimestart = trueTimeStart - consumedOffset;
+    const timeUntil = offsetTimestart - clock;
+    const isDue = timeUntil < MILLIS_PER_SECOND;
+    return [isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`, isDue];
+  }, [totalGap, isLinkedAndNext, offset, trueTimeStart, clock]);
+
+  return (
+    <Tooltip label='Expected time until start' openDelay={tooltipDelayFast}>
+      <div className={cx([style.chip, isDue ? style.due : null, className])}>
+        <div>{timeUntilString}</div>
+      </div>
+    </Tooltip>
+  );
+}

apps/client/src/theme/_ontimeStyles.scss

@@ -25,6 +25,7 @@ $ontime-delay-text: #E69056;
 $ontime-paused: #c05621;
 $ontime-stop: #E4281E;
 $playback-negative: $red-500;
+$playback-ahead: $green-500;
 $active-indicator: #8bb33d;
 $text-black: $gray-1350;