From 7f39d035fd111eb9c3110a9732591bf556ec59f2 Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Sun, 22 Dec 2024 19:57:43 +0100 Subject: [PATCH] refactor: show delayed times --- .../delay-indicator/DelayIndicator.tsx | 35 +++++++------------ apps/client/src/common/utils/dateConfig.ts | 4 +-- .../TextLikeInput.module.scss | 7 +++- .../cuesheet-table-elements/TextLikeInput.tsx | 5 +-- .../cuesheet-table-elements/TimeInput.tsx | 5 +-- .../cuesheet-table-elements/cuesheetCols.tsx | 16 +++++---- 6 files changed, 37 insertions(+), 35 deletions(-) diff --git a/apps/client/src/common/components/delay-indicator/DelayIndicator.tsx b/apps/client/src/common/components/delay-indicator/DelayIndicator.tsx index 14b01a55d..ed2097190 100644 --- a/apps/client/src/common/components/delay-indicator/DelayIndicator.tsx +++ b/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 ( - - - - - - ); - } - - if (delayValue > 0) { - return ( - - - - - - ); - } + if (typeof delayValue !== 'number' || delayValue === 0) { + return null; } - return null; + const delayString = tooltipPrefix + ? `${tooltipPrefix} ${millisToDelayString(delayValue)}` + : millisToDelayString(delayValue); + + return ( + + {delayValue < 0 ? : } + + ); } diff --git a/apps/client/src/common/utils/dateConfig.ts b/apps/client/src/common/utils/dateConfig.ts index 132e5bc95..780f3b653 100644 --- a/apps/client/src/common/utils/dateConfig.ts +++ b/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) { diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss index f239d38c9..e2f98ce7a 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss +++ b/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 { diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx index 34668d5fa..fbe5d1894 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx +++ b/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 { + delayed?: boolean; muted?: boolean; } function TextLikeInput(props: PropsWithChildren) { - 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 (
{children} diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TimeInput.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TimeInput.tsx index 48fe7151e..873460add 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TimeInput.tsx +++ b/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) { - 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) { handleCancelUpdate={handleFakeBlur} /> ) : ( - + {children} ); diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetCols.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetCols.tsx index 128627791..ab629958a 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetCols.tsx +++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetCols.tsx @@ -24,15 +24,16 @@ function MakeStart({ getValue, row, table }: CellContext + {formattedTime} - {delayValue !== 0 && showDelayedTimes && } + ); } @@ -43,21 +44,24 @@ function MakeEnd({ getValue, row, table }: CellContext 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 ( - + {formattedTime} + ); }