Revert "Timeuntil in UI (#1461)"

This reverts commit 221ff7b3af.

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

@@ -250,11 +250,3 @@ 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,7 +269,6 @@ 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 (
@@ -298,7 +297,6 @@ 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;
@@ -333,7 +331,6 @@ 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,7 +37,6 @@ 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) {
@@ -53,7 +52,6 @@ export default function RundownEntry(props: RundownEntryProps) {
     isRolling,
     eventIndex,
     isNextDay,
-    totalGap,
   } = props;
   const { emitError } = useEmitLog();
   const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
@@ -175,8 +173,6 @@ 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   chip'
+    'binder pb-actions times   ...'
     'binder pb-actions title   title'
     'binder pb-actions estatus estatus'
     'binder ...        ...     ...';
@@ -131,10 +131,6 @@ $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,8 +49,6 @@ interface EventBlockProps {
   isRolling: boolean;
   gap: number;
   isNextDay: boolean;
-  dayOffset: number;
-  totalGap: number;
   actionHandler: (
     action: EventItemActions,
     payload?:
@@ -89,8 +87,6 @@ export default function EventBlock(props: EventBlockProps) {
     isRolling,
     gap,
     isNextDay,
-    dayOffset,
-    totalGap,
     actionHandler,
   } = props;
   const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
@@ -307,9 +303,6 @@ 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,14 +11,12 @@ 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';
 
@@ -44,9 +42,6 @@ interface EventBlockInnerProps {
   loaded: boolean;
   playback?: Playback;
   isRolling: boolean;
-  dayOffset: number;
-  isPast: boolean;
-  totalGap: number;
 }
 
 function EventBlockInner(props: EventBlockInnerProps) {
@@ -69,9 +64,6 @@ function EventBlockInner(props: EventBlockInnerProps) {
     loaded,
     playback,
     isRolling,
-    dayOffset,
-    isPast,
-    totalGap,
   } = props;
 
   const [renderInner, setRenderInner] = useState(false);
@@ -116,17 +108,6 @@ 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

@@ -1,21 +0,0 @@
-.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

@@ -1,77 +0,0 @@
-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,7 +25,6 @@ $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;