refactor: show delayed times

apps/client/src/common/components/delay-indicator/DelayIndicator.tsx

@@ -9,32 +9,23 @@ import style from './DelayIndicator.module.scss';
 
 interface DelayIndicatorProps {
   delayValue?: number;
+  tooltipPrefix?: string;
 }
 
 export default function DelayIndicator(props: DelayIndicatorProps) {
-  const { delayValue } = props;
+  const { delayValue, tooltipPrefix } = props;
 
-  if (typeof delayValue === 'number') {
-    if (delayValue < 0) {
-      return (
-        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
-          <span className={style.delaySymbol}>
-            <IoChevronDown />
-          </span>
-        </Tooltip>
-      );
-    }
-
-    if (delayValue > 0) {
-      return (
-        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
-          <span className={style.delaySymbol}>
-            <IoChevronUp />
-          </span>
-        </Tooltip>
-      );
-    }
+  if (typeof delayValue !== 'number' || delayValue === 0) {
+    return null;
   }
 
-  return null;
+  const delayString = tooltipPrefix
+    ? `${tooltipPrefix} ${millisToDelayString(delayValue)}`
+    : millisToDelayString(delayValue);
+
+  return (
+    <Tooltip openDelay={tooltipDelayFast} label={delayString}>
+      <span className={style.delaySymbol}>{delayValue < 0 ? <IoChevronDown /> : <IoChevronUp />}</span>
+    </Tooltip>
+  );
 }

apps/client/src/common/utils/dateConfig.ts

@@ -3,8 +3,8 @@ import { formatFromMillis, MILLIS_PER_HOUR, MILLIS_PER_MINUTE } from 'ontime-uti
 
 /**
  * Parses a value in millis to a string which encodes a delay
- * @param millis 
- * @param format 
+ * @param millis
+ * @param format
  */
 export function millisToDelayString(millis: MaybeNumber, format: 'compact' | 'expanded' = 'compact'): string {
   if (millis == null || millis === 0) {

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss

@@ -8,8 +8,13 @@
   align-items: center;
   gap: 0.25rem;
 
+  &.delayed {
+    color: $ontime-delay-text;
+  }
+
   &.muted {
-    color: $muted-gray;
+    // we use opacity instead of colour to handle delayed values
+    opacity: 0.4;
   }
 
   &:hover {

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx

@@ -7,12 +7,13 @@ import style from './TextLikeInput.module.scss';
 export default memo(TextLikeInput);
 
 interface TextLikeInputProps extends HTMLAttributes<HTMLSpanElement> {
+  delayed?: boolean;
   muted?: boolean;
 }
 
 function TextLikeInput(props: PropsWithChildren<TextLikeInputProps>) {
-  const { muted, children, className, ...elementProps } = props;
-  const classes = cx([style.textInput, muted && style.muted, className]);
+  const { delayed, muted, children, className, ...elementProps } = props;
+  const classes = cx([style.textInput, delayed && style.delayed, muted && style.muted, className]);
   return (
     <div className={classes} {...elementProps} tabIndex={0}>
       {children}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TimeInput.tsx

@@ -7,13 +7,14 @@ import TextLikeInput from './TextLikeInput';
 interface TimeInputDurationProps {
   initialValue: number;
   lockedValue: boolean;
+  delayed?: boolean;
   onSubmit: (value: string) => void;
 }
 
 export default memo(TimeInputDuration);
 
 function TimeInputDuration(props: PropsWithChildren<TimeInputDurationProps>) {
-  const { initialValue, lockedValue, onSubmit, children } = props;
+  const { initialValue, lockedValue, delayed, onSubmit, children } = props;
 
   const [isEditing, setIsEditing] = useState(false);
   const [value, setValue] = useState(initialValue);
@@ -81,7 +82,7 @@ function TimeInputDuration(props: PropsWithChildren<TimeInputDurationProps>) {
       handleCancelUpdate={handleFakeBlur}
     />
   ) : (
-    <TextLikeInput onClick={handleFakeFocus} onFocus={handleFakeFocus} muted={!lockedValue}>
+    <TextLikeInput onClick={handleFakeFocus} onFocus={handleFakeFocus} muted={!lockedValue} delayed={delayed}>
       {children}
     </TextLikeInput>
   );

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetCols.tsx

@@ -24,15 +24,16 @@ function MakeStart({ getValue, row, table }: CellContext<OntimeRundownEntry, unk
   const isStartLocked = (row.original as OntimeEvent).linkStart === null;
   const delayValue = (row.original as OntimeEvent)?.delay ?? 0;
 
-  let formattedTime = millisToString(startTime);
+  const displayTime = showDelayedTimes ? startTime + delayValue : startTime;
+  let formattedTime = millisToString(displayTime);
   if (hideTableSeconds) {
     formattedTime = removeSeconds(formattedTime);
   }
 
   return (
-    <TimeInput initialValue={startTime} onSubmit={update} lockedValue={isStartLocked}>
+    <TimeInput initialValue={startTime} onSubmit={update} lockedValue={isStartLocked} delayed={delayValue !== 0}>
       {formattedTime}
-      {delayValue !== 0 && showDelayedTimes && <DelayIndicator delayValue={delayValue} />}
+      <DelayIndicator delayValue={delayValue} tooltipPrefix={millisToString(startTime)} />
     </TimeInput>
   );
 }
@@ -43,21 +44,24 @@ function MakeEnd({ getValue, row, table }: CellContext<OntimeRundownEntry, unkno
   }
 
   const { handleUpdateTimer } = table.options.meta;
-  const { hideTableSeconds } = table.options.meta.options;
+  const { showDelayedTimes, hideTableSeconds } = table.options.meta.options;
 
   const update = (newValue: string) => handleUpdateTimer(row.original.id, 'timeEnd', newValue);
 
   const endTime = getValue() as number;
   const isEndLocked = (row.original as OntimeEvent).timeStrategy === TimeStrategy.LockEnd;
+  const delayValue = (row.original as OntimeEvent)?.delay ?? 0;
 
-  let formattedTime = millisToString(endTime);
+  const displayTime = showDelayedTimes ? endTime + delayValue : endTime;
+  let formattedTime = millisToString(displayTime);
   if (hideTableSeconds) {
     formattedTime = removeSeconds(formattedTime);
   }
 
   return (
-    <TimeInput initialValue={endTime} onSubmit={update} lockedValue={isEndLocked}>
+    <TimeInput initialValue={endTime} onSubmit={update} lockedValue={isEndLocked} delayed={delayValue !== 0}>
       {formattedTime}
+      <DelayIndicator delayValue={delayValue} tooltipPrefix={millisToString(endTime)} />
     </TimeInput>
   );
 }